CSS3, el nuevo estndar de las hojas de estilo

NDICE
HOJAS DE ESTILO CSS3 ______________________________________________ 3
INTRODUCCION .................................................................................................................. 3 FONDOS .................................................................................................................................. 4
MLTIPLES FONDOS...................................................................................................................... 4 FIJAR LA POSICIN DEL FONDO ................................................................................................. 4

BORDES .................................................................................................................................. 6
BORDES REDONDEADOS .............................................................................................................. 6 BORDES CON IMGENES .............................................................................................................. 7

SOMBRAS ............................................................................................................................... 9 TRANSPARENCIAS............................................................................................................ 10 TEXTO EN COLUMNAS .................................................................................................... 11 EFECTOS DE TEXTO ........................................................................................................ 12

EFECTO CORTORNO .................................................................................................................... 12 EFECTO SOMBRA ......................................................................................................................... 13 EFECTO OVERFLOW .................................................................................................................... 13

CANAL ALPHA ................................................................................................................... 14 DEGRADADOS .................................................................................................................... 15

FONDOS .......................................................................................................................................... 15 BORDES........................................................................................................................................... 18

FUENTES .............................................................................................................................. 19
EJEMPLO ......................................................................................................................................... 20 Resultado .......................................................................................................................................... 21

SELECTORES ...................................................................................................................... 21 REFERENCIA CSS3 ............................................................................................................ 24 COMPATIBILIDAD DE CSS 3 CON LOS NAVEGADORES ........................................ 25

FUENTES __________________________________________________________ 26

Indice

HOJAS DE ESTILO CSS3

INTRODUCCION
El ltimo estndar de hojas de estilo en cascada confeccionado por el W3C (World Wide Web Consortium) es el denominado CSS3. Esta nueva versin de las hojas de estilo tiene importantes novedades: Nuevas propiedades orientadas respecto a los aspectos grficos o bordes redondeados o textos con sombras o posibilidad de asignar mltiples fondos o nuevas posibilidades en el formato de las tablas o posibilidad de agregar pies de pgina, cabeceras y referencias cruzadas Nuevas estructuras de organizacin. o texto en columnas Capacidades visuales avanzadas que tienen como objetivo el facilitar el posicionamiento de los controles dentro de la pgina, para ello mejora: o la interfaz grfica o el posicionamiento de los objetos o el tamao de los objetos o la posibilidad de estructurar el texto en columnas Hojas de Estilo Aural: nuevas propiedades orientadas a los objetos audio como son: o sonidos de fondo o transiciones de sonido o posicin del sonido en reproduccin Nuevas funciones relacionadas con las fuentes o mejora en el soporte para mltiples lenguajes o posibilidad de utilizar fuentes externas

En muchos casos, al utilizar las nuevas propiedades grficas se puede liberar al navegador de operaciones que hasta ahora eran su exclusiva responsabilidad, mejorando as su rendimiento y la velocidad con que carga las pginas. http://www.css3.info/preview/ CSS3 Previews - CSS3 . Info http://www.w3.org/TR/css3-roadmap/ Introduction to CSS3

CSS3

FONDOS
MLTIPLES FONDOS
CSS3 permite aadir varios fondos. La tcnica para realizar esta operacin consiste en utilizar la propiedad background y fijar los atributos de cada una de las imgenes separadas por un espacio en blanco; los grupos de atributos de cada imagen se seperarn con una coma. Se debe tener en cuenta que la imagen puesta en primer lugar es la que estar en primer plano en el caso de que se sobrepongan sobre alguna otra imagen.

Ejemplo
Cdigo CSS
.fondos { background: url(simbolo2.gif) center no-repeat, url(simbolo3.gif) center repeat; width: 300px; }

Cdigo HTML
<div class="fondos"> <p>contenido <p>contenido <p>contenido <p>contenido <p>contenido <p>contenido </div> del del del del del del elemento elemento elemento elemento elemento elemento que que que que que que va va va va va va a a a a a a tener tener tener tener tener tener 2 2 2 2 2 2 fondos fondos fondos fondos fondos fondos </p> </p> </p> </p> </p> </p>

