1 DAW - IES Julio Verne

1 DAW - IES Julio Verne

IES Julio Verne

Fundamentos bsicos del CSS3
Jose Manuel Guisado Hormigo

1 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne

1. Qu hay de nuevo en CSS3? ................................. 3 2. Atributo gradiente de colores en borde en firefox ....... 4 3. Bordes redondeados ........................................... 6 4. Mltiples imgenes de fondo................................. 7 5. Colores RGBA ................................................... 8 6. Ruptura de palabras (Word-wrap)........................... 9 7. Textos multicolumna ......................................... 10 8. Sombras (box-shadow) ....................................... 11 9. Resplandor interior ........................................... 13 10. Propiedad background origin ............................... 14 11. Atributos overflow-x y overflow-y ......................... 15 12. Introduccin a @font-face................................... 16 13. Sombras en texto (text-shadow) ........................... 17 14. Animaciones ................................................... 18 14.1. Introduccin a las animaciones ......................... 18 14.2. Conceptos bsicos para las animaciones .............. 18 14.3. Desplazamiento de un elemento ....................... 19 14.4. Transformacin de un elemento ....................... 20 15. Selectores...................................................... 22 16. Documentacin ............................................... 24

2 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne

1. Qu hay de nuevo en CSS3?

Introduccin CSS3 es la tercera versin y la ms actual de las hojas de estilo. Es una modificacin de la versin anterior CSS2.1, as que sera conveniente que la persona que quiera seguir este manual conozca previamente la versin 2 de CSS. Ms control sobre la forma El principal objetivo de CSS es separa el contenido del formato y ya se consigui en la versiones anteriores a CSS3, pero en el mundo de la web avanza, las nuevas tendencias con ella y la necesidad de recursos lleva a los diseadores a ingenirselas de otras formas. CSS3 ha intentado dar solucin a muchos de esos detalles que algunas veces se volvan tan complejos como poner los bordes redondeados a una caja y una simple sombra. Nuevas propiedades En la siguiente tabla se muestra un resumen de las nuevas propiedades que existen en CSS3 y que ms adelante veremos en profundidad. Bordes Border-color Border-image Border-radius Box-shadow Fondos Background-origin Background-clip Background-size Mltiples imgenes Color Color HSL Color HSLA Color RGBA Opacidad Texto Text-shadow Text-overflow Ruptura de palabras

Interfaz Box-sizing Resize Outline Nav-top Nav-right Nav-left Nav-bottom

Selectores Cambio de sintaxis. Not() ::selection

Cajas Overflow-x Overflow-y

Otros Media queries Mltiples columnas Web Fonts

3 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne

2. Atributo gradiente de colores en borde en firefox

El atributo de gradiente de colores es un atributo que por desgracia tan solo se puede ver en el navegador firefox, pero lo incluyo porque me parece un atributo muy interesante y con unos resultados muy buenos. Esta propiedad no aparece en el nuevo estndar de la W3C, por lo tanto no se puede considerar una propiedad de CSS3, sino un atributo de CSS3 creado por mozilla. En la web de Mozilla podemos encontrar ms informacin a cerca de este atributo. Los atributos de gradiente de colores en borde son:

-moz-border-top-colors -moz-border-right-colors -moz-border-bottom-colors -moz-border-left-colors

En cada uno de los atributos se define un color, pudiendo especificar una lista de colores separado por espacios que se aplicar a cada una de las partes del borde de dentro a fuera. Para definir ms de un color, el borde tiene que tener un grosor en pxeles como mnimo equivalente al nmero de colores, es decir, si quieres dos colores tendremos un borde de dos pxeles, si queremos 3, de tres pxeles y as sucesivamente. Lo mejor ser ver un ejemplo para saber cmo funciona y cul es el resultado. Ejemplo
#caja1{ width: 300px; height: 200px; border-style: solid; border-width: 10px; -moz-border-top-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300; -moz-border-right-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300; -moz-border-bottom-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411 #ff3300; -moz-border-left-colors: #ffcc99 #ffbb88 #ffaa77 #ff9966 #ff8855 #ff7744 #ff6633 #ff5522 #ff4411#ff3300; }

4 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne Resultado

Tendremos que tener en cuenta que el ejemplo solo se ver correctamente en Firefox y tendremos que incluir moz- delante de los atributos para especificar el navegador.

5 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne

