Css3
-
Upload
joan-fernandez -
Category
Technology
-
view
738 -
download
1
description
Transcript of Css3
![Page 1: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/1.jpg)
CSS 3
![Page 2: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/2.jpg)
¿Una web debe verse exactamente igual en todos los
navegadores?
![Page 3: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/3.jpg)
NO.
Fuente: Google
![Page 4: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/4.jpg)
¿NO? ¿PORQUÉ?
• Mayor esfuerzo en la creación y mantenimiento.
• Marcado extra.
• Imágenes.
• Recurrir a JavaScript y/u otras técnicas.
![Page 5: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/5.jpg)
¿NO? ¿PORQUÉ?
• Peor experiencia de usuario:
• Páginas más pesadas.
• Mayor número de peticiones.
• Desarrollo por encima de las posibilidades del navegador.
![Page 6: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/6.jpg)
Una web debe verse BIEN en todos los navegadores
![Page 7: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/7.jpg)
CSS 3
• Intenta “rellenar” los huecos dejados por CSS 2.1
• Colores y sombras.
• Bordes.
• Columnas.
• Selectores.
• ...
![Page 8: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/8.jpg)
GUERRA DE NAVEGADORES
0 13 25 38 50
IE
Firefox
Chrome
Safari
Opera
Fuente: statcounter.com (junio 2011)
![Page 9: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/9.jpg)
SOPORTE CSS 3
0 25 50 75 100
IE 9
Firefox
Chrome
Safari
Opera
Fuente: http://www.findmebyip.com/litmus
![Page 10: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/10.jpg)
COLORES \ RGB
color:rgb(255,255,0);
color :rgba(255,255,0,.5);
rgb(red,green,blue)
rgba(red,green,blue,alpha)
http://jsfiddle.net/Alwaison/h7nkn/
![Page 11: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/11.jpg)
COLORES \ HSL
color:hsl(60,100%,50%);
color :hsla(60,100%,50%,.5);
hls(hue,light(%),saturation (%))
hlsa(hue,light (%),saturation (%),alpha)
http://jsfiddle.net/Alwaison/cX7HQ/
![Page 12: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/12.jpg)
SOMBRAS \ TEXTO
text-shadow:2px 2px 3px #000;
text-shadow:1px 1px 1px #000, -1px -1px 1px #fff;
text-shadow:vert(px),hor(px),dif(px),color
Múltiples sombras en un mismo elemento
http://jsfiddle.net/Alwaison/xarYR/
![Page 13: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/13.jpg)
SOMBRAS \ CAJAS
box-shadow:5px 5px 3px #554433;
moz-box-shadow (FF 3.6 y anteriores)webkit-box-shadow (Safari 5, Chrome 9 y anteriores)
box-shadow:vert(px),hor(px),dif(px),color
Para mayor compatibilidad, utilizar vendor-prefixes
![Page 14: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/14.jpg)
SOMBRAS \ CAJAS
box-shadow:0 0 20px #000, 20px 15px 30px #ff0, -20px 15px 30px #0f0, -20px -15px 30px #00f, 20px -15px 30px #f00;
Múltiples sombras en un mismo elemento
box-shadow:5px 5px 3px #000 inset;
Sombras interiores
http://jsfiddle.net/Alwaison/SuB2J/
![Page 15: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/15.jpg)
BACKGROUNDS
background:url(imagen) posX poxY [repeat], url(imagenAlt) posX posY [repeat];
http://jsfiddle.net/Alwaison/uK9Ar/
![Page 16: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/16.jpg)
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/
![Page 17: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/17.jpg)
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/
![Page 18: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/18.jpg)
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/
![Page 19: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/19.jpg)
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/
![Page 20: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/20.jpg)
SELECTORES
• E[attr^=”var”]
• E[attr$=”var”]
• E[attr*=”var”]
• E:nth-child(n)
• E:nth-last-child(n)
• E:nth-of-type(n)
• E:nth-last-of-type(n)
• E:last-child
• E:first-of-type
• E:last-of-type
• E:only-child
• E:empty
• E:not(s)
• E ~ F
• E::before
• E::after
Todos en: http://www.w3.org/TR/css3-selectors/#selectors
http://jsfiddle.net/Alwaison/Zf4mf/
![Page 21: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/21.jpg)
TRANSFORMACIONES 2D
• Rotación.
• Escalado.
• Trasladar.
• Sesgar.
http://jsfiddle.net/Alwaison/beRc2/
![Page 22: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/22.jpg)
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)
![Page 23: Css3](https://reader035.fdocumento.com/reader035/viewer/2022062511/54b7b0254a7959c4688b4586/html5/thumbnails/23.jpg)
¿DUDAS?