manual css3

1º DAW - IES Julio Verne

1 Jose Manuel Guisado Hormigo


IES Julio Verne Fundamentos básicos del CSS3

Jose Manuel Guisado Hormigo



1. ¿Qué hay de nuevo en CSS3? ................................. 3

2. Atributo gradiente de colores en borde en firefox ....... 4

3. Bordes redondeados ........................................... 6

4. Múltiples imágenes 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. Introducción a @font-face................................... 16

13. Sombras en texto (text-shadow) ........................... 17

14. Animaciones ................................................... 18

14.1. Introducción a las animaciones ......................... 18

14.2. Conceptos básicos para las animaciones .............. 18

14.3. Desplazamiento de un elemento ....................... 19

14.4. Transformación de un elemento ....................... 20

15. Selectores ...................................................... 22

16. Documentación ............................................... 24



1. ¿Qué hay de nuevo en CSS3? Introducción

CSS3 es la tercera versión y la más actual de las hojas de estilo. Es una modificación

de la versión anterior CSS2.1, así que sería conveniente que la persona que quiera

seguir este manual conozca previamente la versión 2 de CSS.

Más 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 diseñadores a ingeniárselas

de otras formas.

CSS3 ha intentado dar solución a muchos de esos detalles que algunas veces se

volvían 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 más adelante veremos en profundidad.

Bordes Fondos Color Texto

Border-color Border-image Border-radius Box-shadow

Background-origin Background-clip Background-size Múltiples imágenes

Color HSL Color HSLA Color RGBA Opacidad

Text-shadow Text-overflow Ruptura de palabras

Interfaz Selectores Cajas Otros

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

Cambio de sintaxis. Not() ::selection

Overflow-x Overflow-y

Media queries Múltiples columnas Web Fonts



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 estándar 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 más información 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 más de un color, el borde tiene que tener un grosor en píxeles como

mínimo equivalente al número de colores, es decir, si quieres dos colores tendremos

un borde de dos píxeles, si queremos 3, de tres píxeles y así sucesivamente.

Lo mejor será ver un ejemplo para saber cómo funciona y cuál es el resultado.

#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;

}

Ejemplo



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.

Resultado



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 más básico sería:

border-radius: 5px;

Con lo que le daríamos 5 píxeles de radio a la curva de todas las esquinas del

elemento en cuestión.

Con este atributo nos ahorramos los enrevesados recursos que teníamos que usar en

CSS2 para poner bordes redondeados a las cajas usando imágenes y que en la mayoría

de los casos no daba un resultado del todo elegante.

El atributo border-radius tiene la posibilidad también de definir las cuatro esquinas

de la caja con valores distintos para el radio. Los valores irán 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;

Resultado

#caja1{

width: 300px;

height: 200px;


border-width: 10px;

border-radius: 5px 70px 20px 60px;

background: #A775A3;

}

Ejemplo



4. Múltiples imágenes de fondo En las anteriores versiones de CSS conseguíamos poner varias imágenes 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

dándole la posibilidad de añadir varias imágenes y posicionarlas en distintos lugares

de la caja

Las distintas imágenes de fondo se tienen que escribir separadas por comas.

Las imágenes van colocadas de modo que la primera aparece sobre las siguientes.

A las imágenes colocadas en de fondo se le pueden añadir los atributos ya conocidos

de las versiones anteriores de CSS tales como posición (center, bottom, top, left y

right), como los de repetición.

#caja1{

width: 500px;

height: 500px;


border-width: 10px;

background: url(css3.png) center no-repeat,

url(html5.png) bottom right no-repeat,

url(jquery.png) top left no-repeat;

}

Ejemplo

Resultado



5. Colores RGBA Como conocemos, tanto en HTML como en las versiones anteriores de CSS los colores

se expresan en valores RGB.

CSS3, además de los tres colores primarios Rojo, Verde y Azul, ha añadido cuarto

parámetro 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 números decimales se separarán con un punto. Con esto conseguimos lo

que antes teníamos que hacer recurriendo a imágenes PNG con transparencia.

Para definir RGBA debemos especificar cuatro valores de la siguiente manera:

rgba(250, 125, 0, 0.5);

Los tres primero número son los valores en sistema decimal de los colores Rojo,

Verde y Azul. El cuarto valor le asigna una opacidad al elemento del 50%.

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.

#caja2{

width: 200px;

height: 250px;

position: relative;

top: 100px;

left: 100px;


border-width: 10px;

border-color: RGBA(255, 200, 0, 0.8);

background-color: RGBA(0, 250, 52, 0.5);

}

Ejemplo

Resultado