3. Bordes redondeados
En CSS3 tenemos la propiedad border-radius, que nos permite definir bordes redondeados en las esquinas especificando las medidas del radio que se deben dar a la curva de las esquinas. Su uso ms bsico sera:

border-radius: 5px;
Con lo que le daramos 5 pxeles de radio a la curva de todas las esquinas del elemento en cuestin. Con este atributo nos ahorramos los enrevesados recursos que tenamos que usar en CSS2 para poner bordes redondeados a las cajas usando imgenes y que en la mayora de los casos no daba un resultado del todo elegante. El atributo border-radius tiene la posibilidad tambin de definir las cuatro esquinas de la caja con valores distintos para el radio. Los valores irn separados por un espacio y el primer valor ser el de la esquina superior izquierda de la caja, rotando en sentido horario.

border-radius: 5px 7px 50px 15px;

Ejemplo
#caja1{ width: 300px; height: 200px; border-style: solid; border-width: 10px; border-radius: 5px 70px 20px 60px; background: #A775A3; }

Resultado

6 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne

4. Mltiples imgenes de fondo

En las anteriores versiones de CSS conseguamos poner varias imgenes de fondo anidando varias cajas y poniendo una imagen distinta de fondo a cada una de ellas. Con CSS3 han solventado ese problema modificando la etiqueta background y dndole la posibilidad de aadir varias imgenes y posicionarlas en distintos lugares de la caja Las distintas imgenes de fondo se tienen que escribir separadas por comas. Las imgenes van colocadas de modo que la primera aparece sobre las siguientes. A las imgenes colocadas en de fondo se le pueden aadir los atributos ya conocidos de las versiones anteriores de CSS tales como posicin (center, bottom, top, left y right), como los de repeticin.

Ejemplo
#caja1{ width: 500px; height: 500px; border-style: solid; border-width: 10px; background: url(css3.png) center no-repeat, url(html5.png) bottom right no-repeat, url(jquery.png) top left no-repeat; }

Resultado

7 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne

5. Colores RGBA
Como conocemos, tanto en HTML como en las versiones anteriores de CSS los colores se expresan en valores RGB. CSS3, adems de los tres colores primarios Rojo, Verde y Azul, ha aadido cuarto parmetro que es el Canal lfa para darle transparencia al elemento coloreado. El canal Alfa es un valor entre 0 y 1, siendo 0 totalmente transparente y 1 totalmente opaco. Los nmeros decimales se separarn con un punto. Con esto conseguimos lo que antes tenamos que hacer recurriendo a imgenes PNG con transparencia. Para definir RGBA debemos especificar cuatro valores de la siguiente manera:

rgba(250, 125, 0, 0.5);

Los tres primero nmero son los valores en sistema decimal de los colores Rojo, Verde y Azul. El cuarto valor le asigna una opacidad al elemento del 50%. Ejemplo
#caja2{ width: 200px; height: 250px; position: relative; top: 100px; left: 100px; border-style: solid; border-width: 10px; border-color: RGBA(255, 200, 0, 0.8); background-color: RGBA(0, 250, 52, 0.5); }

Resultado

Se le puede aplicar color RGBA a todo lo que se pueda colorear con CSS3, as que puede ser un muy buen recurso para sombras, texto, etc.

8 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne

6. Ruptura de palabras (Word-Wrap)

Hasta ahora, si nos encontrbamos con el caso de que una palabra era demasiado grande y sobresala de la caja o la caja modificaba su tamao para adaptarse a dicha palabra, lo tenamos que solucionar a mano y de forma muy cutre aadiendo nosotros mismo un guin y un salto de lnea. El atributo word-wrap nos permite hacer esto de forma automtica Este atributo tiene dos posibles valores: normal o break-word

word-wrap: normal;
El valor normal hace que las palabras no se corten siendo este el valor por defecto

word-wrap: break-word;
El valor break-word hace que la palabra se corte para que quepa en el ancho del contenedor que hayamos definido Ejemplo
#caja1{ width: 100px; height: 200px; border-style: solid; border-width: 1px; background: #CCC; word-wrap: break-word; }

Resultado

9 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne

