CSS3: nuevos selectores y pseudo elementos

4,455 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,455
On SlideShare
0
From Embeds
0
Number of Embeds
1,235
Actions
Shares
0
Downloads
87
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

CSS3: nuevos selectores y pseudo elementos

  1. 1. CSS3Monday, January 16, 12
  2. 2. Un sitio moderno se trabaja en 3 capas Contenido Presentacion InteraccionMonday, January 16, 12
  3. 3. Un sitio moderno se trabaja en 3 capas HTML(5) CSS(3) JavascriptMonday, January 16, 12
  4. 4. Porque es superior CSS?Monday, January 16, 12
  5. 5. Porque es superior CSS? •Separacion por capas •Cosistencia Global •Ancho de Banda •Control de cambios •SEO •Accebilidad •Asi se trabaja la web en este sigloMonday, January 16, 12
  6. 6. Arquitectura de CSSMonday, January 16, 12
  7. 7. Monday, January 16, 12
  8. 8. Monday, January 16, 12
  9. 9. CSS3 no es trabaja igual que HTML5!!Monday, January 16, 12
  10. 10. CSS Layer 1 CSS Layer 2 CSS Layer 3Monday, January 16, 12
  11. 11. Monday, January 16, 12
  12. 12. Monday, January 16, 12
  13. 13. 1996 CSS Layer 1 CSS Layer 2 CSS Layer 3Monday, January 16, 12
  14. 14. 1998 CSS Layer 1 CSS Layer 2 CSS Layer 3Monday, January 16, 12
  15. 15. 2000 CSS Layer 1 CSS Layer 2 CSS Layer 3Monday, January 16, 12
  16. 16. CSS Layer 1 CSS Layer 2 CSS Layer 3 CSS Layer 4 CSS Layer 5 .....Monday, January 16, 12
  17. 17. Soporte en BrowsersMonday, January 16, 12
  18. 18. Monday, January 16, 12
  19. 19. Monday, January 16, 12
  20. 20. Monday, January 16, 12
  21. 21. Modelo de CajasMonday, January 16, 12
  22. 22. Monday, January 16, 12
  23. 23. SelectoresMonday, January 16, 12
  24. 24. Selectores elemento { propiedad: valor }Monday, January 16, 12
  25. 25. Selectores elemento hijo { propiedad: valor }Monday, January 16, 12
  26. 26. Selectores elemento hijo:pseudo { propiedad: valor }Monday, January 16, 12
  27. 27. Como las cataratas, CSS solo caeMonday, January 16, 12
  28. 28. Nuevos SelectoresMonday, January 16, 12
  29. 29. Hijo ( A > B) Selecciona únicamente el primer elemento B que sea descendiente de A A BMonday, January 16, 12
  30. 30. Hermano Adyacente (A + B) Selecciona cualquier elemento B que tenga el mismo parent que E. por ejemplo en una lista li+li seleccionara todos los elementos de la lista menos el primer <li>. A BMonday, January 16, 12
  31. 31. Hermano General (A ~ B) Selecciona cualquier elemento B que comparta el mismo parent que cualquier A y que venga posterior en la estructura HTML. Por ejemplo H1~H2 seleccionara cualquier <h2> que este después de un <h1> siempre y cuando ambos compartan el mismo nodo padre, o sea siempre que <h2> no este anidado en otro elemento. A BMonday, January 16, 12
  32. 32. X[atr] Selecciona cualquier elemento X que tenga el atributo “atr” con cualquier valor, img[alt] { border: solid}Monday, January 16, 12
  33. 33. X[atr = val] Selecciona cualquier elemento X que tenga el atributo “atr” con el valor exacto a “val”., img[alt=”curso”] { border: solid}Monday, January 16, 12
  34. 34. X[atr ^= val] Selecciona cualquier elemento X que tenga un atributo que comience con “val”., img[alt^=”.jpg”] { border: solid 1px lime}Monday, January 16, 12
  35. 35. X[atr $= val] Selecciona cualquier elemento X que tenga un atributo que termine con “val”., img[alt$=”.jpg”] { border: solid 1px lime}Monday, January 16, 12
  36. 36. X[atr *= val] Selecciona cualquier elemento X que tenga un atributo incluya “val”., img[alt=”img/”] { border: solid 1px lime}Monday, January 16, 12
  37. 37. PseudolementosMonday, January 16, 12
  38. 38. X: valid X: invalid X: required X: optionalMonday, January 16, 12
  39. 39. E F:nth-child(n) El elemento F que es el descendiente numero #n del elemento parent E. li:nth-child(2) { border: solid 1px lime}Monday, January 16, 12
  40. 40. E F:nth-last-child(n) El elemento F que es el descendiente numero #n del elemento parent E, pero contando de atras a adelante. li:nth-last-child(2) { border: solid 1px lime}Monday, January 16, 12
  41. 41. E:nth-of-type(n) El elemento E que es el numero n de su tipo. div:nth-of-type(2) { border: solid 1px lime}Monday, January 16, 12
  42. 42. E:nth-last-of-type(n) El elemento E que es el numero n de su tipo.Contando desde atras. div:nth-last-of-type(2) { border: solid 1px lime}Monday, January 16, 12
  43. 43. F E:first-child El primer elemento E dentro de F. li:first-child { border: solid 1px lime}Monday, January 16, 12
  44. 44. F E:last-child El ultimo elemento E dentro de F. li:last-child { border: solid 1px lime}Monday, January 16, 12
  45. 45. E:not( selector ) Cualquier elemento E que no coincida con el selector. div:not ( .destacado ) { border: solid 1px silver}Monday, January 16, 12
  46. 46. Animacion y transicionesMonday, January 16, 12
  47. 47. Herramientas de animacion •Flash •Javascript •CSS3Monday, January 16, 12
  48. 48. Porque animar con CSS? •Menos dependencia de plugins •Menos código •Menos NERD •Mejor Performance en movilesMonday, January 16, 12
  49. 49. Ahorrar ancho de bandaMonday, January 16, 12
  50. 50. Bordes redondeados .recuadro{ border-radius:10px }Monday, January 16, 12
  51. 51. Sombras .recuadro{ box-shadow: 1px 1px 1px rgba(0,0,0, 0.5) }Monday, January 16, 12
  52. 52. Sombras .recuadro{ text-shadow: 1px 1px 1px rgba(0,0,0, 0.5) }Monday, January 16, 12
  53. 53. Gradientes .recuadro{ background-image: linear-gradient(bottom, rgb(169,113,40) 15%, rgb(203,147,68) 58%, rgb(244,177,96) 79%); }Monday, January 16, 12
  54. 54. Gradientes http://gradients.glrzad.com/Monday, January 16, 12
  55. 55. CSS Transforms •Scale •Rotate •Skew •TranslateMonday, January 16, 12
  56. 56. transform: scale() .cuadro{ height:250px; width:250px; background-color:rgb(171, 38, 41); } .cuadro:hover{ transform:scale(2) }Monday, January 16, 12
  57. 57. transform: scale() .cuadro{ height:250px; width:250px; background-color:rgb(171, 38, 41); } .cuadro:hover{ transform:scale(2) }Monday, January 16, 12
  58. 58. transform: rotate() .cuadro{ height:250px; width:250px; background-color:rgb(171, 38, 41); } .cuadro:hover{ transform:rotate(45deg) }Monday, January 16, 12
  59. 59. transform: skew() .cuadro{ height:250px; width:250px; background-color:rgb(171, 38, 41); } .cuadro:hover{ transform:skew(45deg) }Monday, January 16, 12
  60. 60. transformaciones multiples .cuadro{ height:250px; width:250px; background-color:rgb(171, 38, 41); } .cuadro:hover{ transform:scale(2) rotate(45deg); }Monday, January 16, 12
  61. 61. Modificar el origen .cuadro{ transform: rotate(45deg); transform-origin: rigth top } .cuadro:hover{ transform: rotate(45deg); transform-origin: 100% 100% }Monday, January 16, 12
  62. 62. Transition .cuadro{ background-color: #000000 transition-property: background-color; transition-duration: 1s; } .cuadro:hover{ background-color: #000000 }Monday, January 16, 12
  63. 63. Propiedades sujetas de transformacionMonday, January 16, 12
  64. 64. Demos!Monday, January 16, 12
  65. 65. http://www.paulrhayes.com/experiments/cube/ multiCubes.htmlMonday, January 16, 12
  66. 66. http://ecsspert.com/adobe.phpMonday, January 16, 12
  67. 67. http://www.zurb.com/playground/css3-polaroidsMonday, January 16, 12
  68. 68. http://development.tobypitman.com/css/menu.htmlMonday, January 16, 12
  69. 69. http://www.cssplay.co.uk/menu/css3-animation.htmlMonday, January 16, 12
  70. 70. http://www.zurb.com/playground/osx-dockMonday, January 16, 12
  71. 71. http://anthonycalzadilla.com/css3-ATAT/index.htmlMonday, January 16, 12
  72. 72. http://silverbackapp.com/index.php?n=2Monday, January 16, 12
  73. 73. El futuro de CSSMonday, January 16, 12
  74. 74. CSS Shaders http://www.adobe.com/devnet/html5/articles/css- shaders.htmlMonday, January 16, 12

×