Css3

975 views

Published on

Caract

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

  • Be the first to like this

No Downloads
Views
Total views
975
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css3

  1. 1. CSS 3
  2. 2. ¿Una web debe verseexactamente igual en todos los navegadores?
  3. 3. NO. Fuente: Google
  4. 4. ¿NO? ¿PORQUÉ?• Mayor esfuerzo en la creación y mantenimiento. • Marcado extra. • Imágenes. • Recurrir a JavaScript y/u otras técnicas.
  5. 5. ¿NO? ¿PORQUÉ? • Peor experiencia de usuario: • Páginas más pesadas. • Mayor número de peticiones. • Desarrollo por encima de las posibilidades del navegador.
  6. 6. Una web debe verse BIEN en todos los navegadores
  7. 7. CSS 3• Intenta “rellenar” los huecos dejados por CSS 2.1 • Colores y sombras. • Bordes. • Columnas. • Selectores. • ...
  8. 8. GUERRA DE NAVEGADORES 0 13 25 38 50 IE Firefox Chrome Safari Opera Fuente: statcounter.com (junio 2011)
  9. 9. SOPORTE CSS 3 0 25 50 75 100 IE 9 Firefox Chrome Safari Opera Fuente: http://www.findmebyip.com/litmus
  10. 10. COLORES RGBrgb(red,green,blue) color:rgb(255,255,0);rgba(red,green,blue,alpha) color:rgba(255,255,0,.5); http://jsfiddle.net/Alwaison/h7nkn/
  11. 11. COLORES HSLhls(hue,light(%),saturation (%)) color:hsl(60,100%,50%);hlsa(hue,light (%),saturation (%),alpha) color:hsla(60,100%,50%,.5); http://jsfiddle.net/Alwaison/cX7HQ/
  12. 12. SOMBRAS TEXTOtext-shadow:vert(px),hor(px),dif(px),color text-shadow:2px 2px 3px #000;Múltiples sombras en un mismo elemento text-shadow:1px 1px 1px #000, -1px -1px 1px #fff; http://jsfiddle.net/Alwaison/xarYR/
  13. 13. SOMBRAS CAJASbox-shadow:vert(px),hor(px),dif(px),color box-shadow:5px 5px 3px #554433;Para mayor compatibilidad, utilizar vendor-prefixes moz-box-shadow (FF 3.6 y anteriores) webkit-box-shadow (Safari 5, Chrome 9 y anteriores)
  14. 14. SOMBRAS CAJASSombras interiores box-shadow:5px 5px 3px #000 inset;Múltiples sombras en un mismo elementobox-shadow:0 0 20px #000, 20px 15px 30px #ff0, -20px 15px 30px #0f0, -20px -15px 30px #00f, 20px -15px 30px #f00; http://jsfiddle.net/Alwaison/SuB2J/
  15. 15. BACKGROUNDS background:url(imagen) posX poxY [repeat], url(imagenAlt) posX posY [repeat]; http://jsfiddle.net/Alwaison/uK9Ar/
  16. 16. FUENTES @font-face { font-family: Tipografia; font-style: normal; font-weight: normal; src: local(ruta-a-la-fuente) format(xxx); }Formatos: - eot (Embebed OpenType) - woff - ttf - svg http://jsfiddle.net/Alwaison/eW6k2/
  17. 17. DEGRADADOS LINEAL linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )- point: Posición inicial del degradado (%, px, o top left).- angle: Ángulo del degradado (45deg).- stop: Compuesto por un color, y opcionalmente una posición de parada. http://jsfiddle.net/Alwaison/rnSp2/
  18. 18. DEGRADADOS RADIAL radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* ) - point: Posición inicial del degradado (%, px, o top left).- angle: Ángulo del degradado (45deg).- shape: Forma del degradado (circle ó ellipse).- size: Tamaño del degradado (closest-side, closest-corner, farthest-side, farthest-corner, contain, cover)- stop: Compuesto por un color, y opcionalmente una posición de parada. http://jsfiddle.net/Alwaison/a3Qd4/
  19. 19. COLUMNAS• Column-count: Número de columnas (cantidad o tamaño).• Column-width: Tamaño de las columnas (ancho).• Column-gap: Separación entre las columnas (tamaño).• Column-rule: Separador de las columnas. http://jsfiddle.net/Alwaison/F72bF/
  20. 20. SELECTORES• E[attr^=”var”] • E:first-of-type• E[attr$=”var”] • E:last-of-type• E[attr*=”var”] • E:only-child• E:nth-child(n) • E:empty• E:nth-last-child(n) • E:not(s)• E:nth-of-type(n) • E~F• E:nth-last-of-type(n) • E::before• E:last-child • E::after Todos en: http://www.w3.org/TR/css3-selectors/#selectors http://jsfiddle.net/Alwaison/Zf4mf/
  21. 21. TRANSFORMACIONES 2D• Rotación.• Escalado.• Trasladar.• Sesgar. http://jsfiddle.net/Alwaison/beRc2/
  22. 22. ALGUNOS RECURSOS...• Detección de propiedades CSS 3 soportadas por los navegadores (http://www.modernizr.com/)• Generador de sombras en CSS (http://westciv.com/tools/boxshadows/index.html)• Google Web Fonts (http://www.google.com/webfonts/)• Generador de fuentes (http://www.fontsquirrel.com/fontface/generator)• Generador de degradados lineales (http://www.colorzilla.com/gradient-editor/)• Generador de degradados radiales (http://www.westciv.com/tools/radialgradients/)• Emulación de selectores CSS 3 y pseudo atributos en IE 6 - 8 (http://selectivizr.com/)• Documentación sobre el estado de los módulos de la W3C (http://www.w3.org/TR/#tr_CSS)• Enlaces, posts y varios sobre CSS 3 (http://www.delicious.com/alwaison/css3)
  23. 23. ¿DUDAS?
  24. 24. ¡GRACIAS! jfernandezp@cesser.com @alwaison

×