7. Texto multicolumna
En algunos medios encontramos el texto dividido en columnas para facilitar su lectura, muy especialmente en peridicos. La nueva versin de CSS tambin incorpora esta opcin. Para crear esta estructura multicolumna utilizaremos varios atributos. Column-width: Para definir el ancho de las distintas columnas. Column-gap: Nos permitir definir el espacio en blanco entre columnas. Column-rule: Servir para crear una lnea divisoria entre columnas. Column-count: Ser el nmero de columnas que queremos.

Estas etiquetas, a da de hoy (mayo de 2012), no la soporta tal cual ningn navegador, aunque aparecen en la especificacin de la W3C. Sin embargo Safari, Google Chrome y Firefox ya la implementa con la condicin de que usemos el prefijo webkit- para Chome y Safari o el prefijo moz- para Firefox. As que si queremos poner un texto en columnas, de momento lo tendremos que hacer como veremos en el ejemplo y teniendo en cuenta en los usuarios de Internet Explorer no podrn verlo igual. Ejemplo
#caja1 .texto{ -webkit-column-count: 4; -webkit-column-width: 10em; -webkit-column-gap: 20px; -webkit-column-rule: 1px solid #888; -moz-column-count: 4; -moz-column-width: 10em; -moz-column-gap: 20px; -moz-column-rule: 1px solid #888; text-align: justify; }

Resultado

Para ms informacin: http://www.w3.org/TR/css3-multicol/ 10 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne

8. Sombras (box-shadow)
Hasta ahora, para conseguir poner una sombra a un elemento web tenamos que recurrir a elementos externos tales como imgenes, javascript, etc. Con el atributo box-shadow, adems de facilitarnos la tara de poner sombra a los elementos, agiliza la carga de nuestras webs, ya que no tenemos que recurrir a imgenes que tardan ms en cargar. El atributo box-shadow necesita que le especifiquemos algunos valores separados por espacios tales como el difuminado, separacin de la sombra o color (pudiendo usar un color RGBA).

box-shadow: 5px -9px 3px #555;

Por orden de aparicin, los valores especificados son: Desplazamiento horizontal: En el ejemplo anterior, la sombra se colocar 5px a la derecha del elemento, simulando que la luz le viene desde la izquierda. Si queremos colocar la sombra a la izquierda usaremos valores negativos. Cuanto ms alejada est la sombra del elemento, ms lejos parecer que est el elemento del lienzo de la pgina. Desplazamiento vertical: Este valor es similar al desplazamiento horizontal. Los valores positivos indicarn que la sombra se sita por debajo del elemento y los negativos, por encima. En el caso anterior, la sombra estar 9px por encima del elemento. Difuminado: El tercer valor indica cuanto queremos que est de difuminado el borde de la sombra. Si el valor fuera 0, la sombra aparecera totalmente definida. En el ejemplo anterior, la sombra tendr 3px de difuminado. Color de la sombra: El ltimo atributo que se indica es el color. Generalmente en el mundo real, las sombras tiene un color grisceo o negro, pero en CSS3 podremos definirlas del color que queramos, incluso usando colores RGBA En el siguiente ejemplo hemos usado un color RGBA, que a mi parecer, da un mejor efecto a las sombras Ejemplo
#caja1 { width: 200px; height: 200px; border: solid 3px #000; box-shadow: 5px -9px 3px RGBA(85, 85, 85, 0.8); }

11 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne Resultado

Una utilidad muy buena de las sombras es el crear el efecto de movilidad. Es decir, que las cosas salgan de la pantalla en determinados caso, por ejemplo, al pasar el ratn por encima. Este efecto lo podemos conseguir con el evento :hover. Para ello pondremos la sombra a ms distancia del elemento, tanto en horizontal como en vertical y le aadiremos el difuminado. A continuacin podemos ver un ejemplo prctico. Ejemplo
#caja1 { width: 200px; height: 200px; border: solid 3px #000; background-color: #DDD; box-shadow: 3px 3px 3px RGBA(85, 85, 85, 0.8); } #caja1:hover{ box-shadow: 10px 10px 10px RGBA(85, 85, 85, 0.8); }

Resultado

Normal

:Hover

12 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne

