Cascading Style Sheets 3

An Introduction to some of the features of CSS3. Presented at DoctyleHTML5.in, organised by @hasgeek.

Transcript

1. Css3 and Presentation
   DoctypeHtml5 | February 5, 2011 | Ahmedabad
   

   View Slide

2. My name is Rahul Gonsalves. I run Pixelogue, a
   small Bangalore-based design studio. You can email me at
   rahul@pixelogue.in
   Hi
   Css3 and Presentation | DoctypeHtml5
   

   View Slide

3. CSS 1
   1996
   CSS 2
   1998
   CSS 2.1
   2007 2010
   Css3 and Presentation | DoctypeHtml5
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. 1
    CSS
    

    View Slide

13. 1
    CSS 23,828 words
    

    View Slide

14. 2
    CSS
    

    View Slide

15. 2 6,737 words
    CSS
    

    View Slide

16. View Slide

17. Rather than attempting to shove dozens of updates into a
    single monolithic specification, it will be much easier and
    more efficient to be able to update individual pieces of the
    specification. Modules will enable CSS to be updated in
    a more timely and precise fashion, thus allowing for a
    more flexible and timely evolution of the specification as
    a whole.
    http://www.w3.org/TR/css3-roadmap/#whymods
    Css3 and Presentation | DoctypeHtml5
    

    View Slide

18. Syntax/Grammar
    Selectors
    Values and Units
    Box Model
    Positioning
    Css3 and Presentation | DoctypeHtml5
    Colour Profiles
    Colours/Backgrounds
    Line box model
    Fonts
    Text
    Ruby
    Generated Content
    Replaced Content
    Paged Content
    User Interface
    WebFonts
    aCSS
    SMIL
    Tables
    Columns
    SVG
    Math
    BECSS
    Media Queries
    

    View Slide

19. Css3 and Presentation | DoctypeHtml5
    26
    Modules
    

    View Slide

20. Css3 and Presentation | DoctypeHtml5
    26
    Modules
    /45
    Minutes
    

    View Slide

21. These are not
    the modules
    you are
    looking for.
    

    View Slide

22. View Slide

23. Target the experience layer.
    Dan Cederholm, CSS3 for Web Designers
    

    View Slide

24. CRITICAL NON-CRITICAL
    Branding Interaction
    Usability Visual Rewards
    Accessibility Feedback
    Layout Movement
    Css3 and Presentation | DoctypeHtml5
    Reproduced from CSS3 for WebDesigners
    

    View Slide

25. Syntax/Grammar
    Selectors
    Values and Units
    Box Model
    Positioning
    Css3 and Presentation | DoctypeHtml5
    Colour Profiles
    Colours/Backgrounds
    Line box model
    Fonts
    Text
    Ruby
    Generated Content
    Replaced Content
    Paged Content
    User Interface
    WebFonts
    aCSS
    SMIL
    Tables
    Columns
    SVG
    Math
    BECSS
    Media Queries
    

    View Slide

26. Syntax/Grammar
    Selectors
    Values and Units
    Box Model
    Positioning
    Css3 and Presentation | DoctypeHtml5
    Colour Profiles
    Colours/Backgrounds
    Line box model
    Fonts
    Text
    Ruby
    Generated Content
    Replaced Content
    Paged Content
    User Interface
    WebFonts
    aCSS
    SMIL
    Tables
    Columns
    SVG
    Math
    BECSS
    Media Queries
    Better Forms
    

    View Slide

27. Syntax/Grammar
    Selectors
    Values and Units
    Box Model
    Positioning
    Css3 and Presentation | DoctypeHtml5
    Colour Profiles
    Colours/Backgrounds
    Line box model
    Fonts
    Text
    Ruby
    Generated Content
    Replaced Content
    Paged Content
    User Interface
    WebFonts
    aCSS
    SMIL
    Tables
    Columns
    SVG
    Math
    BECSS
    Media Queries
    Better Forms
    ...and more!
    

    View Slide

28. Syntax/Grammar
    Selectors
    Values and Units
    Box Model
    Positioning
    Css3 and Presentation | DoctypeHtml5
    Colour Profiles
    Colours/Backgrounds
    Line box model
    Fonts
    Text
    Ruby
    Generated Content
    Replaced Content
    Paged Content
    User Interface
    WebFonts
    aCSS
    SMIL
    Tables
    Columns
    SVG
    Math
    BECSS
    Media Queries
    Transitions
    Better Forms
    ...and more!
    

    View Slide

