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
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
12. 1 CSS
13. 1 CSS 23,828 words
14. 2 CSS
15. 2 6,737 words CSS
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.
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!
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
42. multiple backgrounds
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
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
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
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
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); }
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; }
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
80. Moar Shiny
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