6. Ruptura de palabras (Word-Wrap) Hasta ahora, si nos encontrábamos con el caso de que una palabra era demasiado

grande y sobresalía de la caja o la caja modificaba su tamaño para adaptarse a dicha

palabra, lo teníamos que solucionar a mano y de forma muy cutre añadiendo nosotros

mismo un guión y un salto de línea.

El atributo word-wrap nos permite hacer esto de forma automática

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

#caja1{

width: 100px;

height: 200px;


border-width: 1px;

background: #CCC;

word-wrap: break-word;

}

Ejemplo

Resultado



7. Texto multicolumna En algunos medios encontramos el texto dividido en columnas para facilitar su

lectura, muy especialmente en periódicos. La nueva versión de CSS también

incorpora esta opción.

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 línea divisoria entre columnas.

Column-count: Será el número de columnas que queremos.

Estas etiquetas, a día de hoy (mayo de 2012), no la soporta tal cual ningún

navegador, aunque aparecen en la especificación de la W3C. Sin embargo Safari,

Google Chrome y Firefox ya la implementa con la condición 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 podrán verlo

igual.

Para más información: http://www.w3.org/TR/css3-multicol/

#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;

}

Ejemplo

Resultado

http://www.w3.org/TR/css3-multicol/



8. Sombras (box-shadow) Hasta ahora, para conseguir poner una sombra a un elemento web teníamos que

recurrir a elementos externos tales como imágenes, javascript, etc. Con el atributo

box-shadow, además de facilitarnos la taréa de poner sombra a los elementos,

agiliza la carga de nuestras webs, ya que no tenemos que recurrir a imágenes que

tardan más en cargar.

El atributo box-shadow necesita que le especifiquemos algunos valores separados por

espacios tales como el difuminado, separación de la sombra o color (pudiendo usar

un color RGBA).

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

Por orden de aparición, 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 más alejada esté

la sombra del elemento, más lejos parecerá que está el elemento del lienzo de la

página.

Desplazamiento vertical: Este valor es similar al desplazamiento horizontal. Los

valores positivos indicarán que la sombra se sitúa 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 aparecería 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 grisáceo 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

#caja1 {

width: 200px;

height: 200px;

border: solid 3px #000;

box-shadow: 5px -9px 3px RGBA(85, 85, 85, 0.8);

}

Ejemplo



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

ratón por encima.

Este efecto lo podemos conseguir con el evento :hover.

Para ello pondremos la sombra a más distancia del elemento, tanto en horizontal

como en vertical y le añadiremos el difuminado.

A continuación podemos ver un ejemplo práctico.

Resultado

#caja1 {

width: 200px;

height: 200px;


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);

}

Ejemplo

Resultado

Normal :Hover



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 código que utilizaremos es similar al de la sombra, con su posición horizontal, su

posición vertical, su difuminado y su color, pero además le añadiremos 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 más claro.

#caja1 {

width: 200px;

height: 200px;


background-color: #333;

box-shadow: inset 10px 10px 15px RGBA(200, 200, 200, 0.8);

}

Ejemplo

Resultado



10. Propiedad background-origin En las versiones anteriores de CSS teníamos varias propiedades para el atributo

background tales como background-repeta, background-position, etc…

En CSS3, además han añadido la opción 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 imágenes 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



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 añadir barras de desplazamiento en

el lado derecho y en la parte de debajo de la caja cuando el documento tiene una

extensión superior a la misma y así evitar el problema de la redimensión que se

generaría.

Overflow-x y overflow-y tiene la misma función, 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 día de hoy en los navegadores) y No-

content.

También habría 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 tendría visible como valor predeterminado, sino auto.

Resultado

Overflow-x Overflow-y



12. Introducción al @font-face Hasta ahora, para escoger una fuente para nuestra página web, teníamos 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 podías 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 ubicación en nuestro servidor. Si queremos

usar este tipo de fuente tan solo tenemos que llamarla con Font-family como lo

hacíamos antiguamente.

@font-face{

Font-family: Vivaldi;

Font-style: normal;

Font-weight: normal;

Src: url(VIVALDI.eot);

}

#caja1 {

Font-family: Vivaldi;

}

Ejemplo

Resultado



13. Sombras en texto (text-shadow) El atributo text-shadow sirve para dar sombras a un texto, pero usado con

imaginación nos puede dar soporte para otros efectos muy interesantes.

Este atributo tiene la posibilidad de añadirle varios valores para definir el

desplazamiento horizontal, el desplazamiento vertical, el degradado de la sombra y

el color, por ese orden.

Además, tenemos la posibilidad de añadirle varias sombras al mismo texto separando