29. Syntax/Grammar
    Selectors
    Values and Units
    Box Model
    Positioning
    Css3 and Presentation | DoctypeHtml5
    Colour Profiles
    Colours/Backgrounds
    Line box model
    Fonts
    Text
    Ruby
    Generated Content
    Replaced Content
    Paged Content
    User Interface
    WebFonts
    aCSS
    SMIL
    Tables
    Columns
    SVG
    Math
    BECSS
    Media Queries
    Transitions
    Multiple Backgrounds
    Better Forms
    ...and more!
    

    View Slide

30. Syntax/Grammar
    Selectors
    Values and Units
    Box Model
    Positioning
    Css3 and Presentation | DoctypeHtml5
    Colour Profiles
    Colours/Backgrounds
    Line box model
    Fonts
    Text
    Ruby
    Generated Content
    Replaced Content
    Paged Content
    User Interface
    WebFonts
    aCSS
    SMIL
    Tables
    Columns
    SVG
    Math
    BECSS
    Media Queries
    Transitions
    CSS Transforms
    Multiple Backgrounds
    Better Forms
    ...and more!
    

    View Slide

31. Syntax/Grammar
    Selectors
    Values and Units
    Box Model
    Positioning
    Css3 and Presentation | DoctypeHtml5
    Colour Profiles
    Colours/Backgrounds
    Line box model
    Fonts
    Text
    Ruby
    Generated Content
    Replaced Content
    Paged Content
    User Interface
    WebFonts
    aCSS
    SMIL
    Tables
    Columns
    SVG
    Math
    BECSS
    Media Queries
    Rounded Corners
    Transitions
    CSS Transforms
    Multiple Backgrounds
    Better Forms
    ...and more!
    

    View Slide

32. View Slide

33. border-radius
    

    View Slide

34. Css3 and Presentation | DoctypeHtml5
    

    View Slide

35. Css3 and Presentation | DoctypeHtml5
    

    View Slide

36. a:link {
    background-color: #df9171;
    padding: 2em;
    border-radius: 100px;
    }
    Css3 and Presentation | DoctypeHtml5
    

    View Slide

37. a:link {
    background-color: #df9171;
    padding: 2em;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    }
    Css3 and Presentation | DoctypeHtml5
    

    View Slide

38. Css3 and Presentation | DoctypeHtml5
    

    View Slide

39. Css3 and Presentation | DoctypeHtml5
    

    View Slide

40. Border-radius is your friend.
    I’m a pure-CSS button
    Css3 and Presentation | DoctypeHtml5
    

    View Slide

41. View Slide

42. multiple backgrounds
    

    View Slide

43. View Slide

44. body {
    background:
    url(image-1.png) repeat-x fixed -130% 0,
    url(image-2.png) repeat-x fixed 40% 0,
    url(image-3.png) repeat-x fixed -80% 0,
    url(image-4.png) repeat-x fixed 100% 0;
    background-color: #1a1a1a;
    }
    Css3 and Presentation | DoctypeHtml5
    

    View Slide

45. body {
    background:
    url(combined.png) repeat-x fixed 0 0,
    background:
    url(image-1.png) repeat-x fixed -130% 0,
    url(image-2.png) repeat-x fixed 40% 0,
    url(image-3.png) repeat-x fixed -80% 0,
    url(image-4.png) repeat-x fixed 100% 0;
    background-color: #1a1a1a;
    }
    Css3 and Presentation | DoctypeHtml5
    

    View Slide

46. View Slide

47. View Slide

48. transitions
    

    View Slide

49. CSS Transitions allow property changes in CSS values
    to occur smoothly over a specified duration. This
    smoothing animates the changing of a CSS value when
    triggered by a mouse click, focus or active state, or any
    changes to the element (including even a change on the
    element’s class attribute).
    http://www.alistapart.com/articles/understanding-css3-transitions
    Css3 and Presentation | DoctypeHtml5
    

    View Slide

50. View Slide

51. Css3 and Presentation | DoctypeHtml5
    

    View Slide

52. foo {
    background-color: red;
    transition-property: background-color;
    transition-duration: 1s;
    }
    foo:hover {
    background-color: blue;
    }
    Css3 and Presentation | DoctypeHtml5
    

    View Slide

