CSS 3

¿Una web debe verse exactamente igual en todos los

navegadores?

NO.

Fuente: Google

¿NO? ¿PORQUÉ?

• Mayor esfuerzo en la creación y mantenimiento.

• Marcado extra.

• Imágenes.

• Recurrir a JavaScript y/u otras técnicas.

¿NO? ¿PORQUÉ?

• Peor experiencia de usuario:

• Páginas más pesadas.

• Mayor número de peticiones.

• Desarrollo por encima de las posibilidades del navegador.

Una web debe verse BIEN en todos los navegadores

CSS 3

• Intenta “rellenar” los huecos dejados por CSS 2.1

• Colores y sombras.

• Bordes.

• Columnas.

• Selectores.

• ...

GUERRA DE NAVEGADORES

0 13 25 38 50

IE

Firefox

Chrome

Safari

Opera

Fuente: statcounter.com (junio 2011)

SOPORTE CSS 3

0 25 50 75 100

IE 9

Firefox

Chrome

Safari

Opera

Fuente: http://www.findmebyip.com/litmus

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/

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/

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/

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

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/

BACKGROUNDS

background:url(imagen) posX poxY [repeat], url(imagenAlt) posX posY [repeat];

http://jsfiddle.net/Alwaison/uK9Ar/

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/

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/

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/

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/

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/

TRANSFORMACIONES 2D

• Rotación.

• Escalado.

• Trasladar.

• Sesgar.

http://jsfiddle.net/Alwaison/beRc2/

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)

¿DUDAS?

¡GRACIAS!

jfernandezp@cesser.com

@alwaison