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. Css3 and Presentation DoctypeHtml5 | February 5, 2011 | Ahmedabad

  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
  3. CSS 1 1996 CSS 2 1998 CSS 2.1 2007 2010

    Css3 and Presentation | DoctypeHtml5
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. 1 CSS

  13. 1 CSS 23,828 words

  14. 2 CSS

  15. 2 6,737 words CSS

  16. 3

  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
  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
  19. Css3 and Presentation | DoctypeHtml5 26 Modules

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

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

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

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

    Movement Css3 and Presentation | DoctypeHtml5 Reproduced from CSS3 for WebDesigners
  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
  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
  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!
  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!
  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!
  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!
  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!
  32. None
  33. border-radius

  34. Css3 and Presentation | DoctypeHtml5

  35. Css3 and Presentation | DoctypeHtml5

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

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

    border-radius: 100px; } Css3 and Presentation | DoctypeHtml5
  38. Css3 and Presentation | DoctypeHtml5

  39. Css3 and Presentation | DoctypeHtml5

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

    Presentation | DoctypeHtml5
  41. None
  42. multiple backgrounds

  43. None
  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
  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
  46. None
  47. None
  48. transitions

  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
  50. None
  51. Css3 and Presentation | DoctypeHtml5

  52. foo { background-color: red; transition-property: background-color; transition-duration: 1s; } foo:hover

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

    { color: red; } Css3 and Presentation | DoctypeHtml5
  55. Css3 and Presentation | DoctypeHtml5

  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
  57. None
  58. transforms

  59. Css3 and Presentation | DoctypeHtml5

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

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

    scale(1.5); transform: scale(1.5); }
  62. None
  63. None
  64. better forms

  65. Css3 and Presentation | DoctypeHtml5

  66. <label for=name>Name</label> <input id=name name=name type=text placeholder="First and last name"

    required autofocus > Css3 and Presentation | DoctypeHtml5
  67. http://24ways.org/examples/have-a- field-day-with-html5-forms/24ways- form.html

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

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

    input[type="text"] { }
  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
  71. form input[type="submit"]:hover { box-shadow: 0px 0px 12px rgba(10,10,10,0.5); } Css3

    and Presentation | DoctypeHtml5
  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); }
  73. Css3 and Presentation | DoctypeHtml5 form#payment > fieldset > legend:before

    { content: "Step " counter(fieldsets) ": "; counter-increment: fieldsets; }
  74. None
  75. better type

  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
  77. None
  78. None
  79. None
  80. Moar Shiny

  81. None
  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
  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
  84. Css3 and Presentation | DoctypeHtml5

  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