53. View Slide

54. a:link {
    color: black;
    transition-property: color;
    transition-duration: 1s;
    }
    a:hover {
    color: red;
    }
    Css3 and Presentation | DoctypeHtml5
    

    View Slide

55. Css3 and Presentation | DoctypeHtml5
    

    View Slide

56. a:link {
    background-color: #f2f1e9;
    transition-property: all;
    transition-duration: 1s;
    opacity: 0;
    }
    a:hover {
    background-color: #df9171;
    opacity: 1;
    }
    Css3 and Presentation | DoctypeHtml5
    

    View Slide

57. View Slide

58. transforms
    

    View Slide

59. Css3 and Presentation | DoctypeHtml5
    

    View Slide

60. Css3 and Presentation | DoctypeHtml5
    .foo {
    -moz-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    transform: rotate(7deg);
    }
    

    View Slide

61. Css3 and Presentation | DoctypeHtml5
    .foo {
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    }
    

    View Slide

62. View Slide

63. View Slide

64. better forms
    

    View Slide

65. Css3 and Presentation | DoctypeHtml5
    

    View Slide

66. Name
    id=name
    name=name
    type=text
    placeholder="First and last name"
    required
    autofocus
    >
    Css3 and Presentation | DoctypeHtml5
    

    View Slide

67. http://24ways.org/examples/have-a-
    field-day-with-html5-forms/24ways-
    form.html
    

    View Slide

68. form input[type="text"] {
    }
    Css3 and Presentation | DoctypeHtml5
    

    View Slide

69. form input[type="submit"] {
    }
    Css3 and Presentation | DoctypeHtml5
    form input[type="text"] {
    }
    

    View Slide

70. form input[type="submit"]:hover {
    -webkit-box-shadow: 0px 0px 12px #C90;
    -moz-box-shadow: 0px 0px 12px #C90;
    box-shadow: 0px 0px 12px #C90;
    }
    Css3 and Presentation | DoctypeHtml5
    

    View Slide

71. form input[type="submit"]:hover {
    box-shadow: 0px 0px 12px
    rgba(10,10,10,0.5);
    }
    Css3 and Presentation | DoctypeHtml5
    

    View Slide

72. Css3 and Presentation | DoctypeHtml5
    form#payment label[for=visa] {
    background-image: url(visa.gif);
    }
    form#payment label[for=amex] {
    background-image: url(amex.gif);
    }
    form#payment label[for=mastercard] {
    background-image: url(mastercard.gif);
    }
    

    View Slide

73. Css3 and Presentation | DoctypeHtml5
    form#payment > fieldset > legend:before {
    content: "Step " counter(fieldsets) ": ";
    counter-increment: fieldsets;
    }
    

    View Slide

74. View Slide

75. better type
    

    View Slide

76. @font-face {
    font-family: 'MyFontFamily';
    src:
    url('myfont-webfont.eot#') format('embedded-opentype'),
    url('myfont-webfont.woff') format('woff'),
    ! url('myfont-webfont.ttf') format('truetype'),
    ! url('myfont-webfont.svg#webfontFqDaNIX6') format('svg');
    }
    .foo {font-family: ‘MyFontFamily’;}
    Css3 and Presentation | DoctypeHtml5
    

    View Slide

77. View Slide

78. View Slide

79. View Slide

80. Moar Shiny
    

    View Slide

81. View Slide

82. @media all
    and (min-width: 480px)
    and (max-width: 800px)
    {
    #gallery {
    width: 600px; float: left;
    }
    }
    @media all
    and (max-width: 480px)
    {
    #gallery {
    width: 120px; float: none;
    }
    }
    Css3 and Presentation | DoctypeHtml5
    

    View Slide

83. a[href="www.wikipedia.org"]{!
    text-decoration: underline;
    }
    img[alt~="The"]{
    text-decoration: underline;
    }
    ul li:nth-child(3n)!
    text-decoration: underline;
    }
    Css3 and Presentation | DoctypeHtml5
    

    View Slide

84. Css3 and Presentation | DoctypeHtml5
    

    View Slide

85. My name is Rahul Gonsalves. I run Pixelogue, a small
    Bangalore-based design studio. You can email me at
    rahul@pixelogue.in
    Thank you.
    Css3 and Presentation | DoctypeHtml5
    

    View Slide