9. Resplandor interior
Existe una propiedad de las sombras que no la he nombrado antes pero no porque se me haya escapado, sino porque a mi parecer no es una sombra sino algo as como un resplandor interior (o al menos as se llama el efecto en photoshop que hace esto mismo). Esto consiste en un difuminado en el interior de la caja pegado al borde, similar a la sombra, pero por dentro. El cdigo que utilizaremos es similar al de la sombra, con su posicin horizontal, su posicin vertical, su difuminado y su color, pero adems le aadiremos el valor inset justo antes de todos los valores especificados en la sombra. Para dar efecto de resplandor, le tendremos que dar colores claros y a ser posible un fondo oscuro. Veamos un ejemplo para que resulte ms claro. Ejemplo
#caja1 { width: 200px; height: 200px; border: solid 3px #000; background-color: #333; box-shadow: inset 10px 10px 15px RGBA(200, 200, 200, 0.8); }

Resultado

13 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne

10. Propiedad background-origin

En las versiones anteriores de CSS tenamos varias propiedades para el atributo background tales como background-repeta, background-position, etc En CSS3, adems han aadido la opcin de definir el origen de las coordenadas sobre el que se va a colocar la imagen de fondo para que sea el borde del elemento, su padding o su contenido. Los posibles valores son: Border-box; Significa que el origen de las coordenadas de las imgenes ser el borde del elemento. Padding-box; Es el utilizado por defecto en CSS3. Significa que queremos colocar el origen de coordenadas en el contenido del elemento incluyendo su padding, de forma que el origen de las coordenadas empieza donde termina el borde(si lo hubiera). Content-box; Sirve para que el origen de las coordenadas sea el lugar donde empieza el contenido del elemento, es decir, sin incluir sus posibles bordes y padding. Resultado

14 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne

11. Atributos overflow-x y overflow-y

Estos conceptos, a pesar de ser nuevos en CSS3, no son familiares en las versiones anteriores del lenguaje de estilos. Su utilidad es la de facilitar la lectura de documentos, los cuales son mayores que la caja que los contiene. La propiedad overflow, desde CSS2 nos permite aadir barras de desplazamiento en el lado derecho y en la parte de debajo de la caja cuando el documento tiene una extensin superior a la misma y as evitar el problema de la redimensin que se generara. Overflow-x y overflow-y tiene la misma funcin, con la diferencia que permiten especificar los comportamiento del navegador cuando el contenido de la caja rebosa de forma horizontal o vertical. Las propiedades que puede aceptar estos atributos son las mismas que las del atributo overflow, es decir, Visible, Hidden, Scroll, Auto, No-display (aunque este comportamiento no est implementado a da de hoy en los navegadores) y Nocontent. Tambin habra que comentar que el comportamiento predeterminado del atributo overflow-x y overflow-y es visible, sin embargo, si especificamos alguno de ellos, el otro ya no tendra visible como valor predeterminado, sino auto. Resultado

Overflow-x

Overflow-y

15 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne

12. Introduccin al @font-face

Hasta ahora, para escoger una fuente para nuestra pgina web, tenamos que tener en cuenta la posibilidad de que el usuario que la fuese a ver no la tuviese instalada en su ordenador. De forma que el abanico de fuentes que podas utilizar era reducido. La W3C ha querido subsanar ese problema con regla @font-face, que nos permite definir en nuestra hoja de estilo cualquier fuente independientemente de si el usuario la tiene instalada o no. Lo nico que nos tiene que preocupar es saber si la fuente est o no en nuestro servidor. La sintaxis de @font-face es:

@font-face{ font-family:<nombre_fuente>; src: <source>[,<source>]*; [font-weight:<weigth>]; [font-style:<style>]; }

Con esto definimos el tipo de letra y su ubicacin en nuestro servidor. Si queremos usar este tipo de fuente tan solo tenemos que llamarla con Font-family como lo hacamos antiguamente. Ejemplo
@font-face{ Font-family: Vivaldi; Font-style: normal; Font-weight: normal; Src: url(VIVALDI.eot); } #caja1 { Font-family: Vivaldi; }

Resultado

16 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne

13. Sombras en texto (text-shadow)

El atributo text-shadow sirve para dar sombras a un texto, pero usado con imaginacin nos puede dar soporte para otros efectos muy interesantes. Este atributo tiene la posibilidad de aadirle varios valores para definir el desplazamiento horizontal, el desplazamiento vertical, el degradado de la sombra y el color, por ese orden. Adems, tenemos la posibilidad de aadirle varias sombras al mismo texto separando cada sombra por comas y aqu viene la parte ms creativa e interesante de este atributo. Veamos un ejemplo muy completo para que nos quede ms claro. Ejemplo
#caja1 h1{ font-family: 'Cuprum', serif; color: #fff; text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135; }

