Tecnicas avanzadas con CSS3

  • 12,997 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
12,997
On Slideshare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
279
Comments
7
Likes
22

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CSS3 técnicas avanzadasJavier Usobiaga SeedRocketMarta Armada 16 marzo 2011
  • 2. @htmlboy@martuishere
  • 3. vENTAJAS
  • 4. velocidad
  • 5. velocidad flexibilidad
  • 6. velocidad flexibilidadescalabilidad
  • 7. velocidad flexibilidadescalabilidad ligereza
  • 8. prOBLEMAS
  • 9. experimental
  • 10. experimental redundancia
  • 11. experimental redundancia abuso
  • 12. experimental redundancia abuso soporte
  • 13. dibujo de Phil Henderson @LLcoolPhilSOLUCIONES
  • 14. progressive enhancement de menos a más Cumplo mi función :-)
  • 15. progressive enhancement de menos a más Cumplo mi Y función :-) f
  • 16. graceful degradation de más a menosMe diseñaron así de guay
  • 17. graceful degradation de más a menosMe diseñaron Tengo una así de guay imagen de fondo
  • 18. hardboiled“To hell with being graceful” Andy Clarke Harboiled Web Design¿Le gustaré a@4lexcat? :-)
  • 19. hardboiled“To hell with being graceful” Andy Clarke Harboiled Web Design¿Le gustaré a Paso de la@4lexcat? :-) imagen de fondo
  • 20. regressive enhancementtapando agujeros con Javascript
  • 21. http://modernizr.com
  • 22. http://yepnopejs.com
  • 23. ¿soporte?
  • 24. http://caniuse.com
  • 25. COLOR &TRANSPARENCIAS
  • 26. rgba.box{ background-color: rgba (211, 85, 41, .7);}
  • 27. 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
  • 28. hslHUE: 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%).
  • 29. hsla.box{ background-color: hsla (16, 67, 49, .7);}
  • 30. http://hslpicker.com
  • 31. gradients.box{ background-image: linear-gradient(45deg, #291633, #D35529);}
  • 32. gradients.box{ background-image: linear-gradient (#291633 0%, #FFEBA3 50%, #D35529 100%);}
  • 33. 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%);}
  • 34. gradients.box{ background-image: radial-gradient(#291633, #D35529);}
  • 35. http://colorzilla.com/gradient-editor
  • 36. a#appstore{ background-image: linear-gradient (top, #B6B6B6, #9B9B9B);}a#twitter{ background-image: linear-gradient (top, #2B79DE, #4798E7);} http://dribbbitsapp.com
  • 37. body{ background: #030205 radial-gradient (center top, circle closest-corner, #615C59,#030205) no-repeat; }http://earthhour.fr
  • 38. DROPSHADOWS
  • 39. box shadow.box{ box-shadow: 5px 5px 10px 10px rgba(0,0,0,.75);}
  • 40. box shadow.box{ box-shadow: 0 5px 0 hsl(16, 67%, 33%), 0 10px 0 rgba(0, 0, 0, .5);}
  • 41. 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
  • 42. .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
  • 43. text shadowh1{ text-shadow: 5px 5px 5px rgba(0,0,0,.75);} text shadow
  • 44. h1{ text-shadow: 1px 1px 0 rgba(255,255,255,.6); }http://lanyrd.com
  • 45. 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
  • 46. 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
  • 47. bACKGROUNDS
  • 48. multiple backgrounds.box{ background: url(panda.png) no-repeat right bottom, url(madera.jpg);}
  • 49. #services li{ background: url(ux.png) no-repeat left top, url(separador.png) no-repeat center bottom; }http://swwweet.com/services.html
  • 50. #header{ background: url(pattern.png) repeat-x, linear-gradient (top, #17132A, #2A234B); }http://dribbbitsapp.com
  • 51. 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
  • 52. background size.box{ background: url(balloons.png) repeat; background-size: 100px auto;}
  • 53. 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
  • 54. MÁXIMAFLEXIBILIDAD
  • 55. media queries@media screen and (max-width:800px){ body{ font-size:12px; } #columna{ width:400px; }}
  • 56. media queries@media screen and (min-width:1200px)
  • 57. media queries@media screen and (max-width:320px)
  • 58. media queries device-aspect-ratio color orientation aspect-ratiodevice-height device-width resolution heightmonochrome max-width width max-height
  • 59. http://alistapart.com/articles/responsive-web-design
  • 60. http://bit.ly/hardboiled-media-queries
  • 61. http://stpaulsschool.org.uk
  • 62. http://stpaulsschool.org.uk
  • 63. http://stpaulsschool.org.uk
  • 64. http://sasquatchfestival.com
  • 65. http://sasquatchfestival.com
  • 66. http://sasquatchfestival.com
  • 67. http://mediaqueri.es
  • 68. MÚLTIPLESCOLUMNAS
  • 69. columns.box{ column-count: 2;} Lorem ipsum dolor sit amet, posuere sollicitudin, tortor eros co ns e c t e t u r ad ip is c i ng e l i t . interdum libero, et condimentum Aliquam semper augue et libero leo purus at nisi. Mauris vel sem vulputate fringilla. Phasellus a lacus, quis laoreet lorem. Integer enim non felis commodo est orci, sollicitudin quis elementum vel non purus. fermentum eget, consequat nec Curabitur ut orci est. Curabitur libero. Sed vitae dolor dolor, eget lobortis lacus ac dolor placerat sed p l a c e r a t l e o. P r o i n e g e s t a s vehicula neque accumsan. Nullam malesuada pharetra. Sed arcu ante, auctor arcu quis lectus auctor adipiscing sit amet semper vel, interdum. Suspendisse at pulvinar aliquet sit amet nunc. ipsum. In hac habitasse platea dictumst. In volutpat, tortor eu
  • 70. columns.box{ column-gap: 100px;} Lorem ipsum dolor sit amet, volutpat, tortor eu posuere consectetur adipiscing elit. s o l l i c i t u d i n , t o r t o r e ro s Aliquam semper augue et interdum libero, et libero vulputate fringilla. condimentum leo purus at Phasellus a enim non felis nisi. Mauris vel sem lacus, commodo elementum vel non quis laoreet lorem. Integer est purus. Curabitur ut orci est. orci, sollicitudin quis Curabitur lobortis lacus ac fermentum eget, consequat dolor placerat sed vehicula nec libero. Sed vitae dolor neque accumsan. Nullam dolor, eget placerat leo. Proin auctor arcu quis lectus auctor egestas malesuada pharetra. interdum. Suspendisse at Sed arcu ante, adipiscing sit pulvinar ipsum. In hac amet semper vel, aliquet sit habitasse platea dictumst. In amet nunc.
  • 71. columns.box{ column-rule: 1px solid black;} Lorem ipsum dolor sit amet, tortor eros interdum libero, et consectetur adipiscing elit. condimentum leo purus at nisi. Aliquam semper augue et libero Mauris vel sem lacus, quis laoreet vulputate fringilla. Phasellus a lorem. Integer est orci, enim non felis commodo sollicitudin quis fermentum eget, e l e me n t u m ve l no n pu r u s . consequat nec libero. Sed vitae Curabitur ut orci est. Curabitur dolor dolor, eget placerat leo. lobortis lacus ac dolor placerat Proin egestas malesuada sed vehicula neque accumsan. pharetra. Sed arcu ante, Nullam auctor arcu quis lectus adipiscing sit amet semper vel, auctor interdum. Suspendisse at aliquet sit amet nunc. pulvinar ipsum. In hac habitasse platea dictumst. In volutpat, tortor eu posuere sollicitudin,
  • 72. #content{ column-count: 3; column-gap: 1.125em; }http://informationarchitects.jp
  • 73. NUEVOSSELECTORES
  • 74. :first-childul :first-child{ background: #D35529;}
  • 75. :last-childul :last-child{ background: #D35529;}
  • 76. :nth-child()ol :nth-child(odd){ background: #D35529;} 1 2 3 4 5 6 7 8 9
  • 77. :nth-child()ol :nth-child(3n){ background: #D35529;} 1 2 3 4 5 6 7 8 9
  • 78. :nth-child()ol :nth-child(3){ background: #D35529;} 1 2 3 4 5 6 7 8 9
  • 79. :nth-child()ol :nth-child(3n+2){ background: #D35529;} 1 2 3 4 5 6 7 8 9
  • 80. :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
  • 81. http://css-tricks.com/examples/nth-child-tester
  • 82. :not()ul :not(:first-child){ background: #D35529;}
  • 83. attributea[title] {color: red;}a[href=‟index.html”] {color: red;}img[alt*=‟web”] {border: 5px solid red;}a[href$=‟.pdf”] {background: url(pdf.png)}
  • 84. http://selectivizr.com
  • 85. http://selectivizr.com
  • 86. #recent-projects li:nth-child(2){ margin: 0 13px; }http://swwweet.com
  • 87. #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
  • 88. pseudo-elements <p>Oslo</p> <p>Quinto</p>p:before{ content:‟Mis gatos:”; color: #D35529;} Mis gatos: Oslo Mis gatos: Quinto
  • 89. pseudo-elements <p>Oslo</p> <p>Quinto</p>p:after{ content:‟es un gato”; color: #D35529;} Oslo es un gato Quinto es un gato
  • 90. pseudo-elements <li>Cuatro estaciones</li> <li>Margarita</li>li:before{ content: url(pizza.png);} Cuatro estaciones Margarita
  • 91. pseudo-elements <p>Un cuadrado</p>p:before{ content:‟ ”; display: inline-block; width: 10px; height: 10px; background: #D35529;} Un cuadrado
  • 92. #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
  • 93. #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
  • 94. http://nicolasgallagher.com
  • 95. TRANSFORMACIONES
  • 96. scale.box{ transform: scale(.5);}
  • 97. .articulo:hover{ transform: scale(1.1); }http://abelsutilo.com
  • 98. rotate.box{ transform: rotate(45deg);}
  • 99. #imagery .photos li:hover { transform: rotate(2deg) scale(1.1); }http://nordicruby.org
  • 100. translate.box{ transform: translate(20px, 40px);}
  • 101. skew.box{ transform: skew(5deg, 30deg);}
  • 102. TRANSICIONES
  • 103. transitions.box{ background: #51E500; transition: 1s background ease-in;}.box:hover{ background: #D35529;}
  • 104. transitions.box{ transition: 1s background ease-in, 1s height ease-in;}
  • 105. delay.box{ transition: 1s background ease-in .5s;}
  • 106. 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
  • 107. .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
  • 108. rECURSOShttp://books.alistapart.com
  • 109. rECURSOShttp://hardboiledwebdesign.com
  • 110. rECURSOShttp://stunningcss3.com
  • 111. ¡GRACIAS!
  • 112. ¿PREGUNTAS?
  • 113. créditoshttp://www.flickr.com/photos/soonerpa/4220518842 http://www.flickr.com/photos/tainara/314471333http://www.flickr.com/photos/gregheo/5321202672 http://www.flickr.com/photos/adman_as/3507892529http://www.flickr.com/photos/wainwright/351684037 http://www.flickr.com/photos/archer10/2216791949http://www.flickr.com/photos/joeshlabotnik/4749975148 http://www.flickr.com/photos/rohdesign/4444113922http://www.flickr.com/photos/tetzl/178374065 http://www.flickr.com/photos/lycid/1515574003http://www.flickr.com/photos/cibomahto/2291127824 http://www.flickr.com/photos/stevedave/3566325269http://www.flickr.com/photos/st3f4n/4448140377 http://www.flickr.com/photos/aftab/3364835006http://www.flickr.com/photos/blubrblog/4326100513 http://www.flickr.com/photos/rhinoneal/4353519405http://www.flickr.com/photos/lucynieto/2536364522