cada sombra por comas y aquí viene la parte más creativa e interesante de este

atributo.

Veamos un ejemplo muy completo para que nos quede más claro.

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.

Para conseguir más efecto del mismo tipo tenemos una herramienta en internet muy

fácil y que genera un código que podremos usar en nuestra web.

http://www.wordpressthemeshock.com/css-text-shadow/

#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;

}

Ejemplo

Resultado

http://www.wordpressthemeshock.com/css-text-shadow/



14. Animaciones

14.1 Introducción

Una de las características más impresionantes de CSS3 es la posibilidad de crear

animaciones de los elementos de página. Todo esto nos abre infinitas posibilidades

que antes solo estaban disponibles para programadores javascript o diseñadores con

flash.

Algunas de las opciones de las animaciones pueden ser las rotaciones de los

elementos, ampliaciones y reducciones de tamaño, desplazamiento, etc.

Pero no esto no queda ahí, también han implementado una serie de interacciones

con el usuario que solo se pueden hacer con CSS3. Además, todo ello sin tener que

programar, lo que resulta mucho más agradable y al alcance de desarrolladores

menos técnicos.

Ojo!: A día de hoy (mayo de 2012), los navegadores no aceptan como deberían las

animaciones así que a todos los atributos y claves hay que añadirles el prefijo para el

navegador en concreto (-moz-, -webkit-, -o-).

Para este manual los pondremos según indica la especificación, pero tendremos que

tener eso en cuenta a la hora de usarlos.

14.2 Conceptos básico para las animaciones

Fotograma clave

Son los valores iniciales y finales que tiene que tener una animación CSS.

Su sintaxis sería algo así:

@keyframes 'nombre_fotograma_clave' {

0% { left: 100px; }

40% { left: 150px; }

60% { left: 75px; }

100% { left: 100px; }

}

Esta animación estaría 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

colocaría el fotograma dentro del DIV en el que se encaje.

También podemos definir un fotograma clave indicándole, en vez de los tantos por

ciento, from para indicarle donde empieza la animación y to para indicarle donde

termina.



14.3 Desplazamiento de un elemento

Para la animación de un elemento, usaremos un contenedor DIV con un texto y le

aplicaremos los mismos fotogramas clave que usamos en la sección anterior.

El código para el contendor sería el siguiente.

#caja1 {

animation-name: 'nombre-fotograma-clave';

animation-duration: 45s;

animation-iteration-count: 10;

}

El contenedor al que le aplicamos la animación se moverá primero a la izquierda

100px, después 50px más hasta los 150px, después se moverá a la izquierda hasta los

75px y por último otra vez a la derecha hasta los 100px. Esta animación 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 duración de la animación

Animatioin-iteration-count: las veces que se repite. Se le puede poner

también el valor infinite para indicarle que la duración será infinita.

Además de las propiedades que hemos usado, en el ejemplo anterior tenemos otra

serie de atributos que se pueden aplicar a la animación y que se colocan en el DIV.

Estas propiedades serían las siguientes:

animation-timing-function: se aplica entre los fotogramas clave, no sobre

toda la animación y describe como progresa la animación a lo largo de un

ciclo.

animation-direction: esta propiedad define el sentido de la animación. Si

especificamos “alternate” y los ciclos de interacción son impares, la

animación irá en la dirección normal, si no, se realizará en la dirección

inversa

animation-delay: propiedad que nos indica el momento en el que comenzará

la animación. Si el valor es 0 se ejecuta en cuanta se carga la página.

animation: esta propiedad combina las anteriores de una forma resumida.



14.4 Transformación 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

reducción de la caja, nos cambia el color, nos permite rotarla, etc.

Al igual que al atributo animation, a este también hay que ponerle los prefijos para

los distintos navegadores ya que aun no se han adaptado a los estándares de la W3C.

No está reñido con el atributo visto anteriormente, es decir, los dos se pueden usar

por igual en una caja dándonos infinitas posibilidades. Además, cuando usamos el

transition con el selector ::hover nos dará un efecto de realidad que nunca antes

habríamos 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 aplicarán 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 transición. Es la

única propiedad obligatoria

Transition-timing-function: Cómo se desarrolla la transición en el tiempo.

Transition-delay: Tiempo que transcurre desde que la acción que

desencadena la transición y la misma ocurren, es decir, el ratraso con el que

empieza la transición.

Las transiciones también se pueden resumir en una sola propiedad que tendría 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 parámetros cada una de ellas, separaremos los conjuntos de propiedades

con comas. Veamos un ejemplo para que esté más claro

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

