CSS3: nuevos selectores y pseudo elementos
3 likes11,672 views
The document discusses CSS3 and its advantages over other technologies for creating modern websites. Some key points include: - CSS3 allows separation of content, presentation and interaction layers for better structure and control. - It provides consistency across devices and browsers, better bandwidth management, and easier content updates. - CSS3 introduces new selectors, box model changes, animations/transitions, gradients, shadows and more. - Features are added over time in layers and browser support continues to improve for new CSS3 features.
![X[atr]
Selecciona cualquier elemento X que tenga el atributo
“atr” con cualquier valor,
img[alt] { border: solid}
Monday, January 16, 12](https://image.slidesharecdn.com/css3-120116193723-phpapp02/85/CSS3-nuevos-selectores-y-pseudo-elementos-32-320.jpg)
![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](https://image.slidesharecdn.com/css3-120116193723-phpapp02/85/CSS3-nuevos-selectores-y-pseudo-elementos-33-320.jpg)
![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](https://image.slidesharecdn.com/css3-120116193723-phpapp02/85/CSS3-nuevos-selectores-y-pseudo-elementos-34-320.jpg)
![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](https://image.slidesharecdn.com/css3-120116193723-phpapp02/85/CSS3-nuevos-selectores-y-pseudo-elementos-35-320.jpg)
![X[atr *= val]
Selecciona cualquier elemento X que tenga un
atributo incluya “val”.,
img[alt=”img/”] { border: solid 1px lime}
Monday, January 16, 12](https://image.slidesharecdn.com/css3-120116193723-phpapp02/85/CSS3-nuevos-selectores-y-pseudo-elementos-36-320.jpg)
CSS3: nuevos selectores y pseudo elementos
- 1. CSS3 Monday, January 16, 12
- 2. Un sitio moderno se trabaja en 3 capas Contenido Presentacion Interaccion Monday, January 16, 12
- 3. Un sitio moderno se trabaja en 3 capas HTML(5) CSS(3) Javascript Monday, January 16, 12
- 4. Porque es superior CSS? Monday, January 16, 12
- 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 siglo Monday, January 16, 12
- 6. Arquitectura de CSS Monday, January 16, 12
- 7. Monday, January 16, 12
- 8. Monday, January 16, 12
- 9. CSS3 no es trabaja igual que HTML5!! Monday, January 16, 12
- 10. CSS Layer 1 CSS Layer 2 CSS Layer 3 Monday, January 16, 12
- 11. Monday, January 16, 12
- 12. Monday, January 16, 12
- 13. 1996 CSS Layer 1 CSS Layer 2 CSS Layer 3 Monday, January 16, 12
- 14. 1998 CSS Layer 1 CSS Layer 2 CSS Layer 3 Monday, January 16, 12
- 15. 2000 CSS Layer 1 CSS Layer 2 CSS Layer 3 Monday, January 16, 12
- 16. CSS Layer 1 CSS Layer 2 CSS Layer 3 CSS Layer 4 CSS Layer 5 ..... Monday, January 16, 12
- 17. Soporte en Browsers Monday, January 16, 12
- 18. Monday, January 16, 12
- 19. Monday, January 16, 12
- 20. Monday, January 16, 12
- 21. Modelo de Cajas Monday, January 16, 12
- 22. Monday, January 16, 12
- 24. Selectores elemento { propiedad: valor } Monday, January 16, 12
- 25. Selectores elemento hijo { propiedad: valor } Monday, January 16, 12
- 26. Selectores elemento hijo:pseudo { propiedad: valor } Monday, January 16, 12
- 27. Como las cataratas, CSS solo cae Monday, January 16, 12
- 28. Nuevos Selectores Monday, January 16, 12
- 29. Hijo ( A > B) Selecciona únicamente el primer elemento B que sea descendiente de A A B Monday, January 16, 12
- 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 B Monday, January 16, 12
- 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 B Monday, January 16, 12
- 32. X[atr] Selecciona cualquier elemento X que tenga el atributo “atr” con cualquier valor, img[alt] { border: solid} Monday, January 16, 12
- 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. 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. 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. X[atr *= val] Selecciona cualquier elemento X que tenga un atributo incluya “val”., img[alt=”img/”] { border: solid 1px lime} Monday, January 16, 12
- 38. X: valid X: invalid X: required X: optional Monday, January 16, 12
- 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. 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. 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. 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. F E:first-child El primer elemento E dentro de F. li:first-child { border: solid 1px lime} Monday, January 16, 12
- 44. F E:last-child El ultimo elemento E dentro de F. li:last-child { border: solid 1px lime} Monday, January 16, 12
- 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. Animacion y transiciones Monday, January 16, 12
- 47. Herramientas de animacion •Flash •Javascript •CSS3 Monday, January 16, 12
- 48. Porque animar con CSS? •Menos dependencia de plugins •Menos código •Menos NERD •Mejor Performance en moviles Monday, January 16, 12
- 49. Ahorrar ancho de banda Monday, January 16, 12
- 50. Bordes redondeados .recuadro{ border-radius:10px } Monday, January 16, 12
- 51. Sombras .recuadro{ box-shadow: 1px 1px 1px rgba(0,0,0, 0.5) } Monday, January 16, 12
- 52. Sombras .recuadro{ text-shadow: 1px 1px 1px rgba(0,0,0, 0.5) } Monday, January 16, 12
- 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. Gradientes http://gradients.glrzad.com/ Monday, January 16, 12
- 55. CSS Transforms •Scale •Rotate •Skew •Translate Monday, January 16, 12
- 56. transform: scale() .cuadro{ height:250px; width:250px; background-color:rgb(171, 38, 41); } .cuadro:hover{ transform:scale(2) } Monday, January 16, 12
- 57. transform: scale() .cuadro{ height:250px; width:250px; background-color:rgb(171, 38, 41); } .cuadro:hover{ transform:scale(2) } Monday, January 16, 12
- 58. transform: rotate() .cuadro{ height:250px; width:250px; background-color:rgb(171, 38, 41); } .cuadro:hover{ transform:rotate(45deg) } Monday, January 16, 12
- 59. transform: skew() .cuadro{ height:250px; width:250px; background-color:rgb(171, 38, 41); } .cuadro:hover{ transform:skew(45deg) } Monday, January 16, 12
- 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. 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. Transition .cuadro{ background-color: #000000 transition-property: background-color; transition-duration: 1s; } .cuadro:hover{ background-color: #000000 } Monday, January 16, 12
- 63. Propiedades sujetas de transformacion Monday, January 16, 12
- 64. Demos! Monday, January 16, 12
- 65. http://www.paulrhayes.com/experiments/cube/ multiCubes.html Monday, January 16, 12
- 73. El futuro de CSS Monday, January 16, 12
- 74. CSS Shaders http://www.adobe.com/devnet/html5/articles/css- shaders.html Monday, January 16, 12