Técnicas avanzadas con CSS3

Presentación realizada en SeedRocket en marzo de 2011.

Transcript

1. CSS3 técnicas avanzadas Javier Usobiaga Marta Armada SeedRocket 16 marzo 2011
3. @htmlboy @martuishere
4. vENTAJAS
5. velocidad
6. velocidad flexibilidad
7. velocidad escalabilidad flexibilidad
8. velocidad escalabilidad flexibilidad ligereza
9. prOBLEMAS
10. experimental
11. experimental redundancia
12. experimental abuso redundancia
13. experimental abuso soporte redundancia
14. SOLUCIONES dibujo de Phil Henderson @LLcoolPhil
15. progressive enhancement Cumplo mi función :-) de menos a más
16. Y f progressive enhancement Cumplo mi función :-) de menos a más
17. graceful degradation Me diseñaron así de guay de más a menos
18. Tengo una imagen de fondo graceful degradation Me diseñaron así de guay de más a menos
19. hardboiled ¿Le gustaré a @4lexcat? :-) “To hell with being graceful” Andy Clarke Harboiled Web Design
20. hardboiled Paso de la imagen de fondo ¿Le gustaré a @4lexcat? :-) “To hell with being graceful” Andy Clarke Harboiled Web Design
21. regressive enhancement tapando agujeros con Javascript
22. http://modernizr.com
23. http://yepnopejs.com
24. ¿soporte?
25. http://caniuse.com
26. COLOR & TRANSPARENCIAS
27. rgba .box{ background-color: rgba (211, 85, 41, .7); }
29. h1 a{ color: rgba(179,45,71,.75); } #navigation li a{ background: rgba(170,178,192,.75); } #content{ background-color: rgba(14,32,59,.5); } http://24ways.org
30. hsl HUE: grado de la rueda de color. 0º es rojo. SATURATION: porcentaje de saturado (100%) a gris (0%) LUMINOSITY: porcentaje de negro (0%) a blanco (100%).
31. hsla .box{ background-color: hsla (16, 67, 49, .7); }
32. http://hslpicker.com
33. gradients .box{ background-image: linear-gradient(45deg, #291633, #D35529); }
34. gradients .box{ background-image: linear-gradient (#291633 0%, #FFEBA3 50%, #D35529 100%); }
35. gradients .box{ background-image: linear-gradient (top, hsl(16,67,50) 0%, hsl(16,67,55) 50%, hsl(16,90,50) 50%, hsl(16,90,40) 100%); }
36. gradients .box{ background-image: radial-gradient(#291633, #D35529); }
37. http://colorzilla.com/gradient-editor
39. a#appstore{ background-image: linear-gradient (top, #B6B6B6, #9B9B9B); } a#twitter{ background-image: linear-gradient (top, #2B79DE, #4798E7); } http://dribbbitsapp.com
41. body{ background: #030205 radial-gradient (center top, circle closest-corner, #615C59,#030205) no-repeat; } http://earthhour.fr
42. DROP SHADOWS
43. box shadow .box{ box-shadow: 5px 5px 10px 10px rgba(0,0,0,.75); }
44. box shadow .box{ box-shadow: 0 5px 0 hsl(16, 67%, 33%), 0 10px 0 rgba(0, 0, 0, .5); }
46. nav li{ box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .5), inset 0 1.4em 2em -0.7em rgba(255, 255, 255, .3); } http://bit.ly/viajartiempo
48. .boton{ box-shadow: 0 1px 0 #E87754, 0 2px 0 #BD4019, 0 3px 0 #AE3B17, 0 5px 0 #9F3615, 0 7px 0 #903113, 0 8px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } http://bit.ly/viajartiempo
49. text shadow text shadow h1{ text-shadow: 5px 5px 5px rgba(0,0,0,.75); }
51. h1{ text-shadow: 1px 1px 0 rgba(255,255,255,.6); } http://lanyrd.com
53. h1{ text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white, 0 0 40px #FF00DE, 0 0 70px #FF00DE, 0 0 80px #FF00DE, 0 0 100px #FF00DE, 0 0 150px #FF00DE; } http://bit.ly/text-shadows
55. h1 .c{ text-shadow: 0px 0px #FE8, 0px 2px #EB0, 0px 1px #FE8, 0px 3px #EB0, -1px 2px #FE8, -1px 4px #EB0, -1px 3px #FE8, (...) -4px 26px #EB0; } http://beercamp.com/2010
56. bACK GROUNDS
57. multiple backgrounds .box{ background: url(panda.png) no-repeat right bottom, url(madera.jpg); }
59. #services li{ background: url(ux.png) no-repeat left top, url(separador.png) no-repeat center bottom; } http://swwweet.com/services.html
61. #header{ background: url(pattern.png) repeat-x, linear-gradient (top, #17132A, #2A234B); } http://dribbbitsapp.com
63. input#submit{ background: url(download-arrow.png) no-repeat 0px 50%, #95DC2F linear-gradient (top, #8BD225 0%, #BCF26F 50%, #8BD225 50%, transparent 100%); } http://modernizr.com
64. background size .box{ background: url(balloons.png) repeat; background-size: 100px auto; }
66. html{ background-color:#FFECD0; background-image: linear-gradient (-45deg, rgba(255,255,255,.3) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.3) 75%, transparent 75%, transparent); background-size: 100px 100px; } http://leaverou.me
67. MÁXIMA FLEXIBILIDAD
68. media queries @media screen and (max-width:800px){ body{ font-size:12px; } #columna{ width:400px; } }
69. media queries @media screen and (min-width:1200px)
70. media queries @media screen and (max-width:320px)
71. media queries aspect-ratio color orientation device- aspect-ratio device-height device-width resolution height monochrome max-width width max-height
72. http://alistapart.com/articles/responsive-web-design
73. http://bit.ly/hardboiled-media-queries
74. http://stpaulsschool.org.uk
75. http://stpaulsschool.org.uk
76. http://stpaulsschool.org.uk
77. http://sasquatchfestival.com
78. http://sasquatchfestival.com
79. http://sasquatchfestival.com
80. http://mediaqueri.es
81. MÚLTIPLES COLUMNAS
82. columns .box{ column-count: 2; } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper augue et libero vulputate fringilla. Phasellus a e n i m n o n f e l i s c o m m o d o elementum vel non purus. Curabitur ut orci est. Curabitur lobortis lacus ac dolor placerat sed vehicula neque accumsan. Nullam auctor arcu quis lectus auctor interdum. Suspendisse at pulvinar ipsum. In hac habitasse platea dictumst. In volutpat, tortor eu posuere sollicitudin, tortor eros interdum libero, et condimentum leo purus at nisi. Mauris vel sem lacus, quis laoreet lorem. Integer est orci, sollicitudin quis fermentum eget, consequat nec libero. Sed vitae dolor dolor, eget placerat leo. Proin egestas malesuada pharetra. Sed arcu ante, adipiscing sit amet semper vel, aliquet sit amet nunc.
83. columns .box{ column-gap: 100px; } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper augue et libero vulputate fringilla. Phasellus a enim non felis commodo elementum vel non purus. Curabitur ut orci est. Curabitur lobortis lacus ac dolor placerat sed vehicula neque accumsan. Nullam auctor arcu quis lectus auctor interdum. Suspendisse at pulvinar ipsum. In hac habitasse platea dictumst. In volutpat, tortor eu posuere sollicitudin, tortor eros i n t e r d u m l i b e r o , e t condimentum leo purus at nisi. Mauris vel sem lacus, quis laoreet lorem. Integer est o r c i , s o l l i c i t u d i n q u i s fermentum eget, consequat nec libero. Sed vitae dolor dolor, eget placerat leo. Proin egestas malesuada pharetra. Sed arcu ante, adipiscing sit amet semper vel, aliquet sit amet nunc.
84. columns .box{ column-rule: 1px solid black; } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper augue et libero vulputate fringilla. Phasellus a e n i m no n fe l is co m mo d o elementum vel non purus. Curabitur ut orci est. Curabitur lobortis lacus ac dolor placerat sed vehicula neque accumsan. Nullam auctor arcu quis lectus auctor interdum. Suspendisse at pulvinar ipsum. In hac habitasse platea dictumst. In volutpat, tortor eu posuere sollicitudin, tortor eros interdum libero, et condimentum leo purus at nisi. Mauris vel sem lacus, quis laoreet l o r e m . I n t e g e r e s t o r c i , sollicitudin quis fermentum eget, consequat nec libero. Sed vitae dolor dolor, eget placerat leo. P ro i n e g e s t as mal e su ada p h a r e t r a . S e d a r c u a n t e , adipiscing sit amet semper vel, aliquet sit amet nunc.
86. #content{ column-count: 3; column-gap: 1.125em; } http://informationarchitects.jp
87. NUEVOS SELECTORES
88. :first-child ul :first-child{ background: #D35529; }
89. :last-child ul :last-child{ background: #D35529; }
90. :nth-child() ol :nth-child(odd){ background: #D35529; } 1 2 3 4 5 6 7 8 9
91. :nth-child() ol :nth-child(3n){ background: #D35529; } 1 2 3 4 5 6 7 8 9
92. :nth-child() ol :nth-child(3){ background: #D35529; } 1 2 3 4 5 6 7 8 9
93. :nth-child() ol :nth-child(3n+2){ background: #D35529; } 1 2 3 4 5 6 7 8 9
94. :nth-child() ol :nth-child(6n+4){ background: #D35529; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
95. http://css-tricks.com/examples/nth-child-tester
96. :not() ul :not(:first-child){ background: #D35529; }
97. attribute a[title] {color: red;} a[href=‟index.html”] {color: red;} img[alt*=‟web”] {border: 5px solid red;} a[href$=‟.pdf”] {background: url(pdf.png)}
98. http://selectivizr.com
99. http://selectivizr.com
101. #recent-projects li:nth-child(2){ margin: 0 13px; } http://swwweet.com
103. #intro nav li{ background: rgba(5, 129, 121, .8); } #intro nav li:nth-child(2){ background: rgba(224, 80, 35, .8); } #intro nav li:nth-child(3){ background: rgba(238, 165, 27, .8); } #intro nav li:nth-child(4){ background: rgba(94, 79, 58, .8); } #intro nav li:nth-child(5){ background: rgba(173, 165, 53, .8); } http://bit.ly/viajartiempo
104. pseudo-elements p:before{ content:‟Mis gatos:”; color: #D35529; } Mis gatos: Oslo Mis gatos: Quinto <p>Oslo</p> <p>Quinto</p>
105. pseudo-elements p:after{ content:‟es un gato”; color: #D35529; } Oslo es un gato Quinto es un gato <p>Oslo</p> <p>Quinto</p>
106. pseudo-elements li:before{ content: url(pizza.png); } <li>Cuatro estaciones</li> <li>Margarita</li> Cuatro estaciones Margarita
107. pseudo-elements p:before{ content:‟ ”; display: inline-block; width: 10px; height: 10px; background: #D35529; } <p>Un cuadrado</p> Un cuadrado
109. #signin form:before{ content: "{"; font-size: 15em; color: #BE3F9E; position: absolute; top: -15px; left: -100px; } #signin form:after{ content: "}"; font-size: 15em; color: #BE3F9E; position: absolute; top: -15px; right: -100px; } http://freelancebcn.com
111. #intro nav li{ position:relative; } #intro nav li:before{ content: ""; position: absolute; left: 0; bottom: -8px; border: 10px solid black; border-color: transparent rgb(5, 129, 121); border-width: 0 8px 8px 0; } http://bit.ly/viajartiempo
112. http://nicolasgallagher.com
113. TRANS FORMACIONES
114. scale .box{ transform: scale(.5); }
116. .articulo:hover{ transform: scale(1.1); } http://abelsutilo.com
117. rotate .box{ transform: rotate(45deg); }
119. #imagery .photos li:hover { transform: rotate(2deg) scale(1.1); } http://nordicruby.org
120. translate .box{ transform: translate(20px, 40px); }
121. skew .box{ transform: skew(5deg, 30deg); }
122. TRANSICIONES
123. transitions .box{ background: #51E500; transition: 1s background ease-in; } .box:hover{ background: #D35529; }
124. transitions .box{ transition: 1s background ease-in, 1s height ease-in; }
125. delay .box{ transition: 1s background ease-in .5s; }
127. li#shape-b a{ transform:rotate(-10deg); transition:all 0.8s ease-in; opacity:0.5; background:#17659b; } li#shape-b a:hover{ transform:rotate(360deg); } http://newadventuresconf.com
129. .banner h3 a{ background: url(banner.png) 0 0 no-repeat; transition: all 0.3s ease-in-out; } .banner h3 a:hover { margin-right: -10px; text-indent: 10px; background: url(banner.png) 10px 0 no-repeat; } #imagery .photos li { transition : all .2s ease-in-out; } #imagery .photos li:hover { transform: rotate(2deg) scale(1.1); } http://nordicruby.org
130. http://books.alistapart.com rECURSOS
131. http://hardboiledwebdesign.com rECURSOS
132. http://stunningcss3.com rECURSOS
133. ¡GRACIAS!
134. ¿PREGUNTAS?
135. http://www.flickr.com/photos/soonerpa/4220518842 http://www.flickr.com/photos/gregheo/5321202672 http://www.flickr.com/photos/wainwright/351684037 http://www.flickr.com/photos/joeshlabotnik/4749975148 http://www.flickr.com/photos/tetzl/178374065 http://www.flickr.com/photos/cibomahto/2291127824 http://www.flickr.com/photos/st3f4n/4448140377 http://www.flickr.com/photos/blubrblog/4326100513 http://www.flickr.com/photos/lucynieto/2536364522 http://www.flickr.com/photos/tainara/314471333 http://www.flickr.com/photos/adman_as/3507892529 http://www.flickr.com/photos/archer10/2216791949 http://www.flickr.com/photos/rohdesign/4444113922 http://www.flickr.com/photos/lycid/1515574003 http://www.flickr.com/photos/stevedave/3566325269 http://www.flickr.com/photos/aftab/3364835006 http://www.flickr.com/photos/rhinoneal/4353519405 créditos