FIJAR LA POSICIN DEL FONDO

Para indicar la posicin de la imagen de fondo dentro de un elemento se utiliza la propiedad background-origin, con este atributo se puede indicar tres posiciones relativas distintas para el extremo superior izquierdo de la imagen border-box: la imagen comenzar a colocarse donde en el borde. content-box: la imagen comenzar a colocarse en funcin del padding establecido para el elemento. padding-box: la imagen comenzar a colocarse en funcin del margen establecido para el elemento

CSS3

Ejemplo
Cdigo CSS
.fondo{ border: 12px double #00F; padding: 10px; background-image: url(mariposa.gif); background-repeat: no-repeat; margin: 20px 0; background-color:#CF9;} #pruebasfondo1{ background-origin: border-box;} #pruebasfondo2{ background-origin: padding-box;} #pruebasfondo3{ background-origin: content-box;}

Cdigo HTML
<h1>Probando background-origin</h1> <div id="pruebasfondo1" class="fondo"> <h2>background-origin: border</h2> Este elemento tiene borde y padding. <br> </div> <div id="pruebasfondo2" class="fondo"> <h2>background-origin: padding</h2> Este elemento tiene borde y padding <br> </div> <div id="pruebasfondo3" class="fondo"> <h2>background-origin: content</h2> Este elemento tiene borde y padding <br> </div>

CSS3

BORDES
CSS3 aporta nuevos atributos para realizar bordes redondeados o/y con imgenes, combras, etc. Para desarrollar las propiedades que permiten mltiples propiedades podemos utilizar la herramienta on-line que se encuentra en http://css3generator.com/.

BORDES REDONDEADOS
La propiedad border-radius que permite definir el radio de las curvas de las esquinas. Si se asigna un valor (en pixeles) a la propiedad, entonces el radio aplicado es el mismo para todas las esquinas, pero se le pueden asingar hasta 4 valores, uno para cada esquina (orden: sup-izquierda, sup-derecha, inf-izquierda, inf-derecha). Para que los bordes se redondeen la propiedad border debe tener el atributo solid.

Ejemplo
Cdigo CSS
div { border: 1px solid #000000; border-radius: 7px; padding: 10px;}

Cdigo HTML
<div class="fondos"> <p>contenido del elemento <p>contenido del elemento <p>contenido del elemento <p>contenido del elemento </div> que que que que va va va va a a a a tener tener tener tener bordes bordes bordes bordes redondeados</p> redondeados</p> redondeados</p> redondeados</p>

CSS3

Si cambio el cdigo CSS para que tenga bordes distintos:

div { border: 1px solid #000000; border-radius: 7px 27px 100px 0px padding: 10px; }

BORDES CON IMGENES

El atributo que permite introducir imgenes en los bordes es border-image. Este atributo permitir asignar una o varias imgenes a los bordes. Este atributo an est ausente en muchos navegadores y por ahora slo podemos contar con Firefox (prefijo moz-) y Safari-Chrome (prefijo webkit-) para ver este efecto. Otros atributos para hacer borde con imgenes, teniendo presente que no se ve en todos los navegadores, son:

border-image-source: URL de la imagen que queremos de borde borde-image-slice: Sirve para dar el espacio de la imagen que ser visible como borde; top, right, bottom y left. border-image-width: Ancho del borde con imagen. border-imagen-outset: Indicaremos el espacio ms all del borde que ocupar nuestra imagen, tambien en top, right, bottom y left. border-repeat: pues el repeat que todos conocemos del elemento background.

Ejemplo
Cdigo HTML
<div class="borde"> <p>prueba de <p>prueba de <p>prueba de <p>prueba de </div> borde</p> borde</p> borde</p> borde</p>

Cdigo CSS
.borde { -moz-border-image: url(marco.gif) 0 0 0 0; -webkit-border-image: url(marco.gif) 0 0 0 0 ; padding:60px; width: 140px;}

CSS3

Comprender las propiedades relacionadas con los bordes que utilizan imgenes es un poco complicado y es recomendable modificar los atributos implicados para comprobar el efecto que estos cambios tienen en el resultado. Con el siguiente ejemplo esperamos aclarar el significado de la propiedad border-image. Para el ejemplo, vamos a utilizar la imagen siguiente como borde:

El cdigo HTML del body implicado en la operacin ser un bloque div con un texto. El cdigo del estilo ser el que sigue:
div { width: 300px; height: 200px; padding: 10px; /* pongo un padding para despegar el texto de los bordes*/ border-width: 10px; -webkit-border-image: url(borde1.gif) 25% stretch stretch; -moz-border-image: url(borde1.gif) 25% stretch stretch; }

El resultado mostrara una imagen como esta:

El grosor del borde se ha fijado a 10px (border-width) y ese espacio es el que va a rellenar con el tanto por ciento de la imagen que se establece en la propiedad borderimage. El atributo stretch indica que para los bordes horizontales como los verticales lo que se muestra es el alargamiento de la imagen hasta la siguiente esquina.

CSS3

 https://developer.mozilla.org/En/CSS/-moz-border-image -moz-border-image - MDC Doc Center http://www.css3.info/preview/border-image/ Border-image: using images for your border - CSS3 . Info http://ejohn.org/blog/border-image-in-firefox/ John Resig - border-image in Firefox

SOMBRAS
El atributo box-shadow permite crear sombras. La sintaxis es la siguiente
box-shadow: <valor1> <valor2> <valor3> <valor4> <color>

Donde: valor1: es obligatoria e indica el desplazamiento horizontal de la sombra. Si el valor es positivo, la sombra se desplaza hacia la derecha y si es negativo, se desplaza hacia la izquierda. valor2: es obligatoria e indica el desplazamiento vertical de la sombra. Si el valor es positivo, la sombra se desplaza hacia abajo y si es negativo, se desplaza hacia arriba. valor3: es opcional e indica el radio utilizado para difuminar la sombra. Cuanto ms grande sea su valor, ms borrosa aparece la sombra. Si se utiliza el valor 0, la sombra se muestra como un color slido. valor4: es opcional e indica el radio con el que se expande la sombra. Si se establece un valor positivo, la sombra se expande en todas direcciones. Si se utiliza un valor negativo, la sombra se comprime. color: es directamente el color de la sombra que se muestra.

Ejemplo
Cdigo CSS
#cajasombra{ background-color: #ddd; width: 300px; padding: 10px; box-shadow: 5px 5px 0 #333; #sombraclara{ width: 200px; padding: 10px; background-color: #999; color: #fff; box-shadow: 2px 2px 2px #ffc; #cajanegra{ padding: 10px; background-color: #000;} #sombraredondeada{ background-color: #090; color: #fff; width: 400px; padding: 10px; border-radius: 7px;

CSS3

box-shadow: 15px -10px 3px #000;}

Cdigo HTML
<h1>Probando box-shadow</h1> <div id="cajasombra"> Esta es una capa con sombra </div> <br><br> <div id="cajanegra"> <div id="sombraclara"> Esta caja la pongo sobre fondo negro, para hacer un elemento con sombra clara. </div> </div> <br><br> <div id="sombraredondeada"> Esta capa tiene las esquinas redondeadas y la sombra se adapta a la forma de la capa, por lo que tendr esquinas redondeadas. </div>

TRANSPARENCIAS
CSS3 permite utilizar el atributo opacity para controlar la transparencia de los elementos de la pgina. El valor de la propiedad opacity se establece mediante un nmero decimal comprendido entre 0.0 y 1.0. La interpretacin del valor numrico es tal que el valor 0.0 es la mxima transparencia (el elemento es invisible) y el valor 1.0 se corresponde con la mxima opacidad (el elemento es completamente visible). De esta forma, el valor 0.5 corresponde a un elemento semitransparente y as sucesivamente.

Ejemplo
Cdigo CSS3
#segundo, #tercero { opacity: 0.1; } #primero { background-color: #03C; } #segundo { background-color:#F00; } #tercero { background-color: #0C0;

CSS3

10

Cdigo HTML
<h1>Probando opacity</h1> <div id="primero"> La primera </div> <div id="segundo"> la segunda </div> <div id="tercero"> la tercera </div>

TEXTO EN COLUMNAS
Actualmente es habitual ver pginas Web estructradas en varias columnas, CSS3 aporta atributos para facilitar esta tarea. Para distribuir texto en columnas tenemos dos mtodos: column-count: indicando el nmero de columnas column-width: indicando el ancho de cada columna column-gap: para indicar la separacin entre columnas column-rule: para indicar la lnea entre las columnas

Tambin existen otros atributos:

Ejemplo
Cdigo HTML
<h1>Probando columnas</h1> <div id="columnas"> HTML 5 no es solo un lenguaje de etiquetas orientado al contenido y el formato, como las otras versiones de HTML, sino que pretende ser una tecnologa que permita crear aplicaciones de todo tipo. Para ello se estn desarrollando unas APIs que permitan trabajar con todos los elementos de la pgina utilizando para ello atributos y mtodos especficos de cada uno. Para que estas APIs sean realmente tiles tendrn que ser desarrolladas por todos los navegadores del mercado. </div>

Cdigo CSS Tres columnas seperadas por espacio en blanco utilizando column-width
#columnas { column-width: 13em; column-gap: 1em;

CSS3

11

Tres columnas separadas por una lnea utilizando column-count

#columnas{ column-count: 3; column-gap: 1em; column-rule: 1px solid black; }

EFECTOS DE TEXTO
EFECTO CORTORNO
Estas propiedades solo funcionan en los navegadores que se basan en WebKit. -webkit-text-fill-color: color de relleno del texto -webkit-text-stroke-color: color del borde del texto -webkit-text-stroke-width: tamao del stroke del texto

Ejemplo
Cdigo CSS
div { /* currently this is a webkit only extension */ font-size: 80px; -webkit-text-fill-color:#900 ; -webkit-text-stroke-color: gray; -webkit-text-stroke-width: 2.30px; }

Cdigo HTML
<div> Quien a buen rbol se arrima buena sombra le cobija </div>

CSS3

12

EFECTO SOMBRA
Para poner texto con sombra intervienen la propiedad
text-shadow (d1 d2 nb color)

Donde: d1 y d2 son el desplazamiento horizontal y vertical, respectivamente, de la sombra respecto al texto. nb indica lo ntido o borroso que se ve la sombra color es el color de la sombra

Es posible agregar mltiples sombras seperando con comas cada dato completo de sombra, por ejemplo
text-shadow: 0 2px 0 #FFF, 0 1px 5px #CCC;

Ejemplo
Cdigo CSS
div {text-shadow: 2px 2px 2px #000;}

Cdigo HTML
<div> Quien a buen rbol se arrima buena sombra le cobija </div>

EFECTO OVERFLOW
CSS3 permite indicar el aspecto que tendr el texto en el caso de que ste exceda el tamao el contenedor donde se muesta. La propiedad es:
text-overflow: clip/ellipsis

Donde clip indica que no corte las palabras y ellipsis que muestre puntos suspensivos al final del texto visible para indicar que un hay ms. Por ahora esta propiedad est implementada en todos los navegadores excepto en Firefox. Adems de esta propiedad se deben propiedades para: CSS3 Que se oculte el texto que supera el ancho del contenedor 13

overflow:hidden

Que slo se tenga en cuenta la primera lnea

white-space:nowrap

Ejemplo
Cdigo CSS
div {text-overflow: ellipsis; overflow:hidden; white-space:nowrap; width: 200px; }

Cdigo HTML
<div> Quien a buen rbol se arrima buena sombra le cobija </div>

http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects Using CSS Text-Shadow to Create Cool Text Effects http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/ How to Create Inset Typography with CSS3 http://www.catswhocode.com/blog/8-examples-of-stunning-css3-text-effects 8 examples of stunning CSS3 text effects - CatsWhoCode.com

CANAL ALPHA
CSS3 ha aadido una nueva caracterstica de ajuste de color. Adems a la propieda rgb se puede utilizar rgba donde el ltimo parmetro indica el valor del canal alpha (transparencia).
rgba(v1,v2,v3,alpha)

Hasta ahora la propiedad ha sido implementada en los navegadores basados en WebKit y permite obtener efec tos como los de la siguiente imagen con una sla imagen fuente:

CSS3

14

DEGRADADOS

Para crear propiedades CSS3 de degradados se pueden utilizar herramientas online como http://westciv.com/tools/gradients/index.html o http://gradients.glrzad.com/ para los gradientes lineales, y para los gradientes radiales http://westciv.com/tools/radialgradients/index.html.

FONDOS Caso1
Mozilla Vamos a ver la instruccin CSS3 que realizara un gradiente con las siguientes caractersticas: que el gradiente empiece por arriba (top), que utilice el color inicial (#65b6cf) que vaya hasta el color final (#2c2c2c) y que reparta el color de forma uniforme. background: -moz-linear-gradient(top, #65b6cf , #2c2c2c) WebKit En este caso se tienen que indicar en la propiedad de gradiente las siguientes propiedades: Tipo de degradado: (linear) Coordenadas de inicio: (0 0) Coordenadas de finalizacin: (0 100%) Color de inicio: from(#65b6cf) Color de finalizacin: to(#2c2c2c)

Con lo que la instruccin equivalente a la vista para Mozilla quedara como sigue: background: -webkit-gradient(linear, 0 0, 0 100%, from(#65b6cf), to(#2c2c2c));

CSS3

15

Caso2
A continuacin se ver otro caso de fondo con gradiente utilizando CSS3 con las mismas caractersticas que el caso anterior pero introduciendo una moficacin: que el segundo color empiece a los 100px background: -moz-linear-gradient(top, #65b6cf , #2c2c2c,100px)

Caso2
Mozilla En CSS3 es posible crear gradientes con varios colores, como en la siguiente instruccin: background: -moz-linear-gradient(top, #65b6cf , #2c2c2c 25%, #e3e3e3, 80%);

WebKit Para crear un gradiente con varios colores en WebKit se utiliza la propiedad color-stop de la siguiente manera:

CSS3

16

background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red);

Caso3
Hasta ahora hemos visto el degradado lineal, pero tambin podemos utilizar el degradado radial utilizando la siguiente sintaxis. background: -moz-radial-gradient(50%, #65b6cf , #2c2c2c);

Ejemplo A continuacin vemos un ejemplo del uso de gradiente en el fondo Cdigo CSS
div { font-size: 30px; background: -moz-linear-gradient(0% 0% 270deg,#00abeb, white, white 50%,#66cc00 51%,white 100%); background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(white), color-stop(0.5, white), color-stop(0.5, #66cc00)); } div:hover{ background: -webkit-gradient(radial, 430 50, 0, 430 50, 506, from(red), to(#000)); background-image: -moz-radial-gradient(430px 50px 45deg, circle cover, red 0%, black 100%); }

Cdigo HTML
<div> HTML 5 no es solo un lenguaje de etiquetas orientado al contenido y el formato, como las otras versiones de HTML, sino que pretende ser una tecnologa que permita crear aplicaciones de todo tipo. Para ello se estn desarrollando unas APIs que permitan trabajar con todos los elementos de la pgina utilizando para ello atributos y mtodos especficos de cada uno. Para que estas APIs sean realmente tiles tendrn que ser desarrolladas por todos los navegadores del mercado. </div>

CSS3

17

y cuando situamos el ratn sobre l

http://programmer.tumblr.com/post/471825477/como-crear-degradados-con-css-3 Memomiliano - Como crear degradados con CSS 3

BORDES
Los bordes tambin soportan efectos de gradiente o degradado. Estos efectos son soportados, por ahora, por Mozilla e intervienen las siguientes propiedades: border-bottom-colors border-top-colors border-left-colors border-right-colors

Ejemplo
Cdigo CSS
#cajaGradiente{ border: 8px solid #000; -moz-border-bottom-colors: -moz-border-top-colors: -moz-border-left-colors: -moz-border-right-colors: width:400px;} #033 #033 #033 #033 #039 #039 #039 #039 #777 #777 #777 #777 #888 #888 #888 #888 #999 #999 #999 #999 #aaa #aaa #aaa #aaa #bbb #bbb #bbb #bbb #ccc; #ccc; #ccc; #ccc;

Cdigo HTML
<div id="cajaGradiente"> Esta es una capa borde utilizando gradiente </div>

CSS3

18

FUENTES
Hasta la aparicin de las hojas de estilo CSS3, una de las mayores limitaciones para los diseadores Web era la imposibilidad de controlar la tipografa con que se mostraban los textos en las pginas Web. Cuando un navegador muestra contenidos de tipo texto de una pgina Web busca las fuentes (tipos de letra) en el ordenador cliente. Debido a este funcionamiento, slo se pueden utilizar aquellas fuentes que habitualmente se encuentran en los equipos de los usuarios. En caso de que una pgina Web demande el uso de una tipografa que no existe en el equipo cliente, el navegador la substituye por la fuente considerada por defecto, alterando de esta manera el diseo establecido para el documento. La consecuencia directa de esta limitacin es que todos los diseadores se limitan a utilizar aquellas fuentes que casi todos los usuarios tienen instaladas en sus equipos que suelen ser Arial, Verdana, Tahoma, Courier, Times New Roman o Georgia. En el estndar CSS2 se defini una propiedad @font-face que permita describir las fuentes que utiliza una pgina Web, pero esta propiedad se anul en la versin CSS2.1. CSS3 ha vuelto a recuperar esta directiva en el mdulo llamado Web Fonts dejando va libre al uso de cualquier fuente siempre que sta est instalada en el servidor. El formato de la directiva @font-face es la siguiente:
@font-face{ font-family: nombre_fuente; src: source; [font-weight: peso]; [font-style: estilo]; }

Donde nombre fuente es el nombre que se utilizar como alias de la tipografa source es la ruta del servidor donde se encuentra el archivo de la tipografa, puede haber ms de una ruta separada por comas peso es el grado de oscuridad y el grosor de la fuente de la fuente (esta propiedad es opcional), puede tener los siguientes valores: normal | bold | bolder | lighter estilo es el estilo que se le debe aplicar al tipo de letra (esta propiedad es opcional), puede contener los siguientes valores: normal | italic | oblique

Se debe crear una directiva @font-face para cada fuente que se desee descargar del servidor para utilizar en un documento Web.

CSS3

19

La propiedad font-weight determina el grosor de la fuente sus valores habituales son: normal | bold | bolder | lighter. La propiedad font-style permite modificar la fuente para que el texto se muestre en cursiva u oblicua, sus valores habituales pueden ser: normal | italic | oblicua. Para utilizar la fuente definida con @font-face tan slo es necesario utilizar la propiedad font-family para referenciarla.
selector { font-family: nombre_fuente; }

Se puede modificar el tamao de la fuente utilizando la propiedad CSS font-size, esta propiedad permite utilizar las siguientes unidades:
Unidades absolutas pulgadas (in). Una pulgada=2.54 cm. centmetros (cm). milmetros (mm). puntos (pt). Un punto=1/72 de pulgada. picas (pc). Una pica=12 puntos

Unidades relativas em. Es relativo al tamaode la M de la fuente instalada. ex: Es relativo a la altura de la x minscula de la fuente utilizada. px. Es un pxel y es relativo a la resolucin de la pantalla.

EJEMPLO
La siguiente pgina Web muestra un texto donde se aplican estilos CSS3 con fuentes personalizadas: Cake.ttf y East-Side-Italic.ttf.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Documento sin ttulo</title> <style> @font-face { font-family: Titulo; src: url(Cake.ttf); font-weight:bold;} @font-face { font-family: Parrafo; src: url(East-Side-Italic.ttf);} h1 { font-family: Titulo;} div {font-family: Parrafo;} </style> </head> <body> <h1>Probando fuentes</h1> <div> CSS3 describe cmo se especifican las propiedades de fuente y la cantidad de recursos de fuentes que se cargan de forma dinmica.... </div> </body> </html>

CSS3

20

Resultado

Se pueden descargar fuentes gratuitas en la red en mltiples direcciones Web, por

ejemplo: http://www.letramania.com/ http://www.fontreactor.com/

Descarga una fuente Amaze.ttf, SecretAgent.ttf para implementar una Web con un
prrafo de texto y dos niveles de ttulos (h1 y h2). Los ttulos deben tener una fuente y el texto del prrafo otra.

SELECTORES
La versin CSS 3 aporta nuevos selectores, pseudo-clases y pseudo-elementos. La lista provisional de novedades y su explicacin detallada se puede encontrar en el mdulo de selectores de CSS 3 http://www.w3.org/TR/css3-selectors/
Patrn * E E [foo] E [foo = "bar"] E [foo ~ = "bar"] Significado cualquier elemento un elemento de tipo E un elemento E con un atributo "foo" un elemento E cuyo atributo "foo" = "bar" un elemento E cuyo atributo "foo" es una lista de valores separados por espacios en blanco, uno de los cuales es exactamente igual a "bar" un elemento E cuyo atributo "foo"comienza exactamente con la cadena "bar" un elemento E cuyo atributo "foo" termina exactamente con la cadena "barra" un elemento E cuyo atributo "foo" contiene la subcadena "bar" un elemento E cuyo atributo "foo" tiene una lista de valores desde (la izquierda) separados por el guin con "es" un elemento E, la raz del documento, equivalente a el elemento html del HTML 4 Se describe en la seccin Selector universal Selector de tipo Selectores de atributo Selectores de atributo Selectores de atributo

E [foo ^ = "bar"]

Selectores de atributo

E [$ foo = "bar"]

Selectores de atributo

E [foo * = "bar"] E [foo| = "en"]

Selectores de atributo Selectores de atributo

E:root

Pseudo-classes estructurales

CSS3

21

E:nth-child(n) E:nth-Last-child(n) E:nth-of-type(n) E:nth-Last-of-type(n) E:first-infantil E:last-infantil E:first-de- type E:last-de- type E: only-child E: only-of- type E:Empty E:link E:visited E:actived E:hover E:focus E:target E:lang(fr)

un elemento E, el hijo n-simo de su padre un elemento E, el hijo n-simo de su padre, contando desde el final un elemento E, el hermano n-simo de su tipo un elemento E, el hermano n-simo de su tipo, contando desde la ltima un elemento E, primer hijo de su padre un elemento E, ltimo hijo de su padre un elemento E, hermano primero de su tipo un elemento E, ltimo hermano de su tipo un elemento E, que es hijo nico de su padre un elemento E, que es nico hermano de su tipo un elemento E que no tiene hijos (incluyendo nodos de texto) un elemento E de tipo hiperlink no visitado (: link) o ya visitado (:visited) un elemento E durante ciertas acciones de usuario un elemento E que es el destino de una referencia URI un elemento de tipo E en lenguaje "fr" (el lenguaje del documento especifica cmo se determina el idioma) un elemento de la interfaz de usuario E que est activado o desactivado un elemento de la interfaz de usuario E que se chequea (por ejemplo un botn de opcin o la casilla de verificacin) la primera lnea con formato de un elemento E la primera letra con formato de un elemento E contenido generado antes de un elemento E contenido generado despus de un elemento E un elemento E cuya clase es "warning" (el lenguaje del documento especifica cmo se determina la clase). un elemento E con ID igual a "myid". un elemento E que no coincide con el selector simple s

Pseudo-classes estructurales Pseudo-classes estructurales Pseudo-classes estructurales Pseudo-classes estructurales Pseudo-classes estructurales Pseudo-classes estructurales Pseudo-classes estructurales Pseudo-classes estructurales Pseudo-classes estructurales Pseudo-classes estructurales Pseudo-classes estructurales Los pseudo-classes de enlace Las pseudo-classes de accin de usuario La pseudoclase de destino El: lang() pseudoclase

E: enabled E: disabled E: checked

El elemento de la interfaz de usuario Estados pseudo-classes El elemento de la interfaz de usuario Estados pseudo-classes El:: pseudo-element de primera lnea El:: primera letra pseudoelement El:: antes de pseudoelement El:: despus de pseudoelement Selectores de clase

E::first-line E::first-letter E::before E::After E.warning

E#myid E:not(s)

Selectores de ID Pseudoclase de negacin

CSS3

22

EF E>F E+F E~F

un elemento F descendiente de un elemento E un elemento hijo F de E un elemento de F precedido por un elemento E un elemento de F precedido por un elemento E

Combinador descendiente Combinador de nio Combinador de hermanos adyacentes Combinador de hermano general

CSS3

23

REFERENCIA CSS3

CSS3

24

COMPATIBILIDAD DE CSS 3 CON LOS NAVEGADORES

Aunque CSS3 est todava en fase de desarrollo, los selectores que se mencionarn a continuacin pueden ser utilizados ya en algunos navegadores. Safari en particular da un extenso soporte a estas nuevas funciones de CSS3. Lamentablemente, el porcentaje de usuarios de este navegador no es muy alto aunque est en constante crecimiento. Al contrario que en el caso de Safari, Firefox tiene un nmero elevadsimo de usuarios y desde su versin 3.1 ya da soporte a una amplia gama de funcionalidades en CSS3. Google Chrome da a CSS3 ms o menos el mismo soporte, en cuanto a funcionalidad se refiere, que Safari. Y adems cabe tener en cuenta que desde su lanzamiento muchos usuarios de Windows lo han reeemplazado por Internet Explorer. La cara negativa de la moneda una vez ms, es Internet Explorer, cuyos usuarios no podrn disfrutar de esta nueva funcionalidad hasta que Explorer 9 est en el mercado. Para analizar al compatiblidad del navegador utlizado con HTML5, CSS3 ir a http://haz.io/ Para ver una tabla compatibilidad de todos los navegadores con las propiedades CSS3 actualizada ir a http://caniuse.com/#

CSS3

25

FUENTES
http://www.desarrolloweb.com Desarrollo Web, Tu mejor ayuda para aprender a hacer webs. http://www.css3.info CSS3 . Info - All you ever needed to know about CSS3 http://www.cssblog.es CSSBlog ES - /* El mejor recurso para enriquecer tu estilo */ http://playground.html5rocks.com HTML5 Playground

Enlaces interesantes:
Para hacer mens: http://almacenplantillasweb.es/2009/11/menu-css-tutoriales-interesantes/ Colores en CSS3: http://www.slideshare.net/LeaVerou/colors-in-css3 Generador de efectos CSS3: http://almacenplantillasweb.es/2010/04/css3-y-html5-recursos-de-disenoweb/ 15 trucos CSS3 en divs, texto e imgenes: http://soycachanilla.com/2010/08/15-trucos-css3-en-divs-texto-eimagenes.html Men desplegable de CSS3: http://www.developer.zeandesign.net/431/desarrollo/menu-desplegable-decss3/ 6 herramientas tiles paras los estilos CSS3: http://www.cosassencillas.com/articulos/6-herramientas-utiles-para-losestilos-css3 Qu se puede hacer con CSS: http://foro.ucoz.es/forum/5-268-8 Tutorial http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=html5#05 Degradados http://www.desarrolloweb.com/articulos/degradado-css-3.html http://www.desarrolloweb.com/articulos/degradado-lineal-css3.html http://tools.dynamicdrive.com/gradient/ Gradientes http://vagabundia.blogspot.com/2010/05/usando-gradientes-en-losenlaces.html Usando gradientes en las imgenes http://gradcolor.com/css3-gradient.php CSS3 gradient generator

CSS3

26