En este ejemplo, a la letra le ponemos color blanco. Como primera sombra le damos desplazamiento horizontal 0px, vertical 1px, difuminado 0px y color #999. La segunda sombra tendr un desplazamiento horizontal de 0px, vertical de 2px, difuminado de 0px y color #777. As sucesivamente. Con esta sombra conseguiremos un efecto de texto en 3D. Resultado

Para conseguir ms efecto del mismo tipo tenemos una herramienta en internet muy fcil y que genera un cdigo que podremos usar en nuestra web. http://www.wordpressthemeshock.com/css-text-shadow/

17 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne

14. Animaciones
14.1 Introduccin
Una de las caractersticas ms impresionantes de CSS3 es la posibilidad de crear animaciones de los elementos de pgina. Todo esto nos abre infinitas posibilidades que antes solo estaban disponibles para programadores javascript o diseadores con flash. Algunas de las opciones de las animaciones pueden ser las rotaciones de los elementos, ampliaciones y reducciones de tamao, desplazamiento, etc. Pero no esto no queda ah, tambin han implementado una serie de interacciones con el usuario que solo se pueden hacer con CSS3. Adems, todo ello sin tener que programar, lo que resulta mucho ms agradable y al alcance de desarrolladores menos tcnicos. Ojo!: A da de hoy (mayo de 2012), los navegadores no aceptan como deberan las animaciones as que a todos los atributos y claves hay que aadirles el prefijo para el navegador en concreto (-moz-, -webkit-, -o-). Para este manual los pondremos segn indica la especificacin, pero tendremos que tener eso en cuenta a la hora de usarlos.

14.2 Conceptos bsico para las animaciones

Fotograma clave Son los valores iniciales y finales que tiene que tener una animacin CSS. Su sintaxis sera algo as:

@keyframes 'nombre_fotograma_clave' { 0% { left: 100px; } 40% { left: 150px; } 60% { left: 75px; } 100% { left: 100px; } }
Esta animacin estara compuesta de 4 fotogramas clave. El porcentaje es en el momento en el que va a producirse ese fotograma y los px son la longitud donde se colocara el fotograma dentro del DIV en el que se encaje. Tambin podemos definir un fotograma clave indicndole, en vez de los tantos por ciento, from para indicarle donde empieza la animacin y to para indicarle donde termina.

18 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne

14.3 Desplazamiento de un elemento

Para la animacin de un elemento, usaremos un contenedor DIV con un texto y le aplicaremos los mismos fotogramas clave que usamos en la seccin anterior. El cdigo para el contendor sera el siguiente.

#caja1 { animation-name: 'nombre-fotograma-clave'; animation-duration: 45s; animation-iteration-count: 10; }

El contenedor al que le aplicamos la animacin se mover primero a la izquierda 100px, despus 50px ms hasta los 150px, despus se mover a la izquierda hasta los 75px y por ltimo otra vez a la derecha hasta los 100px. Esta animacin lo har en 45 segundos y la repetir 10 veces. Los atributos de estilo para esta capa son los siguientes: Animation-name: nombre del fotograma clave. Animation-duration: la duracin de la animacin Animatioin-iteration-count: las veces que se repite. Se le puede poner tambin el valor infinite para indicarle que la duracin ser infinita.

Adems de las propiedades que hemos usado, en el ejemplo anterior tenemos otra serie de atributos que se pueden aplicar a la animacin y que se colocan en el DIV. Estas propiedades seran las siguientes: animation-timing-function: se aplica entre los fotogramas clave, no sobre toda la animacin y describe como progresa la animacin a lo largo de un ciclo. animation-direction: esta propiedad define el sentido de la animacin. Si especificamos alternate y los ciclos de interaccin son impares, la animacin ir en la direccin normal, si no, se realizar en la direccin inversa animation-delay: propiedad que nos indica el momento en el que comenzar la animacin. Si el valor es 0 se ejecuta en cuanta se carga la pgina. animation: esta propiedad combina las anteriores de una forma resumida.

19 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne

14.4 Transformacin de un elemento