Donde una transformación será color 3s linear 0s y después se hará la

transformación width 1s ease 1s;

Veamos un ejemplo más completo a continuación.

Evidentemente solo puedo poner el código, ya que no puedo poner una animación 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

http://www.w3.org/TR/css3-transitions/#animatable-css

http://ksesocss.blogspot.com/2012/03/transitions-css3-guia-de-aproximacion-y.html



Este ejemplo nos mostrará la #caja1 a escala 1,1 (su tamaño normal) y cuando

pongamos el ratón encima aumentará su tamaño 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.

#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;

}

Ejemplo



15. Selectores La nueva versión de CSS3 incluye todos los selectores de CSS2 y añade otra decena de

selectores, pseudo-clases y pseudo-elementos que podremos encontrar ampliadas en

la recomendación de la W3C http://www.w3.org/TR/2011/REC-css3-selectors-

20110929/

Selectores de atributos

En primer lugar añade 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 dirección de correo electrónico)

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 página 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*=”capítulo”] { … }(todos los h1 cuyo atributo

title contenga la palabra “capítulo”)

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

seleccionaría el elemento2 que es hermano de elemento1 independientemente de si

se encuentra inmediatamente después en el código o no.

Veamos un ejemplo más claro.

El primer selector (h1 + h2) sólo selecciona el primer elemento h2, mientras que el

segundo selector (h1 ~ h2) seleccionará todos los h2 menos el segundo, ya que no es

hermano.

h1 + h2 { ... } /* selector adyacente */

h1 ~ h2 { ... } /* selector general de hermanos */

<h1>...</h1>

<h2>...</h2>

<p>...</p>

<div>

<h2>...</h2>

</div>

<h2>...</h2>

Ejemplo

http://www.w3.org/TR/2011/REC-css3-selectors-20110929/

http://www.w3.org/TR/2011/REC-css3-selectors-20110929/



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 hacía antes.

Es decir, el uso de los pseudo-elementos ahora sería (::first-line, ::first-letter,

::before, ::after,…).

Nuevo pseudo-elemento

CSS3 añade un nuevo pseudo-elemento que selecciona el texto seleccionado por el

usuario con un ratón.

Este pseudo-elemento sería ::selecction

Pseudo-clases

Una de las mayores modificaciones de CSS3 se produce en las pseudo-clases, ya que

añaden 12 nuevas. Entre las que se encuentran:

Elemento:nth-child(numero) => Selecciona el hijo del elemento siempre y

cuando esté en la posición enésima. Muy útil por ejemplo para seleccionar el

quinto párrafo, el séptimo título, etc.

Elemento:nth-last-child(numero) => Idéntico al anterior, pero empieza a

contar desde atrás. Por si queremos seleccionar el penúltimo o el

antepenúltimo hijo de un elemento.

Elemento:empty => Selecciona el elemento indicado con la condición de que

no tenga ningún hijo ni contenido de texto. Útil para imágenes, etc.

Elemento:first-child y elemento:last-child => Selecciona los hijos indicados

con la condición de que sean el primero o el último hijo de su padre

respectivamente.

Elemento:nth-of-type(numero) => Selecciona el elemento que sea el

enésimo 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 más completo y que nos puede resultar muy útil.

/* Las siguientes reglas alternan cuatro estilos diferentes para los párrafos */

p:nth-child(4n+1) { ... }




Ejemplo



Pseudo-elemento :not

Otro pseudo-elemento nuevo en CSS3 es el pseudo-elemento :not. Lo pongo a parte

porque me resulta el más interesante de los nuevos pseudo-elementos.

Este pseudo-elemento nos permitirá seleccionar todos los elementos que NO cumplen

con la condición del selector. Por ejemplo

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

párrafos)

:not(#especial) { … } (selecciona cualquier elemento cuyo atributo id no sea

"especial")

Mas pseudo-elementos y test del navegador

Si queremos conocer todos los pseudo-elementos nuevos y además de ello saber si

nuestro navegador es compatible con ellos tendremos que entrar en la dirección

http://www.css3.info/selectors-test/

16. Documentación Este manual se ha basado principalmente en la información 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

Especificación oficial de la W3C (aun en construcción)

Podemos ver el estado actual de la especificación en

http://www.w3.org/Style/CSS/current-work además de pinchar sobre los enlaces de

las especificaciones que ya están terminadas y conocerlas al completo.

http://www.css3.info/selectors-test/

http://www.desarrolloweb.com/manuales/css3.html

http://www.librosweb.es/css_avanzado/capitulo3/selectores_de_css_3.html

http://www.w3.org/Style/CSS/current-work

manual css3

Documents