Learn css3


Published on

Published in: Technology, Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Learn css3

  1. 1. mos.bayomi@gmail.comMostafa Bayomi
  2. 2. mos.bayomi@gmail.comMostafa BayomiWhat is CSS3?History
  3. 3. mos.bayomi@gmail.comMostafa BayomiCSS3 History• “CSS” is an acronym for Cascading Style Sheets, a web-based markuplanguage used to describe the look and formatting of a website to thebrowser.• The first iteration of CSS was published in late 1996, offering supportfor font properties, colors for text and backgrounds as well asalignment of text, images, tables and other web elements.• CSS2 was introduced in 1998, bringing additional capabilities such asabsolute, relative and fixed positioning of elements ,beforeintroducing CSS 2.1 in 2005.
  4. 4. mos.bayomi@gmail.comMostafa BayomiCSS3 History(cont’d)• Unlike CSS 2, which is a large single specification defining variousfeatures, CSS 3 is divided into several separate documents called"modules".• Each module adds new capabilities or extends features defined inCSS 2, over preserving backward compatibility.• Work on CSS level 3 started around the time of publication of theoriginal CSS 2 recommendation.• The earliest CSS 3 drafts were published in June 1999.
  5. 5. mos.bayomi@gmail.comMostafa BayomiA Look at Modules• Part of the problem with the first two generations of CSS was that thespecification became too large and complex to update frequently.• Rather than continue down that path, the W3C created the module systemfor CSS3, so that individual components can be updated and refined inpieces over time.• Some of the most important CSS3 modules are:– Selectors– Box Model– Backgrounds and Borders– Text Effects– 2D/3D Transformations– Animations– Multiple Column Layout– User Interface
  6. 6. mos.bayomi@gmail.comMostafa BayomiCSS3 Browser support• CSS3 is not yet a W3C standard, but the major browsers support manyof the new properties.• The table @ w3schools web site lists the new CSS3 properties andtheir browser supporthttp://www.w3schools.com/cssref/css3_browsersupport.asp• Or you can visit this site that shows how much CSS3 does yourbrowser supporthttp://css3test.com/• Or this site:http://caniuse.com/
  7. 7. mos.bayomi@gmail.comMostafa BayomiCSS3 SelectorsThe heart of CSS
  8. 8. mos.bayomi@gmail.comMostafa BayomiCSS3 Selectors• With CSS3, we can target almost any element on the page with a widerange of selectors.• We can now start using CSS3 selectors, and all the selectors fromprevious versions of CSS are still supported.
  9. 9. mos.bayomi@gmail.comMostafa BayomiRelational Selectors• Relational selectors target elements based on their relationship to anotherelement within the markup.• Descendant (E F):– It targets any element F that is a descendant (child, grandchild, great grandchild, andso on) of an element E.• Child (E > F):– matches any element F that is a direct child of element E.• Adjacent Sibling (E + F):– matches any element F that shares the same parent as E, and comes directly after Ein the markup.• General Sibling (E ~ F):– matches any element F that shares the same parent as any E and comes after it inthe markup.
  10. 10. mos.bayomi@gmail.comMostafa BayomiAttribute Selectors• CSS2 introduced several attribute selectors. These allow for matchingelements based on their attributes.• CSS3 expands upon those attribute selectors, allowing for sometargeting based on pattern matching.• E[attr]:– matches any element E that has the attribute attr with any value.• E[attr=val]:– matches any element E that has the attribute attr with the exact, case-insensitivevalue val.• E[attr|=val]:– matches any element E whose attribute attr either has the value val or beginswith val-
  11. 11. mos.bayomi@gmail.comMostafa BayomiAttribute Selectors(cont’d)• E[attr~=val]:– matches any element E whose attribute attr has within its value the full word val,surrounded by whitespace• E[attr^=val]:– matches any element E whose attribute attr starts with the value val• E[attr$=val]:– matches any element E whose attribute attr ends in val• E[attr*=val]– :Matches any element E whose attribute attr matches val anywhere within theattribute
  12. 12. mos.bayomi@gmail.comMostafa BayomiPseudo-classes• It’s likely that you’re already familiar with some of the user interactionpseudo-classes, namely :link, :visited, :hover, :active,and :focus.• There are many other pseudo-classes available.• Several of these have been in the specification for years, but weren’tsupported (or commonly known) until browsers started supportingthe new HTML5 form attributes that made them more relevant.• pseudo-classes can match elements based on attributes, userinteraction, and form control state:
  13. 13. mos.bayomi@gmail.comMostafa Bayomi The :visited pseudo-class may pose a security risk, and maynot be fully supported in the future. In short, malicious sites can apply a style to a visited link, thenuse JavaScript to check the styles of links to popular sites. This allows the attacker to glimpse the user’s browsing historywithout their permission. As a result, several browsers have begun limiting the stylesthat can be applied with :visited, and some others (notablySafari 5) have disabled it entirely.Slide Notes
  14. 14. mos.bayomi@gmail.comMostafa BayomiPseudo-classes(cont’d)class Description:enabled A user interface element that’s enabled.:disabled Conversely, a user interface element that’s disabled:checked Radio buttons or checkboxes that are selected or ticked:target the element that is the target of the currently active intrapageanchor:valid Applies to elements that are valid, based on the type or patternattributes:invalid Applies to empty required elements, and elements failing tomatch the requirements defined by the type or patternattributes.
  15. 15. mos.bayomi@gmail.comMostafa BayomiPseudo-classes(cont’d)class Description:in-range Applies to elements with range limitations, where the value iswithin those limitations.This applies, for example, to number and range input types withmin and max attributes.:out-of-range The opposite of :in-range:required Applies to form controls that have the required attribute set.:optional Applies to all form controls that do not have the required attribute.:read-only Applies to elements whose contents are unable to be altered bythe user:read-write Applies to elements whose contents are user-alterable, such astext input fields.
  16. 16. mos.bayomi@gmail.comMostafa BayomiStructural Pseudo-classes• So far, we’ve seen how we can target elements based on theirattributes and states.• CSS3 also enables us to target elements based simply on their locationin the markup.• These selectors are grouped under the heading structural pseudo-classes.
  17. 17. mos.bayomi@gmail.comMostafa BayomiStructural Pseudo-classes(cont’d)class Description:root The root element, which is always the html element.E F:nth-child(n) The element F that is the nth child of its parent EE F:nth-last-child(n) The element F that is the nth child of its parent E,counting backwards from the last one.li:nth-last-child(1) would match the last item in any listE:nth-of-type(n) The element that is the nth element of its type in a givenparent elementE:nth-last-of-type(n) Like nth-of-type(n), except counting backwards from thelast element in a parentE:first-child The element E that is the first child E of its parent.This is the same as : nth-child(1).
  18. 18. mos.bayomi@gmail.comMostafa BayomiStructural Pseudo-classes(cont’d)class DescriptionE:last-child The element E that is the last child E of its parent,same as: nth-last-child(1)E:first-of-type Same as: nth-of-type(1).E:last-of-type Same as: nth-last-of-type(1)E:only-child An element that’s the only child of its parentE:only-of-type An element that’s the only one of its type inside its parentelementE:empty An element that has no children; this includes text nodes,so <p>hello</p> will not be matched
  19. 19. mos.bayomi@gmail.comMostafa BayomiStructural Pseudo-classes(cont’d)class DescriptionE:lang(en) An element in the language denoted by the two-letterabbreviation (en).E:not(exception) it will select elements that don’t match the selector in theparentheses.• Selectors with the :not pseudo-class match everything to the left ofthe colon, and then exclude from that matched group the elementsthat also match what’s to the right of the colon.• You can string several :not pseudo-classes together.h2:not(header >h2):not(.logo)
  20. 20. mos.bayomi@gmail.comMostafa Bayomi What is n? In the simplest case, n can be an integer. For example ,:nth-of-type(1) will target the first element in a series. You can also pass one of the two keywords odd or even, targetingevery other element. You can also, more powerfully, pass a number expression such as:nth-of-type(3n+1). 3n means every third element, defining thefrequency, and +1 is the offset. The default offset is zero, so where :nth-of-type(3n) would match the3rd, 6th, and 9th elements in a series.Slide Notes
  21. 21. mos.bayomi@gmail.comMostafa BayomiPseudo-elements andGenerated Content• CSS gives us access to pseudo-elements.• Pseudo-elements allow you to target text that’s part of the document.• For example, all text nodes have a first letter and a first line, but howcan you target them without wrapping them in a span?.• CSS provides the ::first-letter and ::first-line pseudo-elements thatmatch the first letter and first line of a text node, respectively.
  22. 22. mos.bayomi@gmail.comMostafa BayomiGenerated Content• The ::before and ::after pseudo-elements don’t refer to content thatexists in the markup, but rather to a location where you can insertadditional content, generated right there in your CSS.• While this generated content doesn’t become part of the DOM, it canbe styled.a[href^=http]:after {content: " (" attr(href) ")";}• attr() allows you to access any attributes of the selected element,coming in handy here for displaying the link’s target.
  23. 23. mos.bayomi@gmail.comMostafa BayomiGenerated Content• ::selection:• The ::selection pseudo-element matches text that ishighlighted.• This is supported in WebKit, and with the -moz vendor prefix inFirefox.::selection {background:#484848;color:#fff;}::-moz-selection{background: #484848;color:#fff;}
  24. 24. mos.bayomi@gmail.comMostafa BayomiCSS3 ColoursNew ways of describing colours
  25. 25. mos.bayomi@gmail.comMostafa BayomiCSS3 Colors• we almost always declared colors using the hexadecimal format(#FFFFFF for white).• It was also possible to declare colors using the rgb() notation,providing either integers (0–255) or percentages.• In addition, we had access to a few named colors, like purple, lime,aqua, red,… .• The color keyword list has been extended in the CSS3 color module 2to include 147 additional keyword colors.• CSS3 also provides us with a number of other options: HSL, HSLA, andRGBA.
  26. 26. mos.bayomi@gmail.comMostafa BayomiRGBA• RGBA works just like RGB, except that it adds a fourth value : alpha,the opacity level.• The first three values still represent red, green, and blue.• For the alpha value, 1 means fully opaque, 0 is fully transparent, and0.5 is 50% opaque.• Unlike RGB, which can also be represented with hexadecimal notationas #RRGGBB, there is no hexadecimal notation for RGBA.
  27. 27. mos.bayomi@gmail.comMostafa BayomiHSL and HSLA• HSL stands for hue, saturation, and lightness.• With RGB, when you need to manipulate the saturation or brightnessof a color you change all three color values.• With HSL you can do this by either change the saturation, or thelightness, while keeping the same base hue.• The syntax for HSL comprises integer for hue, and percentage valuesfor saturation and lightness.
  28. 28. mos.bayomi@gmail.comMostafa BayomiHSL and HSLA(cont’d)• The hsl() declaration accepts three values:– The hue, in degrees from 0 to 359.• Some examples: 0 = red, 60 = yellow, 120 = green , 180 = cyan, 240 = blue.– The saturation, as a percentage. 100% is the norm for saturation– Saturation of 100% will be the full hue, and saturation of 0 will give you ashade of gray.– A percentage for lightness, with 50% being the norm.– Lightness of 100% will be white, 50% will be the actual hue, and 0% willbe black.
  29. 29. mos.bayomi@gmail.comMostafa BayomiHSL and HSLA(cont’d)• HSL also allows for an opacity value(hsla).• For example, hsla(300, 100%, 50%, 0.5) is magenta with full saturationand normal lightness, which is 50% opaque.
  30. 30. mos.bayomi@gmail.comMostafa BayomiCSS3 Borders• With CSS3, you can create rounded borders, add shadow to boxes, and usean image as a border without using a design program, like Photoshop.• The border-radius property lets you create rounded corners without theneed for images or additional markup.-moz-border-radius: 25px;-webkit-border-radius: 25px;-ms-border-radius: 25px;-o-border-radius: 25px;border-radius: 25px;– When including prefixed properties, always follow with the correctlywritten, nonprefixed, standards-compliant syntax.– This will ensure that your site is forward compatible!
  31. 31. mos.bayomi@gmail.comMostafa BayomiCSS Vendor Prefixes• CSS vendor prefixes or CSS browser prefixes are a way for browser makers toadd support for new CSS features in a sort of testing and experimentationperiod.• Browser prefixes are used to add new features that may not be part of aformal specification and to implement features in a specification that hasn’tbeen finalized.• The CSS browser prefixes are:– Android: -webkit-– Chrome: -webkit-– Firefox: -moz-– Internet Explorer: -ms-– iOS: -webkit-– Opera: -o-– Safari: -webkit-
  32. 32. mos.bayomi@gmail.comMostafa Bayomi In most cases, to use a more advanced CSS style property, youtake the standard CSS property and add the prefix above foreach browser. For example, if you want to add a CSS3 transition to yourdocument, you would use the transition property with theprefixes listed first: -webkit-transition: all 4s ease;-moz-transition: all 4s ease;-ms-transition: all 4s ease;-o-transition: all 4s ease;transition: all 4s ease;Slide Notes
  33. 33. mos.bayomi@gmail.comMostafa Bayomi You can override this issue by using libraries like: -prefix-free and others PIE makes Internet Explorer 6-9 capable of rendering several ofthe most useful CSS3 decoration features.http://css3pie.com/Slide Notes
  34. 34. mos.bayomi@gmail.comMostafa BayomiDrop Shadows• CSS3 provides the ability to add drop shadows to elements using thebox-shadow property.• This property lets you specify the color, height, width, blur, and offsetof one or multiple inner and/or outer drop shadows on your elements.div{box-shadow: 10px 10px 5px #888888;}• To include more than one box shadow on an element, define a comma-separated list of shadows.• When more than one shadow is specified, the shadows are layered front toback, as if the browser drew the last shadow first, and the previous shadowon top of that.left top blur color
  35. 35. mos.bayomi@gmail.comMostafa Bayomi The first value is the horizontal offset. A positive value will create ashadow to the right of the element, a negative value to the left. The second value is the vertical offset. A positive value pushes theshadow down, creating a shadow on the bottom of the element. Anegative value pushes the shadow up. The third value, if included, is the blur distance of the shadow. Thegreater the value, the more the shadow is blurred. Only positivevalues are allowed. The fourth value determines the spread distance of the shadow. Apositive value will cause the shadow shape to expand in alldirections. A negative value contracts the shadow. The fifth value above is the color.Slide Notes
  36. 36. mos.bayomi@gmail.comMostafa BayomiCSS3 Border Image• With the CSS3 border-image property you can use an image to createa border:• Use an image to create a border around a div element:div{border-image:url(border.png) 30 30 round;-webkit-border-image:url(border.png) 30 30 round;-o-border-image:url(border.png) 30 30 round;}
  37. 37. mos.bayomi@gmail.comMostafa BayomiCSS3 BackgroundsA new way to set Backgrounds
  38. 38. mos.bayomi@gmail.comMostafa BayomiBackground-size• The background-size property specifies the size of the backgroundimage• Before CSS3, the background image size was determined by the actualsize of the image• In CSS3 it is possible to specify the size of the background image,which allows us to re-use background images in different contexts• You can specify the size in pixels or in percentages. If you specify thesize as a percentage, the size is relative to the width and height of theparent elementbackground-size:80px 60px;
  39. 39. mos.bayomi@gmail.comMostafa BayomiBackground-origin• The background-origin property specifies the positioning area of thebackground images.• The background image can be placed within the content-box, padding-box, or border-box area.background-origin:content-box;
  40. 40. mos.bayomi@gmail.comMostafa BayomiMultiple Background Images• CSS3 allows you to use several background images for an element.• To make a declaration for multiple background images, simplyseparate the values for each individual image with a comma.background-image:url(firstImage.jpg), url(secondImage.gif),url(thirdImage.png);• The background images are layered one on top of the other with thefirst declaration on top
  41. 41. mos.bayomi@gmail.comMostafa BayomiCSS3 Text EffectsNew text features
  42. 42. mos.bayomi@gmail.comMostafa BayomiText-shadow• CSS3 contains several new text features as text-shadow• The syntax of the text-shadow property is very similar to box-shadow, including prefixes, offsets, and the ability to add multipleshadows./* single shadow */text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5)/* multiple shadows */text-shadow: topOffset1 leftOffset1 blurRadius1 color1,topOffset2 leftOffset2 blurRadius2 color2,topOffset3 leftOffset3 blurRadius3 color3;
  43. 43. mos.bayomi@gmail.comMostafa BayomiWord Wrapping• If a word is too long to fit within an area, it expands outside• In CSS3, the word-wrap property allows you to force the text to wrap -even if it means splitting it in the middle of a word:p {word-wrap:break-word;}
  44. 44. mos.bayomi@gmail.comMostafa BayomiCSS3 GradientsDecorative styling features
  45. 45. mos.bayomi@gmail.comMostafa BayomiCSS3 Gradients• CSS3 provides us with the ability to create native radial and lineargradients, as well as include multiple background images on anyelement• A gradient can be theoretically employed anywhere a url()value canbe used, such as background-image, border-image, and even list-style-type• Though for now the most consistent support is for backgroundimages.
  46. 46. mos.bayomi@gmail.comMostafa BayomiLinear Gradients• Lineargradients are those where colors transition across a straight line• Here’s the basic syntax for linear gradients:background-image: linear-gradient( … );• Inside those parentheses, you specify the direction of the gradient,and then provide some color stops.• For the direction, you can provide either the angle along which thegradient should proceed, or the side or corner from which it shouldstart.
  47. 47. mos.bayomi@gmail.comMostafa BayomiLinear Gradients(cont’d)• John Allsop’s is a tool that enables you to create gradients with colorstops• http://www.westciv.com/tools/gradients/
  48. 48. mos.bayomi@gmail.comMostafa Bayomi Colors transition smoothly from one color stop to the next.However if two color stops are placed at the same position along thegradient, the colors won’t fade, but will stop and start on ahard line. This is a way to create a striped background effect, like the oneshownSlide Notes
  49. 49. mos.bayomi@gmail.comMostafa BayomiRadial Gradients• Radial gradients are circular or elliptical gradients.• Rather than proceeding along a straight axis, colors blend out from astarting point in all directions.• The above three declarations arefunctionally identical
  50. 50. mos.bayomi@gmail.comMostafa BayomiRadial Gradients(cont’d)• At the minimum, you need to provide a start color and an end color.• Alternatively, you can also provide a position for the center of thegradient as the first parameter, and a shape and size as the secondparameter.• The shape can take one of two values, circle or ellipse, where ellipse isthe default.background-image: -webkit-radial-gradient(90px 80px,#FFF, #000);(0,0)90px80px
  51. 51. mos.bayomi@gmail.comMostafa Bayomi For the size, you can use one of the following values: closest-side: The gradient’s shape meets the side of the box closest to its center (forcircles),or meets both the vertical and horizontal sides closest to the center (for ellipses). closest-corner: The gradient’s shape is sized so it meets exactly the closest corner of the boxfrom its center. farthest-side: Similar to closest-side, except that the shape is sized to meet the side of thebox farthest from its center (or the farthest vertical and horizontal sides in thecase of ellipses).Slide Notes
  52. 52. mos.bayomi@gmail.comMostafa Bayomi farthest-corner: The gradient’s shape is sized so that it meets exactly the farthestcorner of the box from its center. contain: A synonym for closest-side. cover A synonym forfarthest-corner.Slide Notes
  53. 53. mos.bayomi@gmail.comMostafa BayomiCSS3 Embedded FontsThe @font-face
  54. 54. mos.bayomi@gmail.comMostafa Bayomi@font-face rule• Before CSS3, web designers had to use fonts that were alreadyinstalled on the users computer• With CSS3, web designers can use whatever font he/she likes• When you have found/bought the font you wish to use, include thefont file on your web server, and it will be automatically downloadedto the user when needed• Your "own" fonts are defined in the CSS3 @font-face rule
  55. 55. mos.bayomi@gmail.comMostafa Bayomi@font-face rule(cont’d)• In the new @font-face rule you must first define a name for the font(e.g. myFirstFont), and then point to the font file in the src property.@font-face{font-family: myFirstFont;src: url(sansation_light.woff);}div{font-family: myFirstFont;}• Use lowercase letters for the font URL.• Uppercase letters can give unexpected results in IE.
  56. 56. mos.bayomi@gmail.comMostafa BayomiFont formats• The src property can take several formats. Additionally, you candeclare more than one source• If the browser fails to find the first source, it will try for the next one,and so on, until it either finds a source, or it runs out of options• There are many font formats , and each browser supports someformats but not for some othersFormat Browser SupportWOFF (Web Open Font Format) font IE 9+TTF (True Type)OTF (OpenType)SVG fonts/shapesEOT (Embedded OpenType) Just in IE 9+
  57. 57. mos.bayomi@gmail.comMostafa BayomiUsing Bold Text• You must add another @font-face rule containing descriptors for boldtext:@font-face{font-family: myFirstFont;src: url(sansation_bold.woff);font-weight:bold;}• The file "Sansation_Bold.ttf" is another font file, that contains the boldcharacters for the Sansation font• Browsers will use this whenever a piece of text with the font-family"myFirstFont" should render as bold• This way you can have many @font-face rules for the same font
  58. 58. mos.bayomi@gmail.comMostafa BayomiCSS3 Multiple ColumnsLaying out text
  59. 59. mos.bayomi@gmail.comMostafa BayomiCSS3 Multiple Columns• With CSS3, you can create multiple columns for laying out text - like innewspapers• With CSS3 columns, the browser determines when to end one columnand begin the next without requiring any extra markup.• Create Multiple Columns:div{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */column-count:3;}• The column-count property specifies the number of columns anelement should be divided into
  60. 60. mos.bayomi@gmail.comMostafa BayomiSpecify the Gap Between Columns:• The column-gap property specifies the gap between the columns• Specify a 40 pixels gap between the columns:div{-moz-column-gap:40px; /* Firefox */-webkit-column-gap:40px; /* Safari and Chrome */column-gap:40px;}• The total width of the columns combined with the gaps will take up100% of the width of the element
  61. 61. mos.bayomi@gmail.comMostafa BayomiCSS3 Column Rules• The column-rule property sets the width, style, and color of the rulebetween columns• Specify the width, style and color of the rule between columns:div{-moz-column-rule:3px outset #ff00ff; /* Firefox */-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */column-rule:3px outset #ff00ff;}
  62. 62. mos.bayomi@gmail.comMostafa BayomiCSS3 Media QueriesThe way to ResponsiveWebDesign
  63. 63. mos.bayomi@gmail.comMostafa BayomiWhat is “Media Queries”• Media queries are an excellent way to deliver different styles todifferent devices, providing the best experience for each type of user.• A part of the CSS3 specification, media queries expand the role ofthe media attribute that controls how your styles are applied.• For example, its been common practice for years to use a separatestyle sheet for printing web pages by specifying media="print“• Media queries take this idea to the next level by allowing designers totarget styles based on a number of device properties, such as screenwidth, orientation, and so on
  64. 64. mos.bayomi@gmail.comMostafa BayomiWhat is “Media Queries”(cont’d)• For example:<link href="css/phone.css“rel="stylesheet"type="text/css"media="only screen and (max-width: 400px)" >• It means:– apply this style sheet only to a device that has a screen and only if the browserwindow is no wider than 400 pixels
  65. 65. mos.bayomi@gmail.comMostafa BayomiMedia Queries syntax<link href="css/phone.css“rel="stylesheet"type="text/css"media="screen and (color)" >• Keywords: (and , only , not);• You can concatenate multiple media queries using the comma whichacts as logical OR operator: if one of the media expressions evaluatesto true the styles are used.media type expression
  66. 66. mos.bayomi@gmail.comMostafa BayomiMedia Queries syntax (cont’d)• Linking external styles:<link href="css/phone.css“ rel="stylesheet“ type="text/css"media="screen and (color)" >-------------------------------------------------------------------------------------------• Importing modular styles@import url("phone.css") only screen and (max-width:400px);-------------------------------------------------------------------------------------------• Use with @media blocks(inside .css file)@media only screen and (max-width:400px){#navbar{float: none; width: 400px;}}
  67. 67. mos.bayomi@gmail.comMostafa BayomiMedia query support and features• Media queries are supported in Internet Explorer (IE) 9+, Firefox 3.5+, Safari 3+,Opera 7+, as well as on most modern smartphones and other screen-based devices• Features:
  68. 68. mos.bayomi@gmail.comMostafa BayomiMedia query support and features(cont’d)• Some features also accept max and min prefixes, which gives much more flexibility:
  69. 69. mos.bayomi@gmail.comMostafa Bayomiwidth, device-width, and viewport• What is the difference between width and height and the equivalent valuesprefixed by device- ?• In the case of desktop and laptop computers, the difference is easy tounderstand: width and height refer to the size of the browser viewport,whereas device-width and device-height refer to the dimensions of themonitor• Mobile browsers fill the available screen, so you might expect width anddevice-width to be the same
  70. 70. mos.bayomi@gmail.comMostafa BayomiCSS3 TransformsMoving things around
  71. 71. mos.bayomi@gmail.comMostafa BayomiCSS3 Transforms• The CSS3 transform property lets you translate, rotate, scale, or skew anyelement on the page.• We can manipulate an element’s appearance using transform functions.• The value of the transform property is one or more transform functions,separated by spaces, which will be applied in the order they’re provided.• There are two types of transforms: 2D and 3D.• The 2D transform methods:– translate()– rotate()– scale()– skew()– matrix()
  72. 72. mos.bayomi@gmail.comMostafa BayomiTranslation• Translation functions allow you to move elements left, right, up, ordown• Unlike position:relative, which allows you to position an elementeither against its current position or against a parent or otherancestor, a translated element can only be moved relative to itscurrent position.• The translate(x,y) function moves an element by x from the left, andy from the top:-webkit-transform: translate(45px,-45px);-moz-transform: translate(45px,-45px);-ms-transform: translate(45px,-45px);-o-transform: translate(45px,-45px);transform: translate(45px,-45px);
  73. 73. mos.bayomi@gmail.comMostafa Bayomi If you only want to move an element vertically or horizontally,you can use the translateX or translateY functions:transform: translateX(45px);transform: translateY(45px); Note: the WebKit will only allow you to transform block-levelelements. Inline elements are off-limits. That’s easy enough to fix—we’ll just adddisplay:inline-block, to our inline elements.Slide Notes
  74. 74. mos.bayomi@gmail.comMostafa BayomiScaling• The scale(x,y) function scales an element by the defined factorshorizontally and vertically, respectively.• If only one value is provided, it will be used for both the x and y scaling• For example, scale(1) would leave the element the same size,scale(2) would double its proportions, scale(0.5) would halvethem, and so on.-webkit-transform: scale(1.5,0.25);-moz-transform: scale(1.5,0.25);-ms-transform: scale(1.5,0.25);-o-transform: scale(1.5,0.25);transform: scale(1.5,0.25);
  75. 75. mos.bayomi@gmail.comMostafa BayomiScaling(cont’d)• As with translate, you can also use the scaleX(x) or scaleY(y)functions• scaling, like translation, has no impact on the document flow.• This means that if you scale inline text, text around it won’t reflow toaccommodate it
  76. 76. mos.bayomi@gmail.comMostafa BayomiRotation• The rotate() function rotates an element around the point of origin(as with scale, by default this is the element’s center) by a specifiedangle value• Angles are declared in degrees, with positive degrees movingclockwise and negative moving counter-clockwise-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-ms-transform:rotate(10deg);-o-transform:rotate(10deg);transform:rotate(10deg);
  77. 77. mos.bayomi@gmail.comMostafa BayomiSkew• The skew(x,y) function specifies a skew along the X and Y axes• If the second parameter is omitted, the skew will only occur on the Xaxis• As with translate and scale, there are axis-specific versions of theskew transform: skewX() and skewY()-webkit-transform: skew(15deg, 4deg);-moz-transform: skew(15deg, 4deg);-ms-transform: skew(15deg, 4deg);-o-transform: skew(15deg, 4deg);transform: skew(15deg, 4deg);
  78. 78. mos.bayomi@gmail.comMostafa BayomiChanging the Origin of the Transform• You can control the origin from which your transforms are applied• This is done using the transform-origin property• It has the same syntax as the background-position property, anddefaults to the center of the object-webkit-transform-origin: 20px 20px;-moz-transform-origin: 20px 20px;-o-transform-origin: 20px 20px;transform-origin: 20px 20px;
  79. 79. mos.bayomi@gmail.comMostafa Bayomi3D Transforms• CSS3 allows you to format your elements using 3D transforms.• Internet Explorer 10 and Firefox supports 3D transforms.• Chrome and Safari requires the prefix -webkit-.• Opera does not yet support 3D transforms (It supports 2D transforms only).• With the rotateX() method, the element rotates around its X-axis at a givendegree.• With the rotateY() method, the element rotates around its Y-axis at a givendegree
  80. 80. mos.bayomi@gmail.comMostafa BayomiCSS3 TransitionsLet your pages feel more dynamic
  81. 81. mos.bayomi@gmail.comMostafa BayomiTransitions• Transitions allow the values of CSS properties to change over time,essentially• Animation has certainly been possible for some time with JavaScript,but native CSS transitions require much less processing on the clientside• Transition has a few different properties:– transition-property,– transition-duration,– transition-timing-function,– transition-delay
  82. 82. mos.bayomi@gmail.comMostafa Bayomitransition-property• The transition-property lists the CSS properties of the element thatshould be transitioned.• Properties that can be made to transition include background,border, box-model, and many other properties• You can transition font sizes and weights, but not font families• You can provide any number of CSS properties to the transition-property declaration, separated by commas• Alternatively, you can use the keyword all to indicate that everysupported property should be animated
  83. 83. mos.bayomi@gmail.comMostafa Bayomitransition-property(cont’d)• To do this, you must specify two things:– Specify the CSS property you want to add an effect to– Specify the duration of the effect• Note: If the duration is not specified, the transition will have no effect,because default value is 0-webkit-transition-property: width;-moz-transition-property: width;-o-transition-property: width;transition-property: width;
  84. 84. mos.bayomi@gmail.comMostafa Bayomitransition-duration• The transition-duration property sets how long the transition willtake.• You can specify this either in seconds (s) or milliseconds (ms)-webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;transition-duration: 0.2s;
  85. 85. mos.bayomi@gmail.comMostafa Bayomitransition-timing-function• The transition-timing-function lets you control the ease of thetransition• Do you want your animation to start off slow and get faster, start offfast and end slower• You can specify one of the key terms ease, linear, ease-in, ease-out,or ease-in-out.-webkit-transition-timing-function: ease-out;-moz-transition-timing-function: ease-out;-o-transition-timing-function: ease-out;transition-timing-function: ease-out;
  86. 86. mos.bayomi@gmail.comMostafa Bayomitransition-delay• By using the transition-delay property, it’s possible to introduce adelay before the animation begins.• Normally, a transition begins immediately, so the default is 0.• Include the number of milliseconds (ms) or seconds (s) to delay thetransition-webkit-transition-delay: 250ms;-moz-transition-delay: 250ms;-o-transition-delay: 250ms;transition-delay: 250ms;
  87. 87. mos.bayomi@gmail.comMostafa BayomiThe transition Shorthand Property• The transition property is shorthand for the four transition functionsdescribed before• Note that order of the values is important and must be as follows(though you don’t need to specify all four values) like the borderproperty-webkit-transition: width 0.2s ease-out;-moz-transition: width 0.2s ease-out;-o-transition: width 0.2s ease-out;transition: width 0.2s ease-out;
  88. 88. mos.bayomi@gmail.comMostafa Bayomi The transition properties allow for multiple transitions in onecall. You can also specify different durations and timing functionsfor each property being animated. Simply include each value in a comma-separated list, using thesame order as in your transition-propertytransition-property: transform, color;transition-duration: 0.2s, 0.1s;transition-timing-function: ease-out, linear;Slide Notes
  89. 89. mos.bayomi@gmail.comMostafa BayomiCSS3 AnimationsLet your pages feel more dynamic
  90. 90. mos.bayomi@gmail.comMostafa BayomiAnimations• While transitions animate elements over time, CSS animations allowyou to control each step of an animation via keyframes• If you’ve ever worked with Flash, you’re likely very familiar with theconcept of keyframes• With CSS transitions, we’re essentially limited to defining the first andlast keyframes• CSS animations allow us to add any number of keyframes in between,to guide our animation in more complex ways
  91. 91. mos.bayomi@gmail.comMostafa BayomiKeyframes• To animate an element in CSS, you first create a named animation,then attach it to an element in that element’s property declarationblock• Animations in themselves don’t do anything; in order to animate anelement, you will need to associate the animation with that element• To create an animation, use the @keyframes rule followed by a nameof your choosing, which will serve as the identifier for the animation@keyframes myAnimation {from {background: red;}to {background: yellow;}}
  92. 92. mos.bayomi@gmail.comMostafa BayomiAnimations• When the animation is created in the @keyframe, bind it to a selector• Bind the animation to a selector by specifying at least these two CSS3animation properties:– Specify the name of the animation– Specify the duration of the animationdiv{animation: myAnimation 5s;-webkit-animation: myAnimation 5s;}
  93. 93. mos.bayomi@gmail.comMostafa BayomiWhat are Animations in CSS3?• You can change as many styles you want, as many times you want.• Specify when the change will happen in percent, or the keywords"from" and "to", which is the same as 0% and 100%.• 0% is the beginning of the animation, 100% is when the animation iscomplete.• For best browser support, you should always define both the 0% andthe 100% selectors.@keyframes myAnimation{0% {background: red; left:0px; top:0px;}25% {background: yellow; left:200px; top:0px;}50% {background: blue; left:200px; top:200px;}75% {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}
  94. 94. mos.bayomi@gmail.comMostafa BayomiCSS3 Animation PropertiesProperty Description@keyframes Specifies the animationanimation-name Specifies the name of the @keyframes animationanimation-duration Specifies how many seconds or milliseconds an animation takesto complete one cycle. Default 0animation-timing-functionDescribes how the animation will progress over one cycle of itsduration. Default "ease"animation-delay Specifies when the animation will start. Default 0animation-iteration-countSpecifies the number of times an animation is played. Default 1animation-direction Specifies whether or not the animation should play in reverse onalternate cycles. Default "normal"animation-play-state Specifies whether the animation is running or paused. Default"running"animation A shorthand property for all the animation properties, except theanimation-play-state property