Existe otro atributo que permite hacer animaciones y efectos muy interesantes a los elementos de nuestra web. Este atributo es el atributo transition. A diferencia del atributo animation, este nos permite crear efectos de aumento o reduccin de la caja, nos cambia el color, nos permite rotarla, etc. Al igual que al atributo animation, a este tambin hay que ponerle los prefijos para los distintos navegadores ya que aun no se han adaptado a los estndares de la W3C. No est reido con el atributo visto anteriormente, es decir, los dos se pueden usar por igual en una caja dndonos infinitas posibilidades. Adems, cuando usamos el transition con el selector ::hover nos dar un efecto de realidad que nunca antes habramos conseguido con CSS. Cuenta con varias propiedades: Transition-property: Especifica a que propiedad CSS se le aplica. Hay dos valores comodines, all que indica que se aplicarn todas las propiedades susceptibles de cambiar y none, que no aplicar ninguna propiedad. Para conocer todos los valores posibles para este atributo podemos revisar el punto 7.1 del documento de transiciones CSS3 de la W3C http://www.w3.org/TR/css3-transitions/#animatable-css Transition-duration: Tiempo empleado en el desarrollo de la transicin. Es la nica propiedad obligatoria Transition-timing-function: Cmo se desarrolla la transicin en el tiempo. Transition-delay: Tiempo que transcurre desde que la accin que desencadena la transicin y la misma ocurren, es decir, el ratraso con el que empieza la transicin.

Las transiciones tambin se pueden resumir en una sola propiedad que tendra la siguiente sintaxis:

transition: property duration timing-function delay;

Si deseamos utilizar la forma corta y declarar varias propiedades a cambiar con igual o distintos parmetros cada una de ellas, separaremos los conjuntos de propiedades con comas. Veamos un ejemplo para que est ms claro

transition: color 3s linear 0s, width 1s ease 1s;

Donde una transformacin ser color 3s linear 0s y despus se har la transformacin width 1s ease 1s; Veamos un ejemplo ms completo a continuacin. Evidentemente solo puedo poner el cdigo, ya que no puedo poner una animacin en el documento. Si queremos ver algunos posibles efectos podemos entrar en la web http://ksesocss.blogspot.com/2012/03/transitions-css3-guia-de-aproximacion-y.html

20 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne

Ejemplo
#caja1 { transition:box-shadow, transform 2s; -webkit-transition:-webkit-box-shadow, -webkit-transform 2s, background 2s; -moz-transition:-moz-box-shadow, -moz-transform 2s, background 2s; transform: scale(1,1); -webkit-transform: scale(1,1); -moz-transform: scale(1,1); } #caja1:hover { transition:transform 3s, box-shadow 3s; -webkit-transition:-webkit-transform 3s, background 3s, -webkit-box-shadow 3s; -moz-transition:-moz-transform 3s, background 3s, -moz-box-shadow 3s; box-shadow: 10px 10px 10px #555; transform: scale(1.3,1.3); -webkit-transform: scale(1.3,1.3); -moz-transform: scale(1.3,1.3); z-index:9999; }

Este ejemplo nos mostrar la #caja1 a escala 1,1 (su tamao normal) y cuando pongamos el ratn encima aumentar su tamao un 30% y le aparecer una sombra que se desplazar 10px a la derecha y 10px hacia abajo. Esto nos dar el efecto de que la caja se aproxima a nosotros.

21 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne

15. Selectores
La nueva versin de CSS3 incluye todos los selectores de CSS2 y aade otra decena de selectores, pseudo-clases y pseudo-elementos que podremos encontrar ampliadas en la recomendacin de la W3C http://www.w3.org/TR/2011/REC-css3-selectors20110929/ Selectores de atributos En primer lugar aade tres nuevos selectores de atributos: Elemento[atributo ^= valor] => selecciona todos los elementos que disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto indicada. Por ejemplo: a[href^=mailto] { } (todos los elementos que apuntan a una direccin de correo electrnico) Elemento[atributo $= valor] => Selecciona todos los elementos que disponen de este atributo y cuyo valor termina exactamente por la cadena indicada. Por ejemplo: a[href$=.html] { }(Todos los elementos que apuntan a una pgina HTML) Elemento[atributo *= valor] => Selecciona todos los elementos que disponen de este atributo y cuyo valor contiene la cadena de texto indicada. Por ejemplo: h1[title*=captulo] { }(todos los h1 cuyo atributo title contenga la palabra captulo) Selector de hermanos Otro elemento nuevo de CSS3 es el selector general de hermanos que generaliza el selector adyacente de CSS2.1. Su sintaxis es elemento1 ~ elemento2 que seleccionara el elemento2 que es hermano de elemento1 independientemente de si se encuentra inmediatamente despus en el cdigo o no. Veamos un ejemplo ms claro. Ejemplo
h1 + h2 { ... } /* selector adyacente */ h1 ~ h2 { ... } /* selector general de hermanos */ <h1>...</h1> <h2>...</h2> <p>...</p> <div> <h2>...</h2> </div> <h2>...</h2>

El primer selector (h1 + h2) slo selecciona el primer elemento h2, mientras que el segundo selector (h1 ~ h2) seleccionar todos los h2 menos el segundo, ya que no es hermano.

22 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne Pseudo-elementos Los pseudo-elemento de CSS2.1 se mantienen en CSS3 pero cambia su sintaxis y ahora se utiliza :: delante del nombre en vez de : como se haca antes. Es decir, el uso de los pseudo-elementos ahora sera (::first-line, ::first-letter, ::before, ::after,). Nuevo pseudo-elemento CSS3 aade un nuevo pseudo-elemento que selecciona el texto seleccionado por el usuario con un ratn. Este pseudo-elemento sera ::selecction Pseudo-clases Una de las mayores modificaciones de CSS3 se produce en las pseudo-clases, ya que aaden 12 nuevas. Entre las que se encuentran: Elemento:nth-child(numero) => Selecciona el hijo del elemento siempre y cuando est en la posicin ensima. Muy til por ejemplo para seleccionar el quinto prrafo, el sptimo ttulo, etc. Elemento:nth-last-child(numero) => Idntico al anterior, pero empieza a contar desde atrs. Por si queremos seleccionar el penltimo o el antepenltimo hijo de un elemento. Elemento:empty => Selecciona el elemento indicado con la condicin de que no tenga ningn hijo ni contenido de texto. til para imgenes, etc. Elemento:first-child y elemento:last-child => Selecciona los hijos indicados con la condicin de que sean el primero o el ltimo hijo de su padre respectivamente. Elemento:nth-of-type(numero) => Selecciona el elemento que sea el ensimo hermano de este tipo. Elemento:nth-last-of-type(numero) => Selecciona lo mismo que el anterior, pero este empieza a contar desde el ltimo hermano.

Algunas pseudo-clases como :nth-child(numero) permiten el uso de pseudo-clases complejas para realizar selecciones avanzadas. Por ejemplo:

Li:nth-child(2n+1) { } (Selecciona todos los elementos impares de la lista) Li:nth-child(2n) { } (Selecciona todos los elementos pares de la lista)
Veamos ahora un ejemplo ms completo y que nos puede resultar muy til. Ejemplo
/* Las siguientes reglas alternan cuatro estilos diferentes para los prrafos */ p:nth-child(4n+1) { ... } p:nth-child(4n+2) { ... } p:nth-child(4n+3) { ... } p:nth-child(4n+4) { ... }

23 Jose Manuel Guisado Hormigo

1 DAW - IES Julio Verne Pseudo-elemento :not Otro pseudo-elemento nuevo en CSS3 es el pseudo-elemento :not. Lo pongo a parte porque me resulta el ms interesante de los nuevos pseudo-elementos. Este pseudo-elemento nos permitir seleccionar todos los elementos que NO cumplen con la condicin del selector. Por ejemplo

:not(p) { } (selecciona todos los elementos de la pgina que no sean

prrafos) (selecciona cualquier elemento cuyo atributo id no sea

:not(#especial) { }
"especial")

Mas pseudo-elementos y test del navegador Si queremos conocer todos los pseudo-elementos nuevos y adems de ello saber si nuestro navegador es compatible con ellos tendremos que entrar en la direccin http://www.css3.info/selectors-test/

16. Documentacin
Este manual se ha basado principalmente en la informacin recogida en: Manual de CSS3 de DesarrolloWeb.com http://www.desarrolloweb.com/manuales/css3.html Selectores CSS3 de LibrosWeb.es http://www.librosweb.es/css_avanzado/capitulo3/selectores_de_css_3.html Especificacin oficial de la W3C (aun en construccin)

Podemos ver el estado actual de la especificacin en http://www.w3.org/Style/CSS/current-work adems de pinchar sobre los enlaces de las especificaciones que ya estn terminadas y conocerlas al completo.

24 Jose Manuel Guisado Hormigo