Tecnicas avanzadas con CSS3

13,912 views

Published on

Published in: Technology
7 Comments
22 Likes
Statistics
Notes
No Downloads
Views
Total views
13,912
On SlideShare
0
From Embeds
0
Number of Embeds
1,875
Actions
Shares
0
Downloads
315
Comments
7
Likes
22
Embeds 0
No embeds

No notes for slide

Tecnicas avanzadas con CSS3

  1. 1. CSS3 técnicas avanzadasJavier Usobiaga SeedRocketMarta Armada 16 marzo 2011
  2. 2. @htmlboy@martuishere
  3. 3. vENTAJAS
  4. 4. velocidad
  5. 5. velocidad flexibilidad
  6. 6. velocidad flexibilidadescalabilidad
  7. 7. velocidad flexibilidadescalabilidad ligereza
  8. 8. prOBLEMAS
  9. 9. experimental
  10. 10. experimental redundancia
  11. 11. experimental redundancia abuso
  12. 12. experimental redundancia abuso soporte
  13. 13. dibujo de Phil Henderson @LLcoolPhilSOLUCIONES
  14. 14. progressive enhancement de menos a más Cumplo mi función :-)
  15. 15. progressive enhancement de menos a más Cumplo mi Y función :-) f
  16. 16. graceful degradation de más a menosMe diseñaron así de guay
  17. 17. graceful degradation de más a menosMe diseñaron Tengo una así de guay imagen de fondo
  18. 18. hardboiled“To hell with being graceful” Andy Clarke Harboiled Web Design¿Le gustaré a@4lexcat? :-)
  19. 19. hardboiled“To hell with being graceful” Andy Clarke Harboiled Web Design¿Le gustaré a Paso de la@4lexcat? :-) imagen de fondo
  20. 20. regressive enhancementtapando agujeros con Javascript
  21. 21. http://modernizr.com
  22. 22. http://yepnopejs.com
  23. 23. ¿soporte?
  24. 24. http://caniuse.com
  25. 25. COLOR &TRANSPARENCIAS
  26. 26. rgba.box{ background-color: rgba (211, 85, 41, .7);}
  27. 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. 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. 29. hsla.box{ background-color: hsla (16, 67, 49, .7);}
  30. 30. http://hslpicker.com
  31. 31. gradients.box{ background-image: linear-gradient(45deg, #291633, #D35529);}
  32. 32. gradients.box{ background-image: linear-gradient (#291633 0%, #FFEBA3 50%, #D35529 100%);}
  33. 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. 34. gradients.box{ background-image: radial-gradient(#291633, #D35529);}
  35. 35. http://colorzilla.com/gradient-editor
  36. 36. a#appstore{ background-image: linear-gradient (top, #B6B6B6, #9B9B9B);}a#twitter{ background-image: linear-gradient (top, #2B79DE, #4798E7);} http://dribbbitsapp.com
  37. 37. body{ background: #030205 radial-gradient (center top, circle closest-corner, #615C59,#030205) no-repeat; }http://earthhour.fr
  38. 38. DROPSHADOWS
  39. 39. box shadow.box{ box-shadow: 5px 5px 10px 10px rgba(0,0,0,.75);}
  40. 40. box shadow.box{ box-shadow: 0 5px 0 hsl(16, 67%, 33%), 0 10px 0 rgba(0, 0, 0, .5);}
  41. 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. 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. 43. text shadowh1{ text-shadow: 5px 5px 5px rgba(0,0,0,.75);} text shadow
  44. 44. h1{ text-shadow: 1px 1px 0 rgba(255,255,255,.6); }http://lanyrd.com
  45. 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. 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. 47. bACKGROUNDS
  48. 48. multiple backgrounds.box{ background: url(panda.png) no-repeat right bottom, url(madera.jpg);}
  49. 49. #services li{ background: url(ux.png) no-repeat left top, url(separador.png) no-repeat center bottom; }http://swwweet.com/services.html
  50. 50. #header{ background: url(pattern.png) repeat-x, linear-gradient (top, #17132A, #2A234B); }http://dribbbitsapp.com
  51. 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. 52. background size.box{ background: url(balloons.png) repeat; background-size: 100px auto;}
  53. 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. 54. MÁXIMAFLEXIBILIDAD
  55. 55. media queries@media screen and (max-width:800px){ body{ font-size:12px; } #columna{ width:400px; }}
  56. 56. media queries@media screen and (min-width:1200px)
  57. 57. media queries@media screen and (max-width:320px)
  58. 58. media queries device-aspect-ratio color orientation aspect-ratiodevice-height device-width resolution heightmonochrome max-width width max-height
  59. 59. http://alistapart.com/articles/responsive-web-design
  60. 60. http://bit.ly/hardboiled-media-queries
  61. 61. http://stpaulsschool.org.uk
  62. 62. http://stpaulsschool.org.uk
  63. 63. http://stpaulsschool.org.uk
  64. 64. http://sasquatchfestival.com
  65. 65. http://sasquatchfestival.com
  66. 66. http://sasquatchfestival.com
  67. 67. http://mediaqueri.es
  68. 68. MÚLTIPLESCOLUMNAS
  69. 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. 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. 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. 72. #content{ column-count: 3; column-gap: 1.125em; }http://informationarchitects.jp
  73. 73. NUEVOSSELECTORES
  74. 74. :first-childul :first-child{ background: #D35529;}
  75. 75. :last-childul :last-child{ background: #D35529;}
  76. 76. :nth-child()ol :nth-child(odd){ background: #D35529;} 1 2 3 4 5 6 7 8 9
  77. 77. :nth-child()ol :nth-child(3n){ background: #D35529;} 1 2 3 4 5 6 7 8 9
  78. 78. :nth-child()ol :nth-child(3){ background: #D35529;} 1 2 3 4 5 6 7 8 9
  79. 79. :nth-child()ol :nth-child(3n+2){ background: #D35529;} 1 2 3 4 5 6 7 8 9
  80. 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. 81. http://css-tricks.com/examples/nth-child-tester
  82. 82. :not()ul :not(:first-child){ background: #D35529;}
  83. 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. 84. http://selectivizr.com
  85. 85. http://selectivizr.com
  86. 86. #recent-projects li:nth-child(2){ margin: 0 13px; }http://swwweet.com
  87. 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. 88. pseudo-elements <p>Oslo</p> <p>Quinto</p>p:before{ content:‟Mis gatos:”; color: #D35529;} Mis gatos: Oslo Mis gatos: Quinto
  89. 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. 90. pseudo-elements <li>Cuatro estaciones</li> <li>Margarita</li>li:before{ content: url(pizza.png);} Cuatro estaciones Margarita
  91. 91. pseudo-elements <p>Un cuadrado</p>p:before{ content:‟ ”; display: inline-block; width: 10px; height: 10px; background: #D35529;} Un cuadrado
  92. 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. 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. 94. http://nicolasgallagher.com
  95. 95. TRANSFORMACIONES
  96. 96. scale.box{ transform: scale(.5);}
  97. 97. .articulo:hover{ transform: scale(1.1); }http://abelsutilo.com
  98. 98. rotate.box{ transform: rotate(45deg);}
  99. 99. #imagery .photos li:hover { transform: rotate(2deg) scale(1.1); }http://nordicruby.org
  100. 100. translate.box{ transform: translate(20px, 40px);}
  101. 101. skew.box{ transform: skew(5deg, 30deg);}
  102. 102. TRANSICIONES
  103. 103. transitions.box{ background: #51E500; transition: 1s background ease-in;}.box:hover{ background: #D35529;}
  104. 104. transitions.box{ transition: 1s background ease-in, 1s height ease-in;}
  105. 105. delay.box{ transition: 1s background ease-in .5s;}
  106. 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. 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. 108. rECURSOShttp://books.alistapart.com
  109. 109. rECURSOShttp://hardboiledwebdesign.com
  110. 110. rECURSOShttp://stunningcss3.com
  111. 111. ¡GRACIAS!
  112. 112. ¿PREGUNTAS?
  113. 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

×