Manual CSS3

1º DAW - IES Julio Verne
IES Julio Verne

Fundamentos básicos del CSS3
Jose Manuel Guisado Hormigo
1
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
2
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 Background-origin Color HSL Text-shadow

Border-image Background-clip Color HSLA Text-overflow
Border-radius Background-size Color RGBA Ruptura de palabras
Box-shadow Múltiples imágenes Opacidad
Interfaz Selectores Cajas Otros
Box-sizing Cambio de sintaxis. Overflow-x Media queries

Resize Not() Overflow-y Múltiples columnas
Outline ::selection Web Fonts
Nav-top
Nav-right
Nav-left
Nav-bottom
3
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.
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
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
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;
Ejemplo
#caja1{
width: 300px;
height: 200px;
border-width: 10px;
border-radius: 5px 70px 20px 60px;
background: #A775A3;
}
Resultado
6
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.
Ejemplo
#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;
}
Resultado
7
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%.
Ejemplo
#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);
}
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
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
Ejemplo
#caja1{
width: 100px;
height: 200px;
border-width: 1px;
background: #CCC;
word-wrap: break-word;
}
Resultado
9
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.
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 más información: http://www.w3.org/TR/css3-multicol/
10
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
Ejemplo
#caja1 {
width: 200px;
height: 200px;
border: solid 3px #000;
box-shadow: 5px -9px 3px RGBA(85, 85, 85, 0.8);
}
11
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
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.
Ejemplo
#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);
}
Resultado
Normal :Hover
12
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.
Ejemplo
#caja1 {
width: 200px;
height: 200px;
background-color: #333;
box-shadow: inset 10px 10px 15px RGBA(200, 200, 200, 0.8);
}
Resultado
13
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
14
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
15
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.
Ejemplo
@font-face{
Font-family: Vivaldi;
Font-style: normal;
Font-weight: normal;
Src: url(VIVALDI.eot);
}
#caja1 {
Font-family: Vivaldi;
}
Resultado
16
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.
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 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/
17
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.
18
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.
19
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
20
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 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.
21
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.
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) 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.
22
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.
Ejemplo
/* Las siguientes reglas alternan cuatro estilos diferentes para los párrafos */
p:nth-child(4n+1) { ... }
23
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.
24

Manual CSS3

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual CSS3

Cargado por

Copyright:

Formatos disponibles

1º DAW - IES Julio Verne

1º DAW - IES Julio Verne

IES Julio Verne

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

1. ¿Qué hay de nuevo en CSS3?

Más control sobre la forma

El principal objetivo de CSS es separa el contenido del formato y ya se consiguió en la

En la siguiente tabla se muestra un resumen de las nuevas propiedades que existen

Bordes Fondos Color Texto

Border-color Background-origin Color HSL Text-shadow

Interfaz Selectores Cajas Otros

Box-sizing Cambio de sintaxis. Overflow-x Media queries

2. Atributo gradiente de colores en borde en firefox

Esta propiedad no aparece en el nuevo estándar de la W3C, por lo tanto no se puede

Los atributos de gradiente de colores en borde son:

Tendremos que tener en cuenta que el ejemplo solo se verá correctamente en

En CSS3 tenemos la propiedad border-radius, que nos permite definir bordes

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

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

4. Múltiples imágenes de fondo

Con CSS3 han solventado ese problema modificando la etiqueta background y

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

El canal Alfa es un valor entre 0 y 1, siendo 0 totalmente transparente y 1 totalmente

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

rgba(250, 125, 0, 0.5);

6. Ruptura de palabras (Word-Wrap)

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

Este atributo tiene dos posibles valores: normal o break-word

Para crear esta estructura multicolumna utilizaremos varios atributos.

 Column-width: Para definir el ancho de las distintas columnas.

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

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

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

Desplazamiento horizontal: En el ejemplo anterior, la sombra se colocará 5px a la

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

Color de la sombra: El último atributo que se indica es el color. Generalmente en el

En el siguiente ejemplo hemos usado un color RGBA, que a mi parecer, da un mejor

Este efecto lo podemos conseguir con el evento :hover.

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

Esto consiste en un difuminado en el interior de la caja pegado al borde, similar a la

El código que utilizaremos es similar al de la sombra, con su posición horizontal, su

Veamos un ejemplo para que resulte más claro.

10. Propiedad background-origin

Es el utilizado por defecto en CSS3. Significa que queremos colocar el origen de

11. Atributos overflow-x y overflow-y

La propiedad overflow, desde CSS2 nos permite añadir barras de desplazamiento en

Overflow-x y overflow-y tiene la misma función, con la diferencia que permiten

También habría que comentar que el comportamiento predeterminado del atributo

12. Introducción al @font-face

La sintaxis de @font-face es:

13. Sombras en texto (text-shadow)

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

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

Con esta sombra conseguiremos un efecto de texto en 3D.

14.2 Conceptos básico para las animaciones

Su sintaxis sería algo así:

14.3 Desplazamiento de un elemento

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

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

Los atributos de estilo para esta capa son los siguientes:

 Animation-name: nombre del fotograma clave.

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

14.4 Transformación de un elemento