Cascading Style Sheets 3

Cascading Style Sheets 3

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

07dc3293ce8dcaa8978112bcea950d39?s=128

Rahul Gonsalves

April 10, 2012
Tweet

Transcript

  1. 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
  2. 3.

    CSS 1 1996 CSS 2 1998 CSS 2.1 2007 2010

    Css3 and Presentation | DoctypeHtml5
  3. 4.
  4. 5.
  5. 6.
  6. 7.
  7. 8.
  8. 9.
  9. 10.
  10. 11.
  11. 12.
  12. 14.
  13. 16.

    3

  14. 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
  15. 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
  16. 22.
  17. 24.

    CRITICAL NON-CRITICAL Branding Interaction Usability Visual Rewards Accessibility Feedback Layout

    Movement Css3 and Presentation | DoctypeHtml5 Reproduced from CSS3 for WebDesigners
  18. 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
  19. 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
  20. 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!
  21. 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!
  22. 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!
  23. 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!
  24. 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!
  25. 32.
  26. 41.
  27. 43.
  28. 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
  29. 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
  30. 46.
  31. 47.
  32. 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
  33. 50.
  34. 52.
  35. 53.
  36. 54.
  37. 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
  38. 57.
  39. 62.
  40. 63.
  41. 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
  42. 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); }
  43. 73.

    Css3 and Presentation | DoctypeHtml5 form#payment > fieldset > legend:before

    { content: "Step " counter(fieldsets) ": "; counter-increment: fieldsets; }
  44. 74.
  45. 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
  46. 77.
  47. 78.
  48. 79.
  49. 81.
  50. 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
  51. 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