css3 PDF

CSS 3 trae grandes novedades para el diseo de webs y algunos navegadores comienzan a implementar
CSS 3.
Por Miguel Angel Alvarez
Object 1
Desde que CSS comenz han pasado muchos aos y ya vamos por la especiicacin de CSS3! que
incorpora una serie de novedades que vamos a tratar de resumir en este art"culo.
Qu es CSS
Si no sabes lo que es CSS probablemente te interesar"a comenzar leyendo nuestro manual de CSS o la
seccin de CSS a ondo. #o obstante! cabr"a decir que CSS es un lengua$e para deinir el estilo o la
apariencia de las p%ginas web! escritas con &'() o de los documentos *(). CSS se cre para separar
el contenido de la orma! a la vez que permite a los diseadores mantener un control mucho m%s
preciso sobre la apariencia de las p%ginas.
Con CSS 3, ms control sobre la forma
+l ob$etivo inicial de CSS! separar el contenido de la orma! se cumpli ya con las primeras
especiicaciones del lengua$e. Sin embargo! el ob$etivo de orecer un control total a los diseadores
sobre los elementos de la p%gina ha sido m%s di"cil de cubrir. )as especiicaciones anteriores del
lengua$e ten"an muchas utilidades para aplicar estilos a las webs! pero los desarrolladores aun
contin,an usando trucos diversos para conseguir eectos tan comunes o tan deseados como los bordes
redondeados o el sombreado de elementos en la p%gina.
CSS - ya signiic un avance considerable a la hora de disear p%ginas web! aportando mucho mayor
control de los elementos de la p%gina. Pero como todav"a quedaron muchas otras cosas que los
diseadores deseaban hacer! pero que CSS no permit"a especiicar! .stos deb"an hacer uso de trucos
para el diseo. )o peor de esos trucos es que muchas veces implica alterar el contenido de la p%gina
para incorporar nuevas etiquetas &'() que permitan aplicar estilos de una manera m%s elaborada.
Dada la necesidad de cambiar el contenido! para alterar al diseo y hacer cosas que CSS no permit"a! se
estaba dando al traste con alguno de los ob$etivos para los que CSS ue creado! que era el separar por
completo el contenido de la orma.
CSS / incorpor algunas novedades interesantes! que hoy ya utilizamos habitualmente! pero CSS 3
todav"a avanza un poco m%s en la direccin! de aportar m%s control sobre los elementos de la p%gina.
0s" pues! la novedad m%s importante que aporta CSS 3! de cara a los desarrolladores de webs! consiste
en la incorporacin de nuevos mecanismos para mantener un mayor control sobre el estilo con el que se
muestran los elementos de las p%ginas! sin tener que recurrir a trucos o hac1s! que a menudo
complicaban el cdigo de las web.
Propiedades nuevas en CSS 3
&e aqu" una lista de las principales propiedades que son novedad en CSS3.
Bordes
border2color
border2image
border2radius
bo32shadow
ondos
bac1ground2origin
bac1ground2clip
bac1ground2size
hacer capas con m,ltiples im%genes de ondo
Color
colores &S)
colores &S)0
colores 4560
7pacidad
!e"to
te3t2shadow
te3t2overlow
4otura de palabras largas
8eb 9onts
#nterfaz
bo32sizing
resize
outline
nav2top! nav2right! nav2bottom! nav2let
Selectores
Selectores por atributos
Modelo de ca$a bsico
overlow23! overlow2y
%egradados CSS3
Degradados lineales
Degradados radiales
Degradados lineales de repeticin
Degradados radiales de repeticin
&tros
media queries
creacin de m,ltiples columnas de te3to
propiedades orientadas a discurso o lectura autom%tica de p%ginas web
animaciones CSS3
Parte de este listado de nuevas propiedades de CSS 3 lo he sacado de: http:;;www.css3.ino;preview;.
+s un sitio en ingl.s! pero puede estar bien visitar para ir conociendo m%s detalles sobre CSS 3. Sin
embargo! en ese sitio altaban algunas cosas como los degradados o las animaciones! por lo menos
cuando lo visitamos! por lo que hemos completado para la realizacin de este "ndice.
+n uturos art"culos oreceremos algunas claves y e3plicaciones sobre varias de estas propiedades! al
menos las m%s interesantes! as" como e$emplos que sirvan para ir conociendo esta nueva especiicacin
de CSS. 'odo ello lo iremos colocando en el (anual de CSS 3.
Posibilidad de deinir el un gradiente de color en el borde de los elementos con CSS! en un atributo no
est%ndar de 9ireo3.
Object 2
<nvestigando un poco con algunas de las propiedades nuevas que va a traer CSS 3! para completar la
inormacin del art"culo <ntroduccin a CSS 3 ! he dado con un atributo para cambiar el color del borde
de los elementos de la p%gina! que nos permite deinir el color con una sucesin de distintos valores de
colores. +n la actualidad! con CSS podemos deinir por separado los colores del borde de un elemento!
de arriba! derecha! aba$o e izquierda. Pero no nos reerimos a poder dar un color por separado para cada
parte del borde! sino aplicar varios colores distintos a una parte! por e$emplo a la parte de arriba del
borde.
+sta propiedad la he visto comentada en alg,n lugar como de CSS 3! pero seg,n veo en el borrador de
la especiicacin de CSS 3 para bordes y ondos! publicado por el 83C! no aparece esta nueva
caracter"stica como parte del nuevo est%ndar.
Por ello! habr"a que matizar que esta propiedad no es de CSS 3! sino que se trata de un atributo no
est%ndar de CSS! creado por (ozilla y que! por tanto! se puede ver en su navegador m%s conocido:
9ireo3. Dicho de otra orma! es una e3tensin de CSS realizada por (ozilla. +n la p%gina de (ozilla
podemos encontrar m%s inormacin sobre esta e3tensin de CSS:
https:;;developer.mozilla.org;en;CSS;2moz2border2bottom2colors
)os atributos a los que nos reerimos! que permiten deinir varios colores para cada una de las partes
del borde! son los siguientes:
2moz2border2top2colors
2moz2border2right2colors
2moz2border2bottom2colors
2moz2border2let2colors
+n cada uno de los atributos se deine el color! pudiendo especiicar una lista de colores! separados por
espacios! que se aplicar%n a cada una de las partes del borde! de dentro hacia uera. Claro que el borde
tiene que tener una anchura mayor que - para que se vean los distintos colores. Con una anchura de /
pi3el se podr%n ver / colores distintos! con una anchura de 3 podremos deinir 3 colores y as"
sucesivamente.
Para ver una de las posibilidades que dar"a el uso de este atributo podemos ver un e$emplo en una
p%gina aparte. =Pero tener en cuenta que slo lo ver.is correctamente en 9ireo3>.
+l cdigo para crear ese gradiente de colores ser"a el siguiente:
?style type@Ate3t;cssAB
.coloresbordeC
border2style: solidD
border2width: -Ep3D
2moz2border2top2colors: FccGG FbbHH FaaII FGGJJ FHHKK FIILL FJJ33 FKK// FLL--
F33EED
2moz2border2right2colors: FccGG FbbHH FaaII FGGJJ FHHKK FIILL FJJ33 FKK// FLL--
F33EED
2moz2border2bottom2colors: FccGG FbbHH FaaII FGGJJ FHHKK FIILL FJJ33 FKK//
FLL-- F33EED
2moz2border2let2colors: FccGG FbbHH FaaII FGGJJ FHHKK FIILL FJJ33 FKK// FLL--
F33EED
M
?;styleB
+s una pena que sea un atributo ,nicamente desarrollado por (ozilla! aunque si el soporte a estos
atributos se lleva a cabo por m%s navegadores y la 83C lo tiene a bien! quiz%s en alg,n momento se
convierta en un est%ndar de CSS.
Por el momento no vale para mucho m%s que una mera curiosidad y posibilidad de personalizacin
especial para los usuarios de 9ireo3 y otros navegadores basados en (ozilla.
)as caracter"sticas de CSS 3 incluyen bordes redondeados! a trav.s del atributo border2radius! que
deine la curvatura que debe tener el borde del elemento.
Object 3
CSS 3 incorpora nuevas propiedades para el control de bordes de los elementos. 0hora se permiten
bordes con las esquinas redondeadas! bordes con im%genes =incluso varias im%genes se pueden utilizar
para deinir el aspecto del borde>! sombras! etc.
+n este art"culo vamos a e3plicar cmo realizar bordes redondeados con CSS3.
'enemos la propiedad border'radius! que permite deinir bordes redondeados en las esquinas!
especiicando las medidas del radio que deben darse a la curva de las esquinas. Su uso ser"a
apro3imado al que vemos a continuacin:
border2radius: Kp3D
Deinir"a un radio de K p"3eles en el redondeo de las esquinas del elemento. Por el momento (ozilla ha
adoptado este atributo con un nombre especial! que es v%lido para productos como 9ireo3! mientras
que las especiicaciones de CSS3 no hayan alcanzado el estado ACandidate 4ecommendationA! que es
cuando se supone que los distintos navegadores deben implementarlas. +l nombre del atributo por el
momento es:
2moz2border2radius
)os navegadores basados en 8ebNit! como 5oogle Chrome o Saari! tambi.n soportan las esquinas
redondeadas de CSS 3! pero el atributo border2radius tampoco unciona directamente! como en el caso
de 9ireo3! sino que hay que utilizar un AaliasA: 2web1it2border2radius.
Por lo que respecta a <nternet +3plorer hay que decir que todav"a no soporta este atributo de CSS 3!
pero esperemos que los chicos de (icrosot lo puedan implementar pronto en el navegador! o que las
especiicaciones de CSS3 pasen r%pido al estado ACandidate 4ecommendationA! que ser"a el
llamamiento para que se implementen en la generalidad de los navegadores.
Por el momento! para navegadores (ozilla y 8ebNit que son los primeros en adaptarse a CSS3!
podemos utilizar el atributo border2radius de la siguiente manera:
D<O C
border: -p3 solid FEEEEEED
2moz2border2radius: Ip3D
2web1it2border2radius: Ip3D
padding: -Ep3D
M
Con esto conseguimos que todos los div tengan un borde redondeado en las esquinas de radio de I
p"3eles. 9i$arse en el uso de los atributos 2moz2border2radius y 2web1it2border2radius! que sirven para
lo mismo! pero en navegadores basados en (ozilla y basados en 8ebNit.
Podemos ver el e$emplo en una p%gina aparte. Pero recordar que slo se ver% el eecto utilizando
9ireo3 o navegadores basados en (ozilla.
Pero el atributo border2radius tiene otras posibles coniguraciones! en la que se pueden deinir los
valores para el radio de las cuatro esquinas por separado. De esta manera:
2moz2border2radius: Ip3 /Ip3 -EEp3 Ep3D
0s" estar"amos deiniendo un borde redondeado con radio de I pi3el para la esquina superior izquierda!
luego /Ip3 para la esquina superior derecha! de -EEp3 para la inerior derecha y Ep3 para la inerior
izquierda. =&ay que e3plicar que un border2radius de Ep3 es un borde con esquina en %ngulo recto>
Podemos ver este e$emplo en una p%gina aparte.
)os bordes redondeados con CSS 3! como se podr% imaginar! slo se ven si se tiene deinido alg,n
borde visible al elemento que se los asignamos! ya sea solid! dotted! etc. +so es lo que deinen las
especiicaciones de CSS3! aunque en el momento de escribir el art"culo debo sealar que incluso
(ozilla o 9ireo3 =el ,nico que por ahora soporta este atributo de CSS3> no unciona del todo
correctamente con esto y slo muestra los bordes redondeados con solid.
7tra cosa que deinen las especiicaciones de CSS y que por el momento no est% uncionando del todo
bien! es que las im%genes de ondo deben a$ustarse a los bordes redondeados. 7curre! por el momento!
que las im%genes de ondo salen por uera de los bordes redondeados. Coniamos en que en el uturo
esto pueda ser revisado y optimizado! para que todo uncione correctamente. Debemos recordar que en
el momento de escribir el art"culo todav"a se tienen que terminar de deinir las especiicaciones de CSS
3 y despu.s! los navegadores web deber%n actualizarse en un cierto espacio de tiempo para soportarlas
completamente.
Cmo conseguir que un elemento de la p%gina tenga varias im%genes de ondo a la vez! con CSS b%sico
y con caracter"sticas de CSS 3.
Object 4
Con el atributo bac1ground2image podemos conseguir que un elemento de la p%gina tenga un ondo de
imagen. +sto debemos saberlo! puesto que es algo b%sico de las ho$as de estilo en cascada =CSS>. Pero
en este art"culo de Desarrollo8eb.com vamos a mostrar cmo podr"amos conseguir que un elemento de
la web tuvisese varias im%genes de ondo al mismo tiempo. Colocar varias im%genes de ondo a un
elemento en principio no se puede con CSS! por lo que mostraremos cmo hacerlo con una sencilla
t.cnica alternativa. Pero tambi.n veremos que en CSS 3 e3iste la posibilidad de conigurar varios
ondos al mismo tiempo en un elemento! con una declaracin de bac1ground2image y sin necesidad de
realizar ning,n tipo de t.cnica alternativa.
(eferencia) Para conocer un poco de la reciente especiicacin de CSS3 os vendr% bien leer el art"culo
<ntroduccin a CSS 3.
+n CSS normal =CSS ->! como hemos dicho! podemos colocar un ,nico ondo a un elemento de la
p%gina. +sto es algo soportado por todos los navegadores. Como no podemos poner m%s de - ondo por
elemento! para colocar varios ondos al mismo tiempo! tenemos que utilizar varios elementos. 0 cada
elemento le colocaremos un ,nico ondo! pero al mostrarse los elementos en el mismo espacio!
conseguiremos el eecto deseado de tener varios ondos de imagen a la vez.
+n nuestro caso! vamos a utilizar varias capas D<O anidadas y cada una tendr% su ondo de imagen.
+l cdigo &'() que utilizar"amos para anidar varias capas D<O ser"a como sigue:
?div id@Aondo-AB
?div id@Aondo/AB
?div id@Aondo3AB
contenido del elemento que va a tener 3 ondos de imagen distintos
...
?;divB
?;divB
?;divB
Como se ha visto! podemos anidar varias capas D<O y cada una tendr% un identiicador! o si lo
preerimos una clase! para asignar estilos por CSS. 0l estar anidados! todos los elementos D<O se
mostrar%n uno encima del otro.
0hora veamos el cdigo CSS para darle ondos a cada uno de estos elementos D<O:
Fondo-C
bac1ground2image: url=ondo-.gi>D
width: 3EEp3D
M
Fondo/C
bac1ground2image: url=ondo/.png>D
bac1ground2repeat: no2repeatD
bac1ground2position: bottom rightD
M
Fondo3C
bac1ground2image: url=ondo3.png>D
bac1ground2repeat: no2repeatD
bac1ground2position: centerD
M
?;styleB
)os ondos se superpondr%n unos a otros! siendo el ondo- el que se vea m%s aba$o y el ondo3 el que
se ver% m%s arriba.
+l resultado de este e$emplo se puede ver en una p%gina aparte.
+n principio todos los navegadores visualizar%n perectamente los ondos! pero como he utilizado
im%genes transparentes en ormato P#5 e <nternet +3plorer J tiene problemas con la transparencia de
los archivos P#5! podemos encontrar alg,n deecto! pero los ondos de los elementos D<O se ver%n.
Colocar varios fondos de imagen a un elemento con CSS 3
Pna de las nuevas caracter"sticas de CSS 3 consiste en la posibilidad de declarar varios ondos de
imagen a un elemento de la p%gina. )o que antes hemos visto que es posible! creando varios elementos
anidados y colocando un ondo en cada uno! se puede hacer en CSS 3 con un solo elemento! al que
aplicaremos varios ondos distintos.
+l &'() del e$emplo de varias im%genes de ondo ser"a el siguiente:
?div id@AondosAB
te3to de un ,nico elemento
...
?;divB
0hora veamos el CSS 3 v%lido para este e$emplo:
FondosC
bac1ground: url=ondo3.png> bottom right no2repeat!
url=ondo/.png> center no2repeat!
url=ondo-.gi> center repeatD
width: 3EEp3D
M
?;styleB
Slo cabe comentar que las distintas im%genes de ondo se tienen que escribir en la declaracin CSS
separadas por comas. 0dem%s! las im%genes que declaramos se van colocando de modo que la primera
aparece sobre las siguientes. 0s" pues! en esta declaracin! ondo-.gi! que est% colocada como ,ltimo
ondo! es la que aparece detr%s del todo.
De momento! la posibilidad de incluir varios ondos de imagen a un elemento slo est% disponible en el
navegador Saari! pero esperemos que pronto otros navegadores vayan incorporando esta uncionalidad
de CSS 3.
+ste e$emplo se puede ver en una p%gina aparte.
Oeremos qu. son los colores 4560 y su notacin! que se incluyen en la especiicacin de &o$as de
+stilo en Cascada CSS 3.
Object 5
Como sabemos! los colores en &'() se e3presan en valores 456! igual que en CSS! que admite
diversas notaciones para deinir el color! a trav.s de n,meros en he3adecimal e incluso en decimal.
'odo esto suponemos no ser% un misterio para los lectores! que sin duda habr%n e3perimentado con
CSS y probablemente est.n amiliarizados con las distintas notaciones para especiicar color en las
ho$as de estilo.
0hora queremos hablar de una nueva notacin! que no es simplemente una manera nueva de e3presar
lo mismo! sino una que nos permite deinir colores por medio de valores adicionales. Se trata de la
notacin 4560! que a partir de CSS 3 est% disponible para los desarrolladores.
)a notacin 4560 es una manera de especiicar colores en la que se deinen cuatro valores. )os tres
primeros son los bien conocidos canales 456 =ro$o! verde y azul> y el cuarto par%metro es el canal
0lpha! que no es m%s que el grado de transparencia u opacidad del color. +l canal 0lpha es un valor
entre cero y uno! siendo E totalmente transparente y - totalmente opaco.
+n el mundo del diseo quiz%s ya habremos visto otros ormatos o sistemas que soportan colores con
canal 0lpha y por ello puede que estemos amiliarizados con este par%metro. +l ormato de imagen
P#5! que tanto nos gusta por soportar transparencia que se ve correctamente en todos los ondos
posibles! implementa $ustamente este canal alpha en la deinicin del color para conseguir una
transparencia ideal.
0hora! por medio de los colores en 4560 en CSS 3! podremos aplicar nuevas transparencias a los
colores que especiicamos con CSS! abriendo nuevas posibilidades a los diseadores sin necesidad de
complicarse con pequeos trucos como el uso de im%genes de ondo semitransparentes en P#5! etc.
0dem%s! como los colores 4560 se pueden aplicar a cualquier elemento que soporte asignacin de
color! las aplicaciones aumentan todav"a m%s. +l ,nico pero! al menos a la hora de escribir este art"culo!
es que CSS 3 no est% ampliamente soportado por todos los navegadores. Por e$emplo <nternet +3plorer
H no lo soporta por el momento.
*ota) +n Desarrollo8eb.com hemos publicado varios art"culos sobre CSS 3! que se pueden acceder
desde el siguiente enlace: introduccin a CSS3.
*otaci+n de color (,BA
Para deinir un color 4560! se deben especiicar cuatro valores! de la siguiente manera:
rgba=/KK! -/K! E! E.K>D
)os tres primeros valores son n,meros en sistema decimal! que corresponden con los valores de ro$o!
verde y azul. Siempre tienen que ser n,meros entre E y /KK.
+l cuarto valor es un n,mero entre E y -. Por e$emplo E ser"a totalmente transparente! - ser"a totalmente
opaco y E.K ser"a una transparencia al KEQ! es decir! mitad opaco mitad transparente.
-$emplos de estilos CSS con colores definidos por (,BA
0hora veamos varios e$emplos de colores deinidos con CSS y la notacin 4560.
?div style@Abac1ground2color: rgba=E! E! /KK! E.->DAB+sta capa tiene ondo azul! casi
transparente?;divB
?span style@Acolor: rgba=E!/KK!E!E.H>DAB+ste te3to es verde y tiene un poco de transparencia?;spanB
Pero aparte de estos e$emplos! lo ideal es ver el eecto de transparencia en marcha! para poder hacernos
una idea m%s apro3imada de las posibilidades. Para ello hemos construido una p%gina donde se
muestran varias capas con colores y transparencias! tanto en el ondo como en el te3to.
Oer e$emplo de colores CSS 4560.
Pero nuevamente llamamos la atencin de los lectores sobre el hecho que! dependiendo del navegador
que se utilice! se ver%n o no los distintos colores! puesto que las CSS 3 no son compatibles con todos
los sistemas. +ste e$emplo uncionar% bien en navegadores que cumplen los est%ndares! como 9ireo3!
Chrome o Saari! pero no en navegadores como <nternet +3plorer! que hacen la guerra por su cuenta.
+l cdigo del anterior e$emplo es el siguiente:
?htmlB
?headB
?titleBColores 4560 con CSS 3?;titleB
div.cuadradoC
width: -KEp3D
height: LEp3D
border: -p3 solid FddddddD
margin: Kp3D
M
div.te3tograndeC
ont2amily: verdana! arial! helveticaD
ont2weight: boldD
ont2size: LEptD
M
?;styleB
?;headB
?bodyB
?h-BColores 4560 con CSS 3?;h-B
?h/B+$emplo de capas con ondo azul y varias transparencias?;h/B
?div class@AcuadradoA style@Abac1ground2color: rgba=E! E! /KK! E.->DAB?;divB
?div class@AcuadradoA style@Abac1ground2color: rgba=E! E! /KK! E.L>DAB?;divB
?div class@AcuadradoA style@Abac1ground2color: rgba=E! E! /KK! E.I>DAB?;divB
?div class@AcuadradoA style@Abac1ground2color: rgba=E! E! /KK! ->DAB?;divB
?h/B+$emplo de capas con ondo verde y varias transparencias! sobre una capa con ondo
amarillo?;h/B
?div style@Abac1ground2color: F3D padding: -Ep3DAB
?div class@AcuadradoA style@Abac1ground2color: rgba=E! /KK! E! E.->DAB?;divB
?div class@AcuadradoA style@Abac1ground2color: rgba=E! /KK! E! E.L>DAB?;divB
?div class@AcuadradoA style@Abac1ground2color: rgba=E! /KK! E! E.I>DAB?;divB
?div class@AcuadradoA style@Abac1ground2color: rgba=E! /KK! E! ->DAB?;divB
?;divB
?h/B+$emplo de capas con ondo naran$a y varias transparencias! sobre una capa con una imagen de
ondo?;h/B
?div style@Abac1ground2image:
url=http:;;www.desarrolloweb.com;articulos;e$emplos;photoshop;ondo2nieve;nieve.gi>D padding:
-Ep3DAB
?div class@AcuadradoA style@Abac1ground2color: rgba=/KK! -/K! E! E.->DAB?;divB
?div class@AcuadradoA style@Abac1ground2color: rgba=/KK! -/K! E! E.L>DAB?;divB
?div class@AcuadradoA style@Abac1ground2color: rgba=/KK! -/K! E! E.I>DAB?;divB
?div class@AcuadradoA style@Abac1ground2color: rgba=/KK! -/K! E! ->DAB?;divB
?;divB
?h/B+$emplo de te3to de color ro$o y varias transparencias! sobre una capa con una imagen de
ondo?;h/B
?div style@Abac1ground2image:
url=http:;;www.desarrolloweb.com;articulos;e$emplos;photoshop;ondo2nieve;nieve.gi>D padding:
-Ep3DAB
?div class@Ate3tograndeA style@Acolor: rgba=/EE! E! E! E.3>DAB+ste te3to est% para que se vea que puede
ser tambi.n medio transparente?;divB
?div class@Ate3tograndeA style@Acolor: rgba=/EE! E! E! E.I>DAB+ste te3to est% para que se vea que puede
ser tambi.n medio transparente?;divB
?;divB
?;bodyB
?;htmlB
Si se permite mi opinin! es una pena que esta gestin de color con canal alpha no est. disponible en
<nternet +3plorer H! en el momento de escribir estas l"neas! porque as" se hace complicado usar este tipo
de eectos. #o obstante! es de suponer que las personas de (icrosot pondr%n al d"a su navegador un
ao de estos! para hacerlo compatible con las CSS 3 y los colores 4560.
Pna propiedad de CSS 3 que sirve para romper las palabras que son demasiado largas y no caben
enteras por la anchura de una ca$a.
Object 6
+stamos dando un repaso a las novedades que traer% la especiicacin CSS 3 y en este caso vamos a ver
una propiedad interesante que servir% para que ciertas palabras que son demasiado largas y no caben en
la anchura de una ca$a.
Como debemos saber! en el modelo de ca$a de los navegadores! las palabras se van colocando en l"neas
para ocupar toda la anchura disponible en la ca$a. Puede surgir un problema cuando tenemos una
palabra muy larga! que no cabe en el ancho disponible del contenedor donde se ha colocado. +ntonces
lo que ocurre es que la palabra aparece por uera de la ca$a! o incluso puede ocurrir que la ca$a se
deorma de tamao! haciendo que el elemento contenedor ampl"e la anchura lo suiciente para que
quepa la palabra. +n cualquier caso! el eecto resultante suele ser poco agradable! porque muchas veces
nos descuadra nuestro diseo y hace que las p%ginas queden mal maquetadas.
Para evitar este eecto! en CSS 3 se ha incluido un atributo llamado word2wrap que sirve para
especiicar que las palabras que sean demasiado largas se deben cortar! de manera que quepan en el
ancho disponible de la ca$a. Pna propiedad muy ,til que seguro que pronto se comenzar% a utilizarse
habitualmente.
&emos de agradecer a (icrosot la incorporacin de esta nueva propiedad de CSS 3! ya que el atributo
word2wrap comenz siendo una etiqueta no est%ndar de CSS! que estaba disponible en <nternet
+3plorer y debido a su utilidad! el 83C se decidi a incorporarla a la nueva especiicacin de este
lengua$e de estilo.
+l atributo word2wrap tiene dos posibles valores: normal o brea12word.
word2wrap: normalD
&ace que las palabras no se corten! lo que ser"a el comportamiento normal que conoc"amos hasta ahora!
ocurriendo que las palabras largas nos puedan descuadrar nuestro diseo.
0hora podemos ver una ca$a que ten"a una anchura de 3EE p3 y que por culpa de una palabra muy larga
se deorma la ca$a o el te3to aparece por uera.
+ste te3to entra bien en la capa! pero ahora vamos a colocar una palabra demasiado larga que no cabr%!
por lo que nos descuadrar"a el diseo:
wieiisidd$asdd$1$asdasdsaddssdssdsdsdsd1ald1adadsadadadadsad. +sta capa tiene 3EE p"3eles de
anchura y esa palabra! por tanto no cab"a y me descuadra todo.
word2wrap: brea12wordD
Con este otro valor de word2wrap: brea12word! lo que conseguimos es que la palabra se recorte! para
caber en el ancho que hab"amos deinido.
+ste atributo por ahora es soportado por <nternet +3plorer! Saari y 5oogle Chrome. 9ireo3 parece que
la incluir% a partir de su versin 3.-! que no ha sido lanzada todav"a en el momento de escribir este
art"culo de desarrollo web .com.
0hora veamos una ca$a donde hemos colocado el atributo para que recorte las palabras:
+sta otra capa tiene el atributo word2wrap: brea12word y por tanto va a recortar la siguiente palabra
para que quepa bien en la ca$a:
wieiisidd$asdd$1$asdasdsaddssdssdsdsdsd1ald1adadsadadadadsad. 0hora la capa no se ve
aectada por una palabra tan larga.
CSS 3 incorpora nuevos atributos para que el navegador se encargue de producir te3to multicolumna!
es decir! que maquete directamente el te3to en varias columnas sin tener que hacer nosotros nada.
Object 7
+n este art"culo vamos a tratar sobre las nuevas caracter"sticas de CSS para maquetacin autom%tica de
te3tos en columnas! que se encontrar%n disponibles cuando CSS 3 se implemente inalmente en los
navegadores. 0unque todo esto no pase de un estado e3perimental! lo cierto es que ya podemos
empezar a probarlo y utilizar en navegadores modernos! como muchas de las nuevas posibilidades que
estamos comentando sobre CSS 3
#umerosas publicaciones maquetan el te3to en diversas columnas! como criterio de diseo y para
acilitar la lectura. Podr"amos imaginarnos el te3to de los peridicos si no se encontrase dividido en
diversas columnas Rno ser"a casi imposible seguir las l"neas para hacer una lectura cmoda de la
inormacin si todo estuviera en una ,nica columnaS
+ste problema no lo encontramos generalmente en las p%ginas web! porque el te3to que cabe en el
cuerpo de la p%gina no es tan grande como el que cabr"a en una ho$a de un diario. 0dem%s!
generalmente la propia p%gina ya se encuentra dividida en diversas columnas. #o obstante! aunque
quisi.ramos! con las caracter"sticas de CSS / no ser"a muy %cil hacer un te3to lu"do que se adaptase
autom%ticamente en columnas! de modo que .stas crecieran homog.neamente a medida que el te3to
crece o se reduce. CSS 3 soluciona este problema! o m%s bien orecer% una solucin al mismo! sencilla
y autom%tica.
Para crear una estructura multi2columna utilizaremos varios atributos! que servir%n para modelizar las
columnas:
colum'.idt/) servir% para deinir la anchura de las distintas columnas a crear.
column'gap) nos permitir% deinir el espacio en blanco entre columnas.
column'rule) servir% para crear un ilete o l"nea divisoria entre las columnas.
+stas etiquetas por el momento no las soporta tal cual ning,n navegador. Sin embargo Saari! 5oogle
Chrome y 9ireo3 ya implementan el multicolumna! de manera e3perimental y hasta que las
especiicaciones de CSS 3 est.n dispuestas para incorporar en los navegadores. Para ello! podemos
utilizarlas si les ponemos un prei$o! que ser"a A2moz2A en el caso de 9ireo3 y A2web1it2A para el
navegador Saari o Chrome.
Pn e$emplo de multicolumna! para que uncione en estos navegadores ser"a:
.multicolumnaC
2moz2column2width: -KemD
2moz2column2gap: -Kp3D
2web1it2column2width: -KemD
2web1it2column2gap: -Kp3D
2web1it2column2rule: -p3 solid FcccD
2moz2column2rule: -p3 solid FcccD
M
7tra posibilidad para crear un multicolumna ser% deinir simplemente el n,mero de columnas que
querr"amos incorporar en el te3to! por medio del atributo column2count! de esta manera:
.multicolumnaKcolumnasC
2moz2column2count: KD
2moz2column2gap: /emD
2moz2column2rule: -p3 solid FccD
2web1it2column2count: KD
2web1it2column2gap: /emD
2web1it2column2rule: -p3 solid FccD
M
+speciicar el n,mero de columnas es quiz%s m%s cmodo! pero en p%ginas luidas puede uncionar
peor! porque no se sepa con certeza qu. anchura va a tener el lugar donde se muestran los te3tos y por
tanto unas veces queden columnas muy anchas y otras muy estrechas.
Podemos ver una p%gina aparte con los e$emplos mostrados de maquetacin en m,ltiples columnas.
Pero recordad que slo uncionar% en (ozilla 9ireo3! 0pple Saari y 5oogle Chrome.
+l sistema de m,ltiples columnas se est% encuentra en estado de borrador y orma parte de un mdulo
aparte dentro de las especiicaciones de CSS 3. Si se desea encontrar m%s inormacin sobre el tema en
la 83C se puede consultar la P4) http:;;www.w3.org;'4;css32multicol;
+speramos que estas caracter"sticas de CSS 3 se encuentren pronto disponibles! pues no cabe duda que
la distribucin por columnas nos abrir% nuevas e interesantes posibilidades para maquetacin de te3tos
en p%ginas web.
+l atributo border2image y varios otros de CSS 3 har%n posible la utilizacin de im%genes como bordes
de los elementos de la p%gina! sin cdigo &'() especial! simplemente con ho$as de estilo.
Object 8
Oamos a hablar r%pidamente sobre uno de los nuevos atributos de las CSS 3! que sirve para personalizar
los bordes de los elementos &'() con im%genes. Publicamos este art"culo dentro del (anual de CSS
3! que es una especie de compendio de e$emplos y t.cnicas que nos permitir% aplicar esta nueva
especiicacin de las &o$as de +stilo en Cascada.
De manera resumida! border2image es un atributo que nos ayudar% a aplicar nuevos estilos a las ca$as
con CSS! a trav.s de la utilizacin de im%genes en los bordes de los elementos! incluso pudiendo
escoger varias im%genes para varias de las partes de los bordes.
Colocar im%genes en los bordes es una tarea que ya se suele realizar en el diseo web! y para ello se
suelen utilizar complementariamente t.cnicas con los lengua$es &'() y CSS. +s decir! en el momento
de escribir este art"culo! para que un elemento de la p%gina! como puede ser una divisin o una tabla!
p%rrao! etc.! tenga un borde a partir de una imagen! se necesita colocar alg,n cdigo &'() adicional!
con alg,n contenedor que nos permita luego deinir estilos CSS para AimitarA ese borde de imagen. +n
cualquier caso! estemos o no amiliarizados con las t.cnicas de uso de im%genes en los bordes! lo
importante es que con CSS 3 vamos a poder hacer eso mismo simplemente escribiendo algunos nuevos
atributos a los elementos que deseemos.
%istintas especificaciones sobre border'image
)as especiicaciones de CSS 3 est%n en etapa de desarrollo. +l organismo 83C! que se encarga de
deinir los est%ndares de &o$as de +stilo en Cascada! ha alterado algunas veces las especiicaciones del
atributo border2image y relacionados. +s por ello que todav"a hay algunas dierencias entre lo que los
navegadores entienden con este atributo y lo que recomienda el 83C. +sto quiere decir que en el uturo
todav"a puede cambiar el uncionamiento de este atributo en los distintos navegadores! tal como
anuncia (ozilla en su centro de desarrollo.
Para las personas que deseen encontrar de primera mano las especiicaciones de los atributos para
poner borde en las im%genes! recomendamos la lectura del sitio de la 83C.
6orrador de traba$o sobre las propiedades de borde de imagen. #oviembre de /EE/
6orrador sobre borde de imagen. Diciembre /EEG
Como se podr% ver! e3isten bastantes dierencias y es que tambi.n ha pasado bastante tiempo entre una
y otra especiicacin. 0dem%s! la m%s actual de las dos tiene unas e3plicaciones basadas en esquemas
mucho m%s entendibles.
Del mismo modo! tenemos acceso a las especiicaciones que han puesto en marcha los m%s avanzados
navegadores! que implementan ya de manera e3perimental algunos de los atributos para crear bordes en
las im%genes.
Sitio para desarrolladores de (ozilla! sobre 6order <mage.
Sitio para desarrolladores de (ac y su navegador Saari.
-$emplo de border'image
0s" pues! para que sirva ,nicamente a modo de demostracin que es todo lo que se puede hacer por el
momento en este art"culo de Desarrollo8eb.com! vamos a poner un simple e$emplo sobre lo que
permiten a echa de hoy los navegadores Saari y 9ireo3 sobre border2image.
Por e$emplo! tendr"amos este elemento &'():
?div id@AcapabordeAB
+sta capa le voy a poner un borde arriba
?;divB
T ahora podr"amos aplicar estilos para crear un borde en la imagen:
FcapabordeC
2moz2border2image: url=sello.png> / / / / stretch stretchD
2web1it2border2image: url=sello.png> / / / / stretch stretchD
padding:/Ep3D
width: -EEp3D
M
Como se puede ver! los atributos para bordes de im%genes no tienen el nombre deinitivo! que ser%
border2image! sino unos propios para cada uno de los dos navegadores que implementan esta nueva
caracter"stica de CSS 3. +l atributo 2moz2border2image es para el navegador 9ireo3 y otros productos
de la compa"a (ozilla y el atributo 2web1it2border2image es para cualquier navegador basado en
8ebNit! como Saari o Chrome.
)a im%gen que estamos utilizando como borde es la siguiente:
T el e$emplo se puede ver en marcha en una p%gina aparte! pero recordar que depende de vuestro
navegador podr.is ver o no el borde de imagen.
&tros atributos para /acer borde con imgenes
0 parte del atributo border2image! e3isten otros numerosos atributos para deinir los bordes de manera
independiente para cada uno de los lados o v.rtices de un elemento &'(). Uuiz%s conviene esperar un
poco antes de dar unas e3plicaciones concisas y e$emplos sobre este y otros atributos! puesto que han
cambiado bastante ,ltimamente.
Sin embargo! seg,n la ,ltima especiicacin de CSS 3! tenemos los siguientes atributos:
border'image'source: Para indicar la P4) de la imagen que vamos a utilizar como borde.
border'image'slice: <ndica el espacio de la imagen que ser% visible como borde! en los cuatro lados del
elemento! es decir! top! right! bottom y let.
border'image'.idt/: Para indicar la anchura del borde.
border'image'outset: #os sirve para indicar el %rea en la que la imagen de borde se e3tiende m%s all%
del %rea del elemento! en los L lados del mismo.
border'image'repeat: Permite marcar si se desea o no que se repita la im%gen del borde haciendo un
mosaico o si se desea que se estire! etc.
border'image: Se utilizar"a como una manera resumida de especiicar varios atributos de borde con
im%genes al mismo tiempo.
+3plicar con e$emplos cada uno de estos atributos ser"a sin duda interesante! pero nos llevar"a varios
art"culos y adem%s! merece la pena hacerlo cuando ya est.n disponibles como especiicacin deinitiva
de CSS 3 y no en un simple borrador! as" como cuando est.n implementados en los navegadores.
Crear sombras en CSS3 con el atributo bo32shadow. Por in podremos aplicar sombras a los elementos
de la p%gina! sin usar im%genes! Vavascript ni nada e3tra! simplemente con un atributo de CSS 3.
Object 9
CSS 3 supone una nueva revolucin en el diseo web! aportando soluciones a muchas de las pr%cticas
que utilizan los diseadores para decorar las p%ginas web. +sto quiere decir que! muchas de las cosas
que antes hac"amos con t.cnicas de diseo que requer"an uso de im%genes! como las sombras o las
esquinas redondeadas! a partir de ahora las vamos a poder especiicar simplemente desde CSS.
Como vimos en el art"culo introduccin a CSS 3! #o cabe duda que signiicar% un grande avance para
las personas que nos dedicamos a desarrollar webs! que nos permitir% ahorrar tiempo y sobre todo!
economizar cdigo uente! lo que har% las p%ginas m%s ligeras y separar% aun m%s el contenido de la
orma.
0 lo largo del (anual de CSS 3 ya vimos varios atributos nuevos de bastante importancia y variedad y
ahora le toca el turno a bo32shadow! el atributo de CSS3 que nos permitir% deinir sombras a los
elementos de la p%gina.
Atributo bo"'s/ado.
+l atributo bo32shadow requiere varios valores para especiicar las caracter"sticas de la sombra! como
diuminado! separacin de la sombra y la propia ca$a o color. )a sinta3is es como esta:
bo32shadow: Kp3 2Gp3 3p3 FEEED
Por orden de aparicin! los valores que se indican en bo32shadow son:
%esplazamiento /orizontal de la sombra) )a sombra de un elemento suele estar un poco desplazada
con respecto al elemento que la produce y su posicin ser% en uncin del %ngulo con el que llegue la
luz. +n el caso de este e$emplo el primero de los valores! Kp3! quiere decir que la sombra aparecer% K
p"3eles a la derecha. Si la sombra quisi.ramos que apareciera un poco hacia la izquierda del elemento
original que la produce! pondr"amos un valor negativo a este atributo. Cuanto m%s desplazamiento
tenga una sombra! el elemento que la produce parecer% que est% m%s separado del lienzo de la p%gina.
%esplazamiento vertical de la sombra) +l segundo valor que colocamos en el atributo bo32shadow es
el desplazamiento vertical de la sombra con respecto a la posicin del elemento que la produce. +ste
valor es similar al desplazamiento horizontal. Oalores positivos indican que la sombra aparecer% hacia
aba$o del elemento y valores negativos har%n que la sombra aparezca desplazada un poco hacia arriba.
+n el caso del anterior e$emplo! con 2Gp3 estamos indicando que la sombra aparecer% desplazada G
p"3eles hacia arriba del elemento.
%ifuminado) +l tercer valor indica cu%nto queremos que est. diuminado el borde de la sombra. Si el
diuminado uera cero! querr"a decir que la sombra no tiene ning,n diuminado y aparece totalmente
deinida. Si el valor es mayor que cero! como en nuestro e$emplo 3p3! quiere decir que la sombra
tendr% un diuminado de esa anchura! 3 p"3eles en el e$emplo.
Color de la sombra) +l ,ltimo atributo que se indica en el atributo bo32shadow es el color de la
sombra. 5eneralmente las sombras en el mundo real tienen un color negro o grisaceo! pero con CSS3
podremos indicar cualquier gama de color para hacer la sombra! lo que nos dar% bastante m%s
versatilidad a los diseos gracias a la posible utilizacin de sombras en distintos colores! que puedan
combinar me$or con nuestra paleta. +n el e$emplo anterior hab"amos indicado una sombra con color
negro.
Compatibilidad de las sombras CSS con navegadores
)o cierto es que las CSS 3 todav"a est%n en ase de especiicacin! aunque ya se encuentran muy
avanzadas y los navegadores m%s modernos ya han comenzado a implementarlas. #o obstante! el 83C
todav"a no ha liberado las especiicaciones de esta versin de las &o$as de +stilo en Cascada y hasta
que empiece a recomendar su implementacin los clientes web no tienen por qu. entenderlas.
Por el momento podemos utilizar bo32shadow en las versiones m%s moderas del navegador 7pera. Por
su parte! navegadores basados en (ozilla y 8ebNit tienen soporte a esta uncionalidad de CSS3! pero a
trav.s de unos atributos CSS con una ligera variacin en su nombre.
0tributo bo32shadow para navegadores basados en (ozilla! como 9ireo3: De manera temporal!
9ireo3 es capaz de interpretar el atributo 2moz2bo32shadow! por e$emplo:
2moz2bo32shadow: -p3 -p3 Ep3 FEGED
0tributo bo32shadow para navegadores basados en 8ebNit! como Saari o 5oogle Chrome: +n estos
momentos y de manera temporal! navegadores como Chrome o Saari entienden el atributo: 2web1it2
bo32shadow! por e$emplo:
2web1it2bo32shadow: 3p3 3p3 -p3 FcHD
Como podremos imaginar! si deseamos ampliar al m%3imo la compatibilidad con bo32shadow!
necesitar"amos indicar tanto el propio atributo bo32shadow =que unciona en 7pera y en el uturo
uncionar% en todos los navegadores>! as" como 2moz2bo32shadow y 2web1it2bo32shadow para que
uncione en las versiones actuales de 9ireo3! Saari! Chrome! etc.
-$emplos de Sombras CSS3
0hora veamos varios e$emplos de sombras creadas directamente con CSS 3 y el atributo bo32shadow!
con sus variantes para compatibilidad temporal en los navegadores (ozilla o 8ebNit.
Fca$asombraC
bac1ground2color: FdddD
width: 3EEp3D
padding: -Ep3D

bo32shadow: Kp3 Kp3 E F333D
2web1it2bo32shadow: Kp3 Kp3 E F333D
2moz2bo32shadow: Kp3 Kp3 E F333D
M
+sto crear"a una capa con un gris claro como color de ondo y una sombra desplazada aba$o y a la
derecha en K p"3eles y sin diuminado. 0dem%s! hemos deinido un color de sombra gris oscuro para el
elemento.
FsombraclaraC
width: /EEp3D
padding: -Ep3D
bac1ground2color: FGGGD
color: FD

bo32shadow: /p3 /p3 /p3 FcD
2web1it2bo32shadow: /p3 /p3 /p3 FcD
2moz2bo32shadow: /p3 /p3 /p3 FcD
M
+ste otro e$emplo es para una sombra un poco menor! tambi.n desplazada hacia aba$o y a la derecha y
con un diuminado de / p"3eles. 0dem%s hemos indicado un color amarillo claro para la sombra! por lo
que! para verla bien! tendr"amos que colocar este elemento sobre un ondo oscuro.
FsombraredondeadaC
bac1ground2color: FEGED
color: FD
width: LEEp3D
padding: -Ep3D
2moz2border2radius: Ip3D
2web1it2border2radius: Ip3D

bo32shadow: -Kp3 2-Ep3 3p3 FEEED
2web1it2bo32shadow: -Kp3 2-Ep3 3p3 FEEED
2moz2bo32shadow: -Kp3 2-Ep3 3p3 FEEED
M
+n este tercer e$emplo tenemos un caso curioso de sombra! pues est% aplicada sobre un elemento que
tiene las esquinas redondeadas con CSS 3. 0s" pues! la sombra tambi.n debe tener las sombras
redondeadas! para a$ustarse al elemento que la produce. 0mbos navegadores con compatibilidad a
sombras y CSS 3 uncionan correctamente con sombras y bordes redondeados.
Para acabar! ponemos un enlace a una p%gina donde puedes ver los e$emplos de sombras en CSS 3.
'en en cuenta que debes probar estos e$emplos con 7pera! 9ireo3! Saari o Chrome! que son los que
actualmente soportan este atributo.
Si deseas ampliar las inormaciones y practicar m%s con este nuevo atributo de CSS3 para la realizacin
de sombras! te recomendamos leer el art"culo sobre cmo hacer un resplandor e3terior con CSS 3.
Cmo realizar un elemento que tenga un resplandor e3terior con CSS3 y la propiedad bo32shadow.
Por Bor$a Snc/ez
&ace ya tiempo que se public en Desarrollo8eb.com un an%lisis de las capacidades de la propiedad
bo32shadow! que sirve para producir una sombra en un contenedor! por medio de CSS. +s una de esas
propiedades que vienen como novedad en la tercera especiicacin de CSS y que nos vendr%n como
anillo al dedo para conseguir ciertos eectos que antes slo pod"amos emular mediante el uso de
im%genes semi2transparentes por canal alpha.
0s" pues! lo que antes era un verdadero engorro y peso adicional innecesario para nuestras p%ginas!
ahora se puede hacer con unas sencillas propiedades de CSS 3. Como dec"amos! ya e3plicamos la
propiedad bo32shadow de CSS 3 y vimos e$emplos para utilizarla de modo que podamos producir
sombras. +n este art"culo veremos una pequea pr%ctica para utilizar esa misma propiedad para obtener
otro estilo de capa dierente! que es el resplandor e3terior.
*ota) 0lgunas de estas propiedades de CSS 3 me recuerdan irremediablemente a los estilos de capa de
Photoshop. 0 este eecto le he llamado Aresplandor e3teriorA $ustamente por ser el nombre con el que le
llaman en Photoshop! en la coniguracin de los estilos de capa.
Pues resulta que un resplandor e3terior es $ustamente una sombra! pero en lugar de oscura! de color
claro. 0s" que! haciendo uso de la misma propiedad CSS para la creacin de sombras! podemos crear
los resplandores que deseemos. +so si! tendremos que colocar un ondo oscuro a nuestra p%gina para
verlos! por obvias razones de contraste.
+n realidad estas son las propiedades CSS que necesitaremos para crear una sombra! pero de color
blanco! con lo que se obtendr% el mencionado resplandor e3terior.
2moz2bo32shadow: Ep3 Ep3 3Ep3 FD
2web1it2bo32shadow: Ep3 Ep3 3Ep3 FD
bo32shadow: Ep3 Ep3 3Ep3 FD
)a primera propiedad 2moz2bo32shadow sirve para 9ireo3! la segunda 2web1it2bo32shadow es para
Saari y Chrome y la tercera propiedad bo32shadow sirve para todos los navegadores que ya han
incorporado CSS 3 como si uera un est%ndar ya aprobado! como 7pera e <nternet +3plorer G.
*ota) (%s adelante! cuando CSS 3 est. en estado de implementacin recomendada por el 83C!
podremos usar solamente la propiedad bo32shadow! que ser% compatible con todos los navegadores.
Si queremos hacer el resplandor con otro color! por e$emplo verde! tendr"amos que cambiar ,nicamente
el 456 de las propiedades CSS! tal como se puede ver a continuacin.
2moz2bo32shadow: Ep3 Ep3 3Ep3 F0399E9D
2web1it2bo32shadow: Ep3 Ep3 3Ep3 F0399E9D
bo32shadow: Ep3 Ep3 3Ep3 F0399E9D
&emos preparado un e$emplo de p%gina web donde he creado un par de resplandores. Como se puede
ver! he colocado un ondo de p%gina negro! para que los resplandores se puedan ver correctamente.
0simismo! he colocado algunos estilos adicionales! como un borde para resaltar el resplandor o un
padding para hacer que la ca$a se vea un poquito m%s holgada.
Para que queden claros todos los estilos CSS que hemos deinido para la realizacin de este e$emplo!
vamos a mostrar a continuacin el cdigo uente completo generado.
?WD7C'TP+ &'() PP6)<C A2;;83C;;D'D &'() L.E-;;+#A
Ahttp:;;www.w3.org;'4;htmlL;strict.dtdA
B
?html lang@AenAB
?headB
?titleB&acer un resplandor e3terior con CSS3?;titleB
bodyC
ont2amily: 'rebuchet (S! verdana! sans2seriD
bac1ground2color: FEEED
color: FD
M
FresplandorblancoC
2moz2bo32shadow: Ep3 Ep3 3Ep3 FD
2web1it2bo32shadow: Ep3 Ep3 3Ep3 FD
bo32shadow: Ep3 Ep3 3Ep3 FD

padding: -Ep3D
border: -p3 solid FD
width: -JEp3D
margin: LEp3D
M

FresplandorverdeC
2moz2bo32shadow: Ep3 Ep3 3Ep3 F0399E9D
2web1it2bo32shadow: Ep3 Ep3 3Ep3 F0399E9D
bo32shadow: Ep3 Ep3 3Ep3 F0399E9D

padding: -Ep3D
border: -p3 solid FJJEED
width: -JEp3D
margin: LEp3D
M
?;styleB
?;headB
?bodyB
?div id@AresplandorblancoAB
+sta capa tiene un resplandor e3teriorWW
?;divB

?brB
?brB

?div id@AresplandorverdeAB
+sta capa tiene un resplandor e3terior! pero ahora he utilizado un resplandor de color verdeWW
?;divB
?;bodyB
?;htmlB
Para inalizar! podemos ver el e$emplo en marcha en una p%gina aparte.
)a propiedad de CSS 3 bac1ground2origin permite decidir la posicin de la imagen de ondo con
respecto al borde! padding o el contenido del elemento.
Object 10
CSS permite especiicar que los elementos tengan un ondo con una imagen y adem%s! con algunos
atributos como bac1ground2position o bac1ground2repeat podemos deinir cosas como la posicin de la
imagen de ondo se traslade a otro lugar o que se orme un mosaico. +sas propiedades son bastante
utilizadas en el diseo de p%ginas web y quiz%s ya las dominemos. 0hora bien! con CSS 3 tenemos la
posibilidad de especiicar nuevos estilos o modos de comportamiento de las im%genes.
+n este art"culo e3ploraremos el nuevo atributo bac1ground2origin! que orma parte de la nueva
especiicacin de &o$as de +stilo en Cascada. Oeremos tambi.n e$emplos sobre cmo utilizar este
atributo! dentro de las e3plicaciones que estamos presentando en el (anual de CSS 3.
Qu es bac0ground'origin
Cuando colocamos una imagen de ondo en un elemento de &'() se posiciona dentro del espacio de
ese elemento. Por deecto una imagen de ondo aparece como un mosaico! repitiendo la imagen a lo
largo de todo el espacio de ese elemento. Pero para colocar esa imagen el navegador utiliza un origen
de coordenadas! que ver"amos m%s %cilmente si hacemos que la imagen no se repita! es decir! que no
se haga un mosaico en el ondo.
7bservar el e$emplo de la siguiente imagen:

Se ha colocado una imagen de ondo a ese elemento! pero la imagen no se repite. Se puede ver el
amarillo del ondo de color asignado al elemento y la imagen de ondo en azul. 0hora apreciemos
dnde comienza la imagen. Oeremos que est% colocada dentro del elemento! dentro del cuerpo y sin
tener en cuenta el borde. Sabemos que con bac1ground2position podr"amos cambiar esa posicin! pero
en CSS 3 e3iste el atributo bac1ground2origin que tambi.n nos servir% para trasladar esa imagen pero
de otra manera.
Con bac1ground2origin podemos deinir el origen de coordenadas sobre el que se va a colocar la
imagen de ondo! para que sea el borde del elemento! su padding o su contenido. Oeamos sus posibles
valores con una e3plicacin:
border'bo")
+ste valor signiica que el origen de coordenadas de la imagen ser% el borde del elemento. +n este caso
estamos indicando que la imagen empiece donde empieza el borde del elemento! si es que tiene borde.
bac1ground2origin: border2bo3D
padding'bo")
+ste valor es el utilizado por deecto en CSS 3 y es tal como se posiciona la imagen en navegadores
que slo entienden CSS / o inerior. Cuando indicamos bac1ground2origin: paddingD queremos que el
e$e de coordenadas donde se va a colocar la imagen sea el espacio destinado al elemento! incluyendo su
posible padding y sin contar el posible borde.
bac1ground2origin: padding2bo3D
content'bo")
+l tercero de los posibles valores de bac1ground2origin sirve para que el origen de coordenadas para la
posicin de la imagen de ondo sea el lugar donde empieza el contenido del elemente! osea! sin tener en
cuenta sus posibles bordes y padding.
bac1ground2origin: content2bo3D
Para hacernos una idea m%s clara sobre los distintos valores de bac1ground2origin hemos hecho un
e$emplo! pero se ha de ver con navegadores compatibles con CSS =en seguida e3plicamos esto>.
Oer un e$emplo en marcha en una p%gina aparte.
*ota) Si bac1ground2attachment tiene el valor Ai3edA este atributo se ignorar%.
Compatibilidad de bac0ground'origin
+n el momento de escribir este art"culo los navegadores aun no han implementado todas las nuevas
caracter"sticas de las CSS. +n la mayor"a de casos apenas est%n a modo de prueba! hasta que las
especiicaciones de CSS 3 est.n recomendadas para su implementacin.
Por ello! los navegadores que han comenzado a soportar las CSS utilizan algunos prei$os para los
nombres de las propiedades. +n (ozilla 9ireo3 debemos utilizar el atributo 2moz2bac1ground2origin!
en navegadores basados en web1it =como Chrome o Saari> se debe utilizar el atributo 2web1it2
bac1ground2origin.
0dem%s! en navegadores basados en web1it y (ozilla no tienen en cuenta la terminacin A2bo3A al
inal de los valores de los atributos! por lo que hay que eliminarla.
Por su parte! en 7pera ya tienen implementada la uncionalidad con el nombre de atributo deinitivo! y
sus valores con la correspondiente terminacin A2bo3A! que es como aparece en la especiicacin actual
del modelo de ca$a de CSS 3.
+ste ser"a el cdigo CSS para aplicar distintos valores de bac1ground2origin y que los entiendan todos
los navegadores m%s modernos.
*ota) +l <nternet +3plorer H! el m%s actual de los navegadores de (icrosot! en estos momentos! las
CSS 3 no est%n implementadas de ning,n modo! as" que no podremos ver estos e$emplos en
uncionamiento.
Fpruebasondo-C
2moz2bac1ground2origin: borderD
2web1it2bac1ground2origin: borderD
bac1ground2origin: border2bo3D
M
Fpruebasondo/C
2moz2bac1ground2origin: paddingD
2web1it2bac1ground2origin: paddingD
bac1ground2origin: padding2bo3D
M
Fpruebasondo3C
2moz2bac1ground2origin: contentD
2web1it2bac1ground2origin: contentD
bac1ground2origin: content2bo3D
M
0s" pues! ya hemos aprendido a cambiar el e$e de posicionamiento de la imagen de ondo con
bac1ground2origin! pero volvemos a comentar que la posicin de la imagen deinitiva tambi.n la
podemos marcar con bac1ground2position. De hecho! con el atributo bac1ground2origin estamos
deiniendo el e$e de coordenadas sobre el que se va a aplicar el bac1ground2position para colocar
deinitivamente la imagen.
Para terminar! ponemos de nuevo el enlace al e$emplo marcha.
Descripcin de los atributos de CSS3 overlow23 y overlow2y! que sirven para deinir cmo renderizar
un contenido cuando sobrepasa los l"mites de un contenedor en la horizontal o vertical.
Object 11
+n este art"culo nos disponemos a analizar los atributos de ho$as de estilo en cascada! en su tercera
versin =CSS3>! overlow23 y overlow2y. +stas son dos de las novedades de este lengua$e para
deinicin de estilos en p%ginas web! que estamos comentando en el (anual de CSS3.
4ealmente! aunque se trata de dos atributos nuevos en CSS3! el concepto de overlow no resultar% tan
novedoso para los estudiosos de las ho$as de estilo! puesto que ya viene de versiones anteriores. +n
CSS/ se incorpor el atributo overlow que! como quiz%s sepas! sirve para indicar al navegador qu.
hacer cuando un contenido sobrepasa los l"mites de un contenedor. Sin embargo! ambos atributos ya
estaban en el tintero del 83C desde hace tiempo! tanto es as" que navegadores tan antiguos como
<nternet +3plorer J! tienen una implementacin parcial de overlow23 y overlow2y ! a pesar de haber
sido incluidos ormalmente en CSS a partir de la tercera versin del lengua$e.
Como habr%s podido e3perimentar! de manera predeterminada! cuando un contenido sobrepasa los
l"mites de las dimensiones de la capa donde est% situado! el navegador lo muestra igualmente. +n
algunos casos! como podr%s ver en <nternet +3plorer =al menos en versiones antiguas>! a$usta las
dimensiones de esa capa contenedora para que ese contenido se pueda ver en el navegador. +n otros
casos muestra igualmente el contenido! aunque uera del %rea del contenedor =sin modiicar las
dimensiones del contenedor! como hace 9ireo3 o Chrome>. Pero ese comportamiento no es siempre el
que deseamos y para ello se utiliza el atributo overlow.
Pues bien! overlow23 y overlow2y sirven para e3actamente lo mismo que overlow! pero con la
dierencia que permiten especiicar los comportamientos del navegador por separado! cuando surge un
desbordamiento de un contenido en la horizontal y en la vertical respectivamente.
(eferencia) #os hemos apoyado en la descripcin de overlow para e3plicar lo que signiica overlow2
3 y overlow2y. #o obstante! si esa regla de estilo resulta nueva para ti y deseas entenderla me$or! te
recomendamos leer el art"culo +l atributo 7verlow de CSS.
1alores posibles para overflo.'" 2 overflo.'2
+n estos dos nuevos atributos podemos colocar varios valores distintos! que nos servir%n para deinir
dierentes tipos de comportamientos ante el desborde del contenido de una capa. 'anto overlow23
como overlow2y comparten el mismo abanico de valores posibles! pero los podemos especiicar por
separado! para la coordenada * y la T. De ese modo! no tienen por qu. deinirse los mismos valores
cuando surgen desbordamientos en la horizontal y en la vertical.
1isible) +sto hace que el contenido que no cab"a en la capa se muestre igualmente en el
navegador. +s el comportamiento predeterminado.
3idden) Sirve para decirle al navegador que no muestre cualquier contenido que se salga de las
dimensiones especiicadas en el contenedor.
Scroll) Permite mostrar unas barras de desplazamiento para que el usuario pueda hacer scroll
sobre el contenido y ver %reas que quedar"an uera del contenedor. +n el caso que se aplique este
atributo! las barras de desplazamiento aparecer"an siempre en el contenedor!
independientemente de si el contenido sobrepasa o no las dimensiones del contenedor.
Auto) +ste valor indica que las barras de desplazamiento deben aparecer solo en el caso que el
contenido supere los l"mites del contenedor. +s decir! es lo mismo que scroll! pero no
aparecer"an siempre las barras de desplazamiento! sino solamente cuando sean necesarias.
*o'displa2) +ste comportamiento a d"a de hoy no est% implementado en los navegadores! pero
servir"a para que! en caso que un contenido sobrepase el l"mite asignado al contenedor! la capa
completa contenedora sea eliminada de la p%gina. +l eecto ser"a el mismo que si hubi.semos
colocado display:none en el contenedor =si es que hab"a contenido que saliese de sus
dimensiones! claro>.
*o'content) +sto provocar"a que cualquier contenido! que no cupiese en las dimensiones del
contenedor! uera eliminado como si le hubi.semos colocado el atributo visibility:hidden. 7sea!
en dierencia del atributo anterior! lo que se elimina es el contenido y no el contenedor entero.
Como se puede comprobar! las opciones son diversas y permitir"an bastantes combinaciones distintas
para comportamientos en una capa! deiniendo por separado lo que debe ocurrir en la horizontal y en la
vertical.
(erece la pena comentar un detalle sobre el comportamiento predeterminado de estos atributos. Como
se di$o! en caso que no se especiique nada en overlow23 u overlow2y! ser"a como si hubi.semos
aplicado el valor visible. Sin embargo! si deinimos solamente uno de ellos! el otro ya no tendr"a visible
como valor predeterminado! sino auto.
Podemos ver varios e$emplos de la combinacin de varios valores de overlow23 y de overlow2y.
9uentes en CSS 3. Sinta3is y principales caracter"sticas de la regla CSS Xont2ace! que nos permite
utilizar cualquier tipogra"a en una p%gina web.
Por Sara Alvarez
Object 12
0 la hora de escoger una uente para usar en una p%gina web! tradicionalmente se encontraba la
limitacin de que el usuario tuviera ese tipo de letra instalada en su ordenador! porque de no ser as"! los
te3tos se mostrar"an con otras tipogra"as! distintas a las que hab"amos elegido. +s por ello que el
abanico de uentes que pod"amos utilizar! con la garant"a que uncionasen bien en la mayor"a de los
visitantes! estaba bien reducido a las t"picas 0rial! Oerdana! 'imes #ew 4oman y poco m%s.
6ien! pues en la actualidad este problema ya esta solucionado y todo gracias a la regla CSS Xont2ace.
+sta regla nos permite deinir en nuestra ho$a de estilos cual4uier tipo de tipograf5a,
independientemente de si el usuario dispone de ella o no y para ello lo ,nico que debe preocuparnos
es que este instalada en nuestro servidor. +n el presente art"culo e3plicaremos cmo se puede
conigurar nuestra ho$a de estilos CSS para poder utilizar cualquier uente que nosotros deseemos.
#mportar fuentes tipogrficas mediante CSS con 6font'face
)a mencionada regla Xont2ace nace con CSS / pero hasta CSS 3 no empieza a uncionar y prosperar.
+n un principio slo uncionaba en <+ K y ,nicamente admit"a ormatos de uente .eot! pero con el paso
del tiempo otros navegadores ampliaron su soporte! comenzando con Saari 3!-. +n la actualidad
admite otros tipos de ormatos tipogr%icos como son .tt y .ot y unciona tambi.n con los navegadores
7pera -E! 9ireo3 3!- y por supuesto! todas las versiones superiores a los navegadores ya citados.
0s" pues! nada nos impide ya hacer uso de esta Xont2ace! para poder utilizar cualquier uente en
nuestra web! con la garant"a que se ver% perectamente en todos los navegadores m%s actuales.
Su sinta3is es la siguiente:
Xont2aceC
ont2amily:?nombreYuenteBD
src: ?sourceBZ!?sourceB[\D
Zont2weight:?weigthB[D
Zont2style:?styleB[D
M
Con esto deinimos el tipo de letra y su ubicacin en nuestro servidor. Si queremos utilizar dicha uente
tan solo tenemos que llamarla con ont2amily en las reglas de estilo que deseemos.
Debemos tener en cuenta que si no encuentra la uente en nuestro servidor! coger% la siguiente por
deecto que tengamos deinida en nuestra ho$a de estilos.
*ota) #o todos los navegadores admiten todos los ormatos anteriormente citados.
9ireo3 3!J soporta 7pentype! +mbedded 7pentype y 8799.
<.+. soporta +mbedded 7pentype
7pera soporta 'ruetype! +mbedded 7pentype y 7pentype
Saari 3!- soporta 'ruetype! +mbedded 7pentype y 7pentype
5oogle Chrome soporta 'ruetype! +mbedded 7pentype
Si queremos traba$ar con uentes distintas a trav.s de Xont2ace y nos preocupa la compatibilidad con
todos los navegadores! comprobaremos que lo m%s aconse$able es subir las uentes con ormato .eot!
que unciona en todos los navegadores. +sto es debido a que <+ tan slo soporta el ormato .eot. Por
ello! debemos convertir nuestras uentes a dicho ormato! para lo que podemos utilizar el programa
(icrosot 8et! cuyo uncionamiento veremos detalladamente en otro art"culo.
-$emplo de uso de 6font'face
0 continuacin colocamos el cdigo de un e$emplo con dos tipos de uentes! una con ormato .eot y
otra con ormato .ot. +l primero se ven en todos los navegadores y en el segundo <+ coge otra letra por
deecto ya que no admite el ormato .ot.
Cdigo de la ho$a de estilos:
Xont2ace C
ont2amily: OivaldiD
ont2style: normalD
ont2weight: normalD
src: url=O<O0)D<E.eot>D
M
Xont2aceC
ont2amily: AgothicAD
ont2style: normalD
ont2weight: normalD
src: url=gothic.ot>D
M
&-C
ont2amily: AgothicAD
M
&/C
ont2amily: AOivaldiAD
M
T a continuacin el cdigo &'() para ver el resultado:
?WD7C'TP+ &'() PP6)<C A2;;83C;;D'D &'() L.E- 'ransitional;;+#AB
?htmlB
?headB
?titleBPrueba con estilos de letra distintos?;titleB
?lin1 rel@AS'T)+S&++'A type@Ate3t;cssA hre@Aestilo2ont2ace.cssAB
?;headB
?bodyB
?h-B+stamos probando la letra 5othic =no se ver% en <+>?;h-B
?h/B0qui la letra Oivaldi?;h/B
?;bodyB
?;htmlB
Puedes ver el resultado en una p%gina aparte.
Cmo aplicar sombras y otros eectos en los te3tos con CSS y el atributo te3t2shadow.
Object 13
+l atributo te3t2shadow de CSS sirve para crear sombras en el te3to! pero realmente con un poco de
pr%ctica e imaginacin nos puede dar soporte a muchos otros eectos interesantes. +n este art"culo
e3plicaremos dicha regla de estilos y oreceremos e$emplos variados para demostrar su versatilidad.
0ntes de comenzar quiero aclarar que! a pesar de haber puesto el art"culo dentro del (anual de CSS3!
la regla de estilos te3t2shadow no pertenece a CSS3 sino que ya ue introducida en el nivel / de las
&o$as de +stilo en Cascada. Sin embargo! hasta ahora no se hab"a implementado dentro de los
navegadores m%s comunes! por eso la estamos agrupando como novedad dentro de este (anual de
CSS3.
Pna vez comentado ese detalle sobre las sombras en te3to! con CSS y sin utilizar un programa de
diseo gr%ico! en breves instantes comprobaremos lo %cil que crearlas. Comencemos viendo un
e$emplo de declaracin con te3t2shadow.
Sombra s+lida
h-C
te3t2shadow: -p3 /p3 FGGGD
M
0s" estamos modiicando los encabezamientos de nivel - para que tengan una sombra slida de color
gris. )os valores que estamos indicando en la sombra son:
Desplazamiento de la sombra a la derecha =-p3>.
Desplazamiento de la sombra hacia aba$o =/p3>.
Color de la sombra =FGGG>.
Sombra desenfocada
)a sombra slida est% bien! pero en muchos casos vamos a desear hacer un eecto de desenocado de la
sombra! que es mucho m%s realista y a menudo m%s atractivo visualmente. Para ello podemos deinir
un valor adicional! que es el tamao del diuminado.
h/C
te3t2shadow: 3p3 3p3 /p3 FJGJD
color: FJJJD
M
0qu" hemos deinido una sombra con 3p3 de desplazamiento aba$o y a la derecha y /p3 de diuminado
o desenoque. 0dem%s la sombra es de color verdoso. 'ambi.n se ha deinido el color del te3to! con el
atributo AcolorA! pero eso no tienen nada que ver con la sombra.
Colocar varias sombras en un mismo elemento
Podemos deinir varias sombras dierentes sobre un mismo elemento de la p%gina! con lo que se pueden
obtener eectos variados y algunos de ellos bastante llamativos. Para ello se pueden colocar las sombras
que se deseen separadas por comas.
h3C
te3t2shadow: -Ep3 Hp3 Fcc! 2-Ep3 -/p3 Fc! 2Hp3 2-/p3 Fcc! -/p3 2Kp3 FcGD
color: FGGGD
M
+sto no tiene ning,n misterio! simplemente se ir%n colocando todas las sombras que deinamos! pero
habr% que tener un poco de criterio para hacer eectos que merezcan la pena.
-fectos diversos con sombras CSS
+l atributo te3t2shadow es un e3celente recurso para hacer distintos tipos de eectos gr%icos que
resultan visualmente atractivos! m%s aun teniendo en cuenta que se hacen con te3to simple y asignado
,nicamente algunas reglas de estilo. 0 continuacin veremos varios e$emplos que podemos anotarnos
como inspiracin! pero la gama de posibilidades va mucho m%s all%.
Sombra 7,iga7)
Podemos utilizar varias sombras slidas para generar una supersombra para nuestro te3to.
h/.sombragigaC
te3t2shadow: FH3 2-p3 -p3! FH3 2/p3 /p3! FH3 23p3 3p3! FH3 2Lp3 Lp3! FH3 2Kp3 Kp3D
color: FEJED
letter2spacing: -p3D
M
-fecto de fuego)
Si usamos varias sombras de colores anaran$ados podemos conseguir un eecto de uego. #os toca
hacer un poco de prueba y ensayo para conseguir un resultado realista! pero se puede conseguir algo
interesante.
h/.uegoC
te3t2shadow: E E /Ep3 FeccG! /p3 2/p3 3p3 FeecHK! 2Lp3 2Lp3 Kp3 Fae3L! Kp3 2-Ep3 Jp3
FecIJEc! 2Kp3 2-/p3 Hp3 FcdLJEJ! E 2-Kp3 /Ep3 FGI3I-J! /p3 2-Kp3 /Ep3 FLK-bEeD
color: FJJJD
M
Contornear el te"to con un trazo)
Con cuatro sombras slidas a un p"3el de distancia del te3to! situadas a los cuatro lados! podemos
conseguir un eecto de trazo alrededor del te3to.
h/.contornearC
te3t2shadow: 2-p3 E FEGE! -p3 E FEGE! E -p3 FEGE! E 2-p3 FEGED
color: FD
M
!e"to en relieve)
Con una sombra oscura y otra clara podemos conseguir un eecto de relieve sobre el te3to. Puede ser un
relieve o un ba$o relieve! dependiendo de donde coloquemos ambas sombras.
h/.relieve C
te3t2shadow: -p3 -p3 white! 2-p3 2-p3 F333D
bac1ground2color: FdddD
color: FdddD
padding: -Ep3D
M
-fecto Pi"elart)
Con un poco m%s de imaginacin podemos conseguir eectos de lo m%s diverso. +n este caso hemos
hecho una prueba que da un resultado de diseo Api3elartA! de aquellos gr%icos creados p"3el a p"3el de
los $uegos de antao.
h-.pi3elartC
te3t2shadow: -p3 -p3 FJJJ! /p3 /p3 FHJDJD3! 3p3 3p3 FJJJ! Lp3 Lp3 FHJDJD3D
color: FcccD
M
'odos los estilos de sombras orecidos en este art"culo se pueden ver en una p%gina aparte.
Conclusi+n a te"t's/ado.
+n deinitiva! las sombras CSS que conseguimos con te3t2shadow nos orecen una nueva v"a muy
r%pida y creativa para dar algunos toques de diseo en nuestros sitios web! sin tener que recurrir a
Photoshop! u otro programa de diseo! como ocurr"a anteriormente.
Si buscamos art"culos antiguos dentro de Desarrollo8eb.com veremos que se orecen talleres diversos
para crear sombras en te3tos y en alg,n caso se orecen t.cnicas CSS para emular las sombras cuando
no e3ist"a el atributo te3t2shadow. 'odas las posibilidades anteriores necesitaban de un traba$o
minucioso y la colaboracin de otras t.cnicas o programas como editores gr%icos.
7tra de las venta$as de usar CSS es que! si maana deseamos cambiar cualquier cosa! como el tamao
del te3to! el eecto de la sombra o simplemente el color de la web y con ello el color de las sombras
para que casen con la nueva crom%tica! ,nicamente tenemos que editar nuestra declaracin de estilos.
Presentacin de las caracter"sticas de los degradados con CSS3! que permiten hacer todo tipo de
gradientes sin necesidad de usar im%genes.
Object 14
)os degradados son uno de los recursos que utilizan los diseadores para decorar las webs y la verdad
es que dan mucho $uego para me$orar el aspecto de la p%gina. #o obstante! hasta la llegada de CSS 3!
tambi.n ten"an una desventa$a importante! ya que para implementarlos necesit%bamos usar im%genes
como ondo de los elementos. +llo tiene algunas desventa$as! como una mayor carga de peso en la
p%gina y la necesidad de abricar los archivos gr%icos con un programa de diseo! con la molestia
adicional que necesitar"amos usar de nuevo el programa de diseo gr%ico! para producir una nueva
imagen! en el momento que queramos retocar el degradado.
Por suerte! dentro de poco! el uso de im%genes en degradados habr% pasado a la historia! ya que CSS 3
dispone de un potente mecanismo para producirlos que resulta todav"a m%s vers%til que el propio uso de
im%genes de ondo. +n este art"culo introduciremos el uso de degradados en p%ginas web! aportando un
par de e$emplos.
#ota: +n el momento de escribir este art"culo la especiicacin de CSS 3 est% todav"a en estado de
borrador! por lo que la implementacin inal de los degradados puede surir ligeras variaciones con
respecto a la que aqu" se e3plica. 0dem%s! debemos tener en cuenta que no todos los navegadores
disponen de los degradados! ya que las CSS 3 aun no se encuentran en su ase inal.
+n el (anual de CSS 3! en regla general! ocurre siempre este problema! pues estamos e3plicando cosas
que todav"a alta un poco para que sean un est%ndar deinitivo.
)os degradados implementan un gradiente de color! que pasa de un estado a otro a lo largo del ondo de
los elementos &'()! ya sea capas! elementos de listas! botones! etc. Dichos degradados se obtendr%n
por medio de la especiicacin de una serie de caracter"sticas! como la posicin inicial! la direccin
hacia donde se realizar%! si es circular o linear! y los colores que se incorporar%n en cada uno de los
pasos del gradiente.
+l navegador es el encargado de renderizar el degradado en uncin de las caracter"sticas escritas para
deinirlo. Podemos asignar degradados como ondo en cualquier elemento &'() donde se pod"a
implementar una imagen de ondo.
)a especiicacin que se bara$a actualmente incluyen degradados de dos tipos principales:
%egradados lineares)
+n los que se crea un gradiente que va de un color a otro de manera lineal. Puede ser de arriba a aba$o!
de izquierda a derecha y viceversa. <ncluso se puede conseguir un degradado en un gradiente de una
l"nea con cualquier %ngulo.
)os degradados lineares se consiguen con el atributo bac1ground asign%ndole el gradiente con la
propiedad Alinear2gradientA de CSS 3. Pn e$emplo puede verse a continuacin:
divC
height: -3Ep3D
width: J3Ep3D
bac1ground: 2web1it2linear2gradient=orange! pin1>D
bac1ground: 2moz2linear2gradient=orange! pin1>D
bac1ground: 2o2linear2gradient=orange! pin1>D
M

*ota) Como dec"amos! estos e$emplos no se ven perectamente en todos los navegadores. De momento
los podr%s ver 8eb1it como 5oogle Chrome o Saari! en 9ireo3 =me$or la versin L! aunque la 3 ya los
implementa tambi.n> y 7pera versin --.
De hecho! como habr%s notado! todav"a tenemos que escribirlos usando atributos propietarios de cada
navegador! como 2web1it2linear2gradient =para navegadores basados en 8eb1it> y 2moz2linear2gradient
=para navegadores de la undacin (ozilla> y 2o2linear2gradient para 7pera. (%s adelante! estos
atributos se podr%n usar en sus versiones originales como linear2gradient =sin los prei$os de cada
amilia de navegadores>
Con respecto a <nternet +3plorer G! a pesar que implementa la mayor"a de las caracter"sticas de las CSS
3! incluso con los atributos no propietarios! no parece que los degradados est.n uncionando todav"a.
0unque hay modos de hacer ondos con degradados de otra manera! las propiedades linear2gradient y
radial2gradient no uncionan! incluso si intento meterle el prei$o 2ms2.
%egradados circulares)
+n ellos se implementa un gradiente que se distribuye radialmente! desde un punto del elemento hacia
uera! de manera circular! que puede tener el mismo valor de radio =para hacer degradados en c"rculos
perectos> o con valores de radio variables =lo que generar"a elipses>.
+l valor que asignamos a bac1ground en este caso ser% por medio del atributo Aradial2gradientA! adem%s
de toda la serie de par%metros necesarios para deinir el degradado seg,n nuestras intenciones.
div.circularC
bac1ground: 2web1it2radial2gradient=FEE! FEJ>D
bac1ground: 2moz2radial2gradient=FEE! FEJ>D
border: -p3 solid F333D
height: /EEp3D
width: /KEp3D
M

*ota) Oolvemos a insistir en que se han utilizado los atributos propietarios 2web1it2radial2gradient!
2moz2radial2gradient y 2o2radial2gradient! en lugar del atributo deinitivo de las CSS 3 que ser% radial2
gradient.
7tra cosa destacable es que! en el momento de escribir este art"culo! 7pera no soporta degradados
circulares. 'ambi.n! de momento! en 8eb1it parece que slo podemos traba$ar con degradados
circulares y no con degradados en orma de elipse.
Puedes ver estos dos degradados! si utilizas 9ireo3! 7pera! Saari o Chrome! en una p%gina aparte.
Conclusi+n
De momento estamos ante caracter"sticas todav"a en ase de borrador! ya que el 83C todav"a no ha
aclarado como va a ser el est%ndar deinitivo. )os navegadores ya las implementan! aunque algunos
solo parcialmente! y en general todo est% realizado de manera e3perimental.
Para asegurarse que un degradado unciona en la mayor"a de las plataormas! de momento estamos
obligados a escribir las reglas de estilos con etiquetas propietarias para cada navegador y m%s adelante
podremos escribirlos slo con la etiqueta deinitiva.
7sea! para deinir un degradado deber"amos escribir todos estos estilos:
bac1ground: linear2gradient=orange! pin1>D
+l primero para 8eb1it! segundo para 9ireo3! tercero para 7pera y el ,ltimo ser"a el atributo que se
espera que sea deinitivo! que lo podemos ir colocando para cuando <nternet +3plorer empiece a
soportar los degradados CSS o para cuando los navegadores ya entiendan la etiqueta deinitiva.
Por tanto! cuando CSS 3 se convierta en un est%ndar de implementacin recomendada! podremos
,nicamente de$ar la etiqueta del gradiente deinitiva! linear2gradient y borrar todas las dem%s
deiniciones de estilos:
0unque en este art"culo hemos visto una simple introduccin a los degradados CSS 3! el borrador
actual del 83C incluye muchas otras cosas que servir%n para hacer degradados bastante m%s comple$os
y conigurables por ininidad de par%metros. #o obstante! de momento lo de$amos por aqu" y veremos
m%s sobre este asunto ya cuando e3pliquemos el detalle de los degradados lineares y los degradados
radiales.
+3plicacin detallada de los degradados lineales de CSS3 que conseguimos con la propiedad linear2
gradient. Crear degradados de colores! que se distribuyen en un gradiente lineal.
Object 15
+l degradado de colores m%s sencillo que podemos crear es el degradado lineal. Con CSS 3 se pueden
especiicar con tan solo deinir una serie de par%metros en la propiedad linear2gradient! que nos
permiten conigurar todo tipo de gradientes de dos o m%s colores! sin la necesidad de usar im%genes.
+n el pasado art"culo del (anual de CSS 3 estuvimos haciendo una presentacin inicial de los
degradados CSS3! que nos servir% para conocer b%sicamente los tipos de degradados y ver un par de
e$emplos. +n este art"culo veremos con detalle la construccin de los degradados lineales! que resultan
bastante potentes y atractivos para decorar cualquiera de los elementos de un sitio web.
Oeremos adem%s diversos e$emplos que estamos seguros clariicar%n las distintas posibilidades de
construccin de degradados! pues! aunque no resulta di"cil de conseguirlos! e3isten muchas variables
que nos pueden ayudar a crear ininitos tipos de degradado con solo la deinicin de un atributo de
estilos CSS.
Sinta"is de creaci+n de degradados lineales
0s" pues! despu.s de haber le"do la introduccin a los degradados CSS3! veamos en l"neas generales
cu%l ser"a la sinta3is para la construccin de un degradado lineal.
bac1ground: linear2gradient=par%metros>D
7 bien:
bac1ground2image: linear2gradient=par%metros>D
Como vemos! para asignar un degradado a un elemento! tenemos que utilizar la propiedad linear2
gradient sobre un atributo bac1ground! o bac1ground2image. 'odos los elementos que soportan
im%genes de ondo permiten tambi.n colocar degradados de ondo. 0dem%s! tendremos que indicar una
serie de par%metros variables para la creacin del degradado! que son los que realmente tienen alguna
diicultad de entender. +stos par%metros son los siguientes:
A8 &rigen'29o'angulo del degradado)
+l primer par%metro ser"a el origen desde donde comenzar% el degradado y;o el %ngulo de disposicin
del gradiente de color. Podemos decir que el degradado comience desde arriba! aba$o o desde una
esquina cualquiera. Por deecto los degradados ser%n distribuidos en un gradiente en l"nea recta! pero
adem%s podemos indicar un %ngulo distinto con el que se vaya produciendo el gradiente de color.
B8 lista'de'colores 2 opcionalmente, el lugar /asta donde se debe mostrar cada uno)
)uego colocaremos los colores! todos los que queramos! que deben utilizarse en el degradado!
separados por comas. 0dem%s! si lo deseamos! podemos deinir las paradas de color Acolor stopsA! que
consiste en declarar el lugar desde donde debe empezar el gradiente del color.
Para poder entender me$or todo esto! lo m%s %cil es ver una una serie de e$emplos. 'odos ellos los
podemos visualizar en una p%gina aparte.
*ota) Por avor! tener en cuenta que el e$emplo se debe ver por el momento en las versiones m%s
modernas de los navegadores. De momento lo podremos ver en 7pera! o los browsers basados en
8eb1it! como 5oogle Chrome o Saari! o navegadores basados en (ozilla! como 9ireo3.
+sto hace un degradado desde el color naran$a hacia el rosa. 'odos los dem%s par%metros quedar"an con
sus valores predeterminados y el resultado ser"a que el degradado se realiza en toda la altura del
elemento! de arriba a aba$o! en un gradiente vertical! comenzando el naran$a en la parte de arriba y
acabando en rosa en la parte de aba$o.
*ota) +n realidad! tal como se e3plic en el art"culo anterior! para que los e$emplos uncionen en esto
momento! tenemos que escribir las etiquetas de estilos propietarias de cada navegador. 0s" que el estilo
anterior! en realidad en nuestro e$emplo est% escrito con los atributos de estilos propios de cada
navegador! que son los que uncionan actualmente:
'ambi.n conviene colocar el atributo original linear2gradient! que es el que uncionar% cuando CSS 3
sea un est%ndar de implementacin recomendada por el 83C.
bac1ground: linear2gradient=top let! F! FJJ>D
+ste degradado comienza en la esquita superior izquierda y se crea un gradiente que va hacia la esquina
opuesta. Por tanto! el degradado ormar% un gradiente oblicuo! en diagonal desde la esquina superior
izquierda! donde estar"a el blanco =F>! hasta la esquina inerior derecha! donde estar"a el rosa =FJJ>.
bac1ground: 2web1it2linear2gradient=-HEdeg! FE! FJJ>D
+ste degradado deine su direccin por medio de un %ngulo e3presado en grados. E grados har"a que el
degradado comenzara en la parte de la izquierda y -HEdeg indica que el degradado empezar"a $usto por
el lado contrario! es decir! por la derecha. De modo que en la parte de la derecha tendr"amos el color
morado y en la izquierda tendr"amos el rosado.
bac1ground: linear2gradient=FEE KEQ! FEEE>D
+ste degradado tiene lo que se llama un Acolor stopA es decir! una parada de color! que est% asignada
con el KEQ en el primer color. Uuiere decir que el primer color estar"a homogeneo =sin degradado>
hasta el KEQ del tamao del elemento y que luego comenzar"a a degradarse hacia el segundo color.
bac1ground: linear2gradient=LKdeg! FJJ! FHE! Fc>D
+ste degradado tiene una disposicin en diagonal! por los LK grados que se han deinido. 0dem%s!
podemos ver que hemos deinido m%s de dos colores en el degradado. Podemos poner tantos como
queramos! separados por comas. Como no hay Acolor stopsA los tres colores se distribuyen de manera
equitativa! desde la esquina inerior izquierda hasta la superior derecha.
bac1ground: linear2gradient=LKdeg! FJJ -EQ! FHE 3EQ! Fc JEQ>D
+ste degradado se hace tambi.n en diagonal! desde la esquina inerior izquierda! igual que el anterior!
pero hemos deinido una serie de paradas de color =color stops>! con lo cual la distribucin del
gradiente no es homog.nea. +l primer color empezar"a a degradarse hacia el segundo cuando se llega al
-EQ del tamao del elemento. +l degradado hacia el segundo color se completar"a al llegar al 3EQ y a
partir de ese punto empezar"a a degradarse hacia el tercer color. +l degradado entre el segundo y tercer
color se realizar"a desde el 3EQ al JEQ del tamao del elemento y se completar"a cuando estamos en el
JEQ. 0 partir de ese ,ltimo color stop =JEQ> tendr"amos el ,ltimo color de manera homog.nea hasta el
-EEQ del tamao. Por tanto! el color predominante veremos que es el tercero! que tiene un LEQ =-EEQ
del elemento 2 JEQ del espacio donde veremos degradados> del espacio para mostrarse con su 456 tal
cual ue deinido.
bac1ground: linear2gradient=LKdeg! FJJ -JEp3! FHE -HEp3! Fc>D
+ste es el mismo degradado que el anterior! pero con paradas de color distintas. 0dem%s! estamos
deiniendo esos Acolor stopsA con medidas en p"3eles en lugar de porcenta$es.
*ota) se aconse$a no mezclar unidades CSS distintas en las paradas de color! como podr"a ser:
bac1ground: linear2gradient=let! FJJ JEQ! FHE KEp3>
Porque en ese caso! dependiendo del anchura del elemento! la segunda parada de color! con KEp3!
podr"a estar en un punto anterior al JEQ de su tamao! lo que podr"a provocar que la distribucin del
gradiente de color uera imposible de realizar.
bac1ground: linear2gradient=let! FEE! FHE! FE! FEE! FEE! FJE! FcE>D
+ste degradado! que empieza en la izquierda y con un gradiente recto hacia la derecha! tiene varios
colores! los del arcoiris.
Ser% muy ,til ver estos degradados en marcha en una p%gina aparte. )os veremos bien siempre que
dispongamos de un navegador compatible con esta nueva caracter"stica de las CSS3. Para quien no
disponga del navegador adecuado! puede ver la muestra en la siguiente imagen:
Paradas de color
Como hemos visto! las paradas de color! o Acolor stopsA permiten alterar bastante los degradados
incluso traba$ando con los mismos colores. Para deinirlas se debe tener en cuenta la l"nea imaginaria
de distribucin del gradiente de color. 0l principio de esa l"nea tendr"amos la distancia EQ y al inal del
elemento tendr"amos la distancia -EEQ. +l color inicial siempre comenzar"a en el espacio del EQ y se
completar"a el degradado llegando al color inal en el espacio del -EEQ.
*ota) Si estamos traba$ando con otras unidades! por e$emplo p"3eles! que son perectamente posibles
en las paradas de color =siempre que no mezclemos unidades! pues no es recomendable>! al principio
tendr"amos Ep3 y al inal tendr"amos *p3 siendo * el tamao de esa l"nea de degradado desde el
principio hasta el in.
0unque el degradado comience de EQ a -EEQ! las paradas de color las podemos poner en cualquier
punto! incluso puntos que est.n uera de ese intervalo. Por e$emplo! nada nos impide poner una parada
de color en -/EQ! lo que signiicar"a que el color al que asignamos esa parada no llegar"a a verse
degradado completamente en el espacio del elemento. +s decir! si la parada de color est% uera del
intervalo! no llegar"amos a ver el 456 e3acto al que tender"a el degradado! porque estar"a uera del
espacio del elemento.
+n el siguiente art"culo comentaremos los degradados lineales con repeticin.
+studiaremos el atributo repeating2linear2gradient de CSS3! que permite realizar degradados lineales
con m,ltiples repeticiones del mismo gradiente de color.
Object 16
+n este estudio proundo de los degradados de color en CSS3 ahora vamos a tratar de e3plicar los
degradados con repeticin! que se pueden hacer para conseguir un degradado entre dos o m%s colores
que se repite varias veces a lo largo de todo el ondo del elemento al que se le coloque.
)os degradados con repeticin se realizan de manera similar a los que vimos al tratar los degradados
lineares normales. )a dierencia es que utilizaremos el nombre de atributo repeating2linear2gradient y
que! para que se produzcan las repeticiones tendremos que utilizar paradas de color.
)a sinta3is es e3actamente la misma que ya conocemos de los degradados lineales:
repeating2linear2gradient=origen! colores>
Siendo que en origen podremos colocar! tanto la posicin inicial donde comienza el degradado! como el
%ngulo que debe ormar el gradiente. )uego! los colores! como tambi.n vimos! se indican separados por
comas. Sin embargo! ahora! para que realice la repeticin! estamos obligados a sealar una parada de
color.
*ota) las paradas de color! que tambi.n conocemos como Acolor stopA! se e3plicaron con detalle en el
anterior art"culo donde se trataron los degradados lineales con CSS3.
)a parada de color la podremos hacer en cualquiera de los colores del degradado! pero claro! tendremos
que asegurarnos que el ,ltimo color tenga una parada de color menor que el tamao del elemento! o si
traba$amos con porcenta$es! menor que el -EEQ. 0s"! en el espacio del elemento que sobre despu.s de
la ,ltima parada de color! comenzar% la repeticin del degradado.
Oamos ahora a mostrar varios e$emplos de degradados con repeticin para que se puedan entender
perectamente. Si dispones de un navegador compatible con los degradados CSS podr"as ver el e$emplo
en marcha.
bac1ground: repeating2linear2gradient=F! FJJJ /KQ>D
+ste degradado comienza en blanco y termina en gris. Como no se indic nada! ir% de arriba a aba$o! en
un gradiente vertical en l"nea recta. Pero lo importante en este caso es que el segundo color tiene una
parada al /KQ. +so quiere decir que se llegar% al gris en el primer /KQ del espacio del elemento y que
a partir de ese punto comenzar% de nuevo el degradado. +l segundo degradado ocupar% otro /KQ de la
imagen y entonces se volver% a repetir. Por tanto! en la pr%ctica veremos que este degradado de blanco
a gris se repetir% por L veces en el ondo del elemento donde lo coloquemos.
*ota) Oolvemos a insistir en que las CSS 3 todav"a! en el momento de escribir estas l"neas! est%n en
ase borrador! por lo que no todos los navegadores las implementan. 0dem%s! los que lo hacen! utilizan
atributos propietarios. Por ello! para que se vea ese degradado en los navegadores! tendr"amos que
utilizar los atributos propios de cada amilia de browsers y la declaracin de estilos nos quedar"a como
sigue:
.midegradadoC
bac1ground: 2web1it2repeating2linear2gradient=F! FJJJ /KQ>D
bac1ground: 2moz2repeating2linear2gradient=F! FJJJ /KQ>D
bac1ground: 2o2repeating2linear2gradient=F! FJJJ /KQ>D
bac1ground: repeating2linear2gradient=F! FJJJ /KQ>D
M
)a primera declaracin =con el prei$o 2web1it2> ser"a para navegadores como Chrome o Saari! la
segunda! =2moz2> para 9ireo3! la tercera =2o2> para 7pera y la ,ltima es para todos los navegadores! que
empezar%n a entenderla cundo esto de las CSS3 sea un est%ndar.
bac1ground: repeating2linear2gradient=let! Fc! FGJ 3EQ! FGJ3 LEQ! FJ3E K-Q>D
+n este segundo e$emplo tenemos otro degradado! esta vez con L colores. Como se puede ver! se le han
asignado varias paradas de color! en lugar de solo una al ,ltimo elemento. Como el ,ltimo color stop
est% al K-Q del elemento! el degradado se ver% solo dos veces.
bac1ground: repeating2linear2gradient=LKdeg! red! blue! red KEp3>D
+sta es otra declaracin de estilos! con un degradado en un gradiente oblicuo. 0dem%s! tiene la
particularidad que se va de ro$o a azul y luego de nuevo a ro$o. Con ello conseguimos que las
repeticiones del degradado siempre est.n suavizadas y no se note cuando comienza y acaba una
repeticin! como nos ocurr"a en los dos e$emplos anteriores. 0dem%s! como se puede ver! la parada de
color la hemos colocado en KEp3! lo que quiere decir que el degradado se repetir% cada KE p"3eles! de
modo que! el n,mero de repeticiones variar% dependiendo del tamao del contenedor donde se asigne
este ondo.
bac1ground: repeating2linear2gradient=let! FEE! FHE! FE! FEE! FEE! FJE! FcE! FEE -EEp3>D
+ste ,ltimo e$emplo tiene los colores del arcoiris repetidos cada -EE p"3eles.
Podemos ver el e$emplo en un navegador accediendo a este enlace! pero si tu cliente web aun no es
compatible! puede ver los distintos degradados realizados en la siguiente imagen.
Como se ha podido ver! los degradados con repeticin no tienen ning,n misterio. 0s" que sin m%s
tardar! podemos pasar a ver los degradados radiales.
Oeremos ahora cmo conseguir degradados CSS3 en un gradiente de color que se distribuir% de orma
radial! creando tanto c"rculos como elipses.
Object 17
+ste es el cuarto art"culo que estamos dedicando a los degradados con CSS3 y en esta ocasin vamos a
ver los degradados radiales! que orman diseos circulares! con una distribucin radial uniorme! o
degradados en elipse! con una distribucin radial variable.
)os degradados radiales! que incluyen tanto los que tiene orma circular en general! como los que
tienen orma de elipse! se consiguen a trav.s del atributo radial2gradient! de CSS3. De modo que!
mediante la aplicacin de distintos par%metros! conseguiremos todas las posibilidades. Como veremos a
continuacin! tienen una orma de deinirse muy parecida a la que vimos con los degradados lineares!
aunque en este caso tendremos algunos otros par%metros a tener en cuenta! lo que puede diicultar un
poquito m%s su entendimiento.
)a sinta3is resumida ser% la siguiente:
bac1ground: radial2gradient=par%metros>D
7 bien:
bac1ground2image: radial2gradient=par%metros>D
)os par%metros que podemos indicar en la declaracin radial2gradient=> es donde realmente radica la
diicultad y a la vez la potencia de este tipo de degradados. #o obstante! la mayor"a de los par%metros
son opcionales! por lo que podemos hacer degradados radiales bastante simples! que tomar%n
par%metros por deecto. +n realidad! como veremos! lo ,nico que necesitaremos siempre es deinir dos
o m%s colores para realizar el gradiente de color.
+l listado de par%metros que podremos indicar es el siguiente:
A8 Posici+n inicial del gradiente circular)
)os degradados radiales comienzan en un punto cualquiera del ondo de un elemento y se e3tienden
hacia uera de ese punto con ormas circulares o de elipse. )uego! para deinirlos! necesitaremos una
orma de especiicar dicho punto de inicio del degradado. +l punto se especiica con una o dos
coordenadas! que pueden tener distintas unidades CSS. Si se omite! se entiende que el degradado tiene
que comenzar en el punto central del ondo del elemento.
B8 orma 29o dimensi+n)
)a orma puede ser circular o elipse! para lo cual especiicamos las palabras AcircleA o AellipseA. +l
tamao lo e3presamos con otra serie de palabras clave! que indican hasta donde debe crecer el c"rculo o
elipse: closest2side ] closest2corner ] arthest2side ] arthest2corner ] contain ] cover. Por e$emplo! closest2
side indica que el c"rculo o elipse debe crecer hasta el lado m%s cercano. )a palabra arthest2corner
indicar"a que debe crecer hasta la esquina m%s le$ana. Contain ser"a lo mismo que decir closest2side y
cover sinnimo de arthest2corner.
Alternativa a B8 !ama:o)
De manera alternativa a especiicar la orma y dimensin del degradado 2punto 6> anterior2! podemos
indicar un par de medidas en cualquier unidad CSS o porcenta$es. +sas medidas se utilizar"an para
generar un c"rculo o una elipse del tamao deseado para nuestro gradiente. )a primera medida ser"a
para la anchura de la elipse y la segunda ser"a para la altura =si ambas son iguales se mostrar"a una
orma circular en el degradado. Si son distintas! ser"a una elipse. +l tamao debe ser siempre positivo.
*ota) esta orma alternativa de especiicar la orma no est% implementada en ning,n navegador
totalmente. +n el momento de escribir estas l"neas! 9ireo3 no la contempla! Chrome solo representa
ormas circulares y ni 7pera ni +3plorer soportan degradados radiales.
C8 Colores del degradado)
Para acabar! se deben indicar cuantos colores se deseen! separados por comas! con la posibilidad de
indicar las paradas de color que se deseen.
0hora! veamos una serie de e$emplos que esperamos aclaren las ideas con respecto a la declaracin de
ondos radiales.
*ota) )os ondos radiales son soportados en poca medida en estos momentos en los navegadores.
'odos tienen al menos alg,n detalle que todav"a tienen que pulir. De momento ni 7pera ni <+G los
muestran en ning,n caso. Chrome no tiene posibilidad de hacer degradados con orma de elipse y
9ireo3 todav"a no implementa la alternativa 6>! comentada anteriormente! para la deinicin del
tamao del gradiente por medio de los valores de anchura y altura.
+n los e$emplos que se mostrar%n a continuacin se presenta ,nicamente el cdigo con el atributo de
estilo deinitivo! que estar% disponible cuando las CSS3 sean un estandar.
bac1ground: radial2gradient=ellipse cover! FJJ! FHE! Fc>D
Cuando en realidad! en estos momentos! para que uncione en 9ireo3 y Chrome hay que colocar sus
atributos con los nombres propietarios de cada navegador.
bac1ground: 2web1it2radial2gradient=ellipse cover! FJJ! FHE! Fc>D
bac1ground: 2moz2radial2gradient=ellipse cover! FJJ! FHE! Fc>D
)a marca 2web1it2radial2gradient sirve para navegadores basados en 8eb1it! como Chorme! y 2moz2
radial2gradient sirve para navegadores basados en (ozilla! como 9ireo3.
bac1ground: radial2gradient=FEE! FEJ>D
+sto hace un degradado desde el verde al azul turquesa! con todos los otros par%metros
perdeterminados. &ar"a un gradiente de orma circular! con su punto de inicio en el centro del
elemento! en verde! haciendo que se llegase al azul turquesa en los bordes del elemento.
bac1ground: radial2gradient=top let! F! FJJ>D
+n este caso hemos deinido el punto de inicio del gradiente con Atop letA. Se trata de la esquina
superior izquierda! donde aparecer% el blanco y el degradado tendr"a orma circular tendiendo hacia
rosa! ocupando el -EEQ del elemento.
bac1ground: radial2gradient=/EEp3 3Ep3! FE! FEEE>D
+ste degradado tambi.n declara la posicin inicial del gradiente! pero lo hace mediante las coordenadas
deinidas con medidas en p"3eles. +s circular y ocupa el -EEQ del espacio disponible en el elemento.
bac1ground: radial2gradient=center! FEE! FEEE KEQ>D
+n este declaramos la posicin inicial con center! el comportamiento predeterminado! que coloca el
inicio del degradado en centro! tanto vertical como horizontal. +l detalle es que el degradado se realiza
desde el centro hasta el KEQ del tamao del elemento! ya que le hemos puesto una parada de color
=Acolor stopA> de KEQ en el ,ltimo color.
*ota) las paradas de color! o Acolor stopA! se e3plicaron cuando se trataron los degradados lineares.
bac1ground: radial2gradient=circle! FJJ! FHE! Fc>D
+ste es el primero de los e$emplos en el que deinimos la orma del degradado! aunque solo indicamos
AcircleA. Por tanto! el degradado comenzar% en el centro y ocupar% el -EEQ del espacio disponible en el
elemento! aunque siempre con el mismo radio.
bac1ground: radial2gradient=ellipse cover! FJJ! FHE! Fc>D
+ste degradado es e3actamente igual que el anterior! pero en vez de circular es de elipse! cubriendo el
-EEQ del espacio disponible! y comenzando en el centro. +ste es el comportamiento predeterminado
del estilo.
*ota) Sin embargo! en el momento de escribir este art"culo la orma de elipse solo la implementa
9ireo3. Por lo que el comportamiento predeterminado en Chrome continua siendo el circular.
bac1ground: radial2gradient=-EQ! ellipse closest2side! FJJ JEQ! FHE HKQ! Fc>D
+ste e$emplo tiene deinida la posicin del degradado y la orma. +s el primero que especiica esos dos
valores al mismo tiempo. +n este coso! sobre la posicin solo se declara -EQ! as" que aparecer%
centrado en la vertical y en la horizontal aparecer% en el -EQ del espacio del contenedor por la parte de
la izquierda. +s de orma de elipse y closest2side signiica que se e3pande en orma de elipse hasta
completarse en el lado m%s cercano.
bac1ground: radial2gradient=-EQ! ellipse arthest2corner! FJJ JEQ! FHE HKQ! Fc>D
+ste degradado es igual que el anterior! en la misma posicin y de orma de elipse! pero el tamao se ha
deinido con arthest2corner! con lo que el degradado ser% mucho mayor! e3pandi.ndose hasta la
esquina m%s le$ana.
bac1ground: radial2gradient=/Ep3 -EEp3! 3EQ HEQ! F! FJJJ! FJJ>D
+n este caso hemos deinido la posicin inicial con las coordenadas en p"3eles y! lo que resulta
novedad! hemos deinido tanto la orma como el tamao del degradado en porcenta$e. )a anchura ser%
el 3EQ del elemento y la altura el HEQ.
*ota) +sta alternativa de deinir la orma y dimensiones del degradado! que vemos en este e$emplo y
los tres siguientes! no unciona en 9ireo3 en el momento de escribir el art"culo! por lo que solo chrome
mostrar% un degradado en el elemento. Sin embargo! Chrome es incapaz por ahora de producir elipses!
por lo que el degradado tendr% orma circular! a pesar de haber deinido dimensiones menores en la
anchura que para al altura. #o obstante! lo m%s seguro es que pronto se me$ore la compatibilidad de los
navegadores con este tipo de deinicin del degradado.
bac1ground: radial2gradient=top let! -KEp3 -EEp3! Fc! FGJ! FGJ3! FJ3E>D
&emos deinido la posicin inicial por medio de los valores top y let y el tamao por medio de
unidades en p"3eles.
bac1ground: radial2gradient=/EQ HEQ! -EEQ KEQ! red! blue KEp3! red>D
)a posicin del centro del degradado est% con porcenta$e! as" como el tamao de la elipse! tambi.n con
porcenta$es.
bac1ground: radial2gradient=let! /EEp3 /EEp3! FEE /EQ! FHE! FE! FEE! FEE! FJE! FcE>D
+n este hemos deinido el tamao de la anchura y altura con dos valores en p"3eles! pero como son
iguales! en lugar de una elipse ver"amos una orma circular! cuyo radio es siempre igual.
4ecuerda que puedes ver el e$emplo en marcha! aunque solo en navegadores que soporten los
degradados radiales. )os otros usuarios pueden ver los degradados producidos en los e$emplos en la
siguiente imagen:
+n el siguiente art"culo hablaremos del ,ltimo tipo de degradados CSS3 que nos queda por ver! los
degradados radiales de repeticin.
)os degradados CSS 3 radiales! en su versin con repeticiones! que nos permiten deinir ondos con
gradientes de color que ser"an muy di"ciles de implementar con im%genes.
Object 18
0 lo largo de varios art"culos venimos oreciendo unas e3plicaciones completas sobre los degradados
en CSS 3. 0hora! para inalizar esta serie! vamos a hablar de los degradados raliales con repeticin.
Como ven"amos diciendo! una de las venta$as de estas nuevas caracter"sticas de las CSS3 es que nos
permiten realizar ondos para p%ginas web con degradados! pero sin tener que usar im%genes. +so
consigue ahorrarnos tiempo de desarrollo y diseo! a la vez que aligera el peso de las p%ginas web. Pero
como curiosidad! en el caso de los degradados radiales con repeticiones! adem%s habr"a que aadir que
ser"an casi imposibles de realizar usando im%genes de ondo! o por lo menos tendr"amos que usar
archivos gr%icos muy grandes y pesados.
)os degradados radiales con repeticin son casi id.nticos a los degradados radiales normales!
e3plicados en el pasado art"culo. De modo que! todo lo aprendido anteriormente! lo podemos aplicar
aqu" tambi.n.
*ota) 0lgunas e3plicaciones sobre los degradados CSS3! que tambi.n podemos aplicar a los
degradados radiales de repeticin! la podemos ver en el art"culo sobre los degradados lineales con
repeticin.
)a sinta3is b%sica de este tipo de degradados es la siguiente:
repeating2radial2gradient=par%metros>
)os par%metros! tales como centro del degradado radial! orma y tamao del motivo y los colores son
e3actamente los mismos que para los degradados radiales! por lo que no lo vamos a e3plicar. )as
,nicas dierencias es que tenemos que utilizar el atributo repeating2radial2gradient. 0dem%s! para que
se produzca la repeticin con el tamao o intervalo que nosotros deseemos! tendremos que asignar
alguna parada de color al ,ltimo de los colores del degradado! que generalmente tendr% un valor menor
del -EEQ del espacio del elemento.
*ota) )as paradas de color! a las que tambi.n nos hemos reerido repetidas veces como Acolor stopsA
las e3plicamos en el art"culo que trataba los degradados lineales.
0 continuacin podemos ver una serie de e$emplos que ilustrar%n el uncionamiento de los degradados
radiales con repeticin. Podemos verlos! si contamos con un navegador que soporte esta utilidad de las
CSS3! en este enlace.
bac1ground: repeating2radial2gradient=circle! F! FJJJ /KQ>D
+ste e$emplo hace un degradado entre dos colores! cuyo segundo elemento tiene una parada de color en
el /KQ. Por ello el resultado producir% el mismo degradado repetido L veces! una en cada /KQ del
espacio del elemento donde se coloque.
*ota) Como venimos insistiendo! a pesar de poder llegar a parecer pesados! para que estos degradados
uncionen! en el momento de escribir estas l"neas! hay que colocar los prei$os propios de cada
navegador. +s decir! hay que utilizar las etiquetas propietarias en lugar de la deinitiva. De momento
slo los soportan los browsers basados en 8eb1it y los de la amilia (ozilla. Por ello! tendremos que
utilizar los atributos tal como se puede ver aqu":
bac1ground: 2web1it2repeating2radial2gradient=circle! F! FJJJ /KQ>D
bac1ground: 2moz2repeating2radial2gradient=circle! F! FJJJ /KQ>D
bac1ground: repeating2radial2gradient=circle! F! FJJJ /KQ>D
+l primero para Chrome o Saari! el segundo para 9ireo3 y el tercero es para los navegadores que en el
uturo soporten CSS3! pues la etiqueta deinitiva comenzar% a ser v%lida cuando CSS3 se convierta en
un est%ndar.
bac1ground: repeating2radial2gradient=let! circle! Fc! FGJ 3EQ! FGJ3 LEQ! FJ3E K-Q>D
+ste degradado hace un gradiente entre varios colores y el ,ltimo de ellos tiene una parada en el K-Q.
+sto quiere decir que el degradado se repetir% dos veces.
bac1ground: repeating2radial2gradient=/EQ HEQ! ellipse closest2side! red! blue! red KEp3>D
+n este e$emplo hacemos un degradado con orma de elipse y va desde ro$o a azul y luego de nuevo a
ro$o. 0l comenzar y acabar en ro$o! se consigue que las repeticiones del degradado no tengan saltos
bruscos de un color al otro. Como se puede ver! el ,ltimo color tiene una parada de color en KE p"3eles!
con lo que el degradado se repetir% de nuevo cada KE puntos en la pantalla. +l n,mero de repeticiones
depender% del tamao del elemento donde se coloque este degradado.
bac1ground: repeating2radial2gradient=let! ellipse arthest2side! FEE! FHE! FE! FEE! FEE! FJE! FcE!
FEE>D
+ste otro caso produce una repeticin del degradado! pero no hemos colocado ninguna parada de color
en el ,ltimo elemento. +sto quiere decir que el degradado se repetir%! pero el intervalo de la repeticin
en esta ocasin depender% del tamao y orma radial que se haya conigurado. +n este caso en concreto
tenemos una elipse que se e3pande! desde la izquierda hasta el lado opuesto! con lo que slo en una
pequea porcin del ondo se ver% la repeticin de los colores.
0cabamos poniendo un enlace a estos degradados en marcha. Pero si tu navegador no te muestra nada!
puedes ver su aspecto en la siguiente imagen.
Conclusi+n a los degradados CSS3
Con este art"culo inalizamos el reporta$e sobre los degradados de CSS3! una utilidad que sin duda se
convertir% en un habitual del diseo web. &asta ahora los degradados se utilizaban bastante! pero
necesit%bamos cargar la p%gina con diversas im%genes! lo que requer"a esuerzos adicionales en el
diseo original de la p%gina y tambi.n durante el mantenimiento.
0 partir del momento en que CSS 3 sea un est%ndar para la implementacin recomendada! estas
caracter"sticas de las CSS 3 las veremos intensivamente! porque realmente tienen muchas venta$as. Sin
embargo! si deseamos decorar nuestras webs ya desde este momento! podemos utilizar las etiquetas
propietarias de cada navegador que soporte los degradados CSS. Cargaremos solo un poquito m%s
nuestro archivo de estilos! pero nuestra p%gina ser% visualmente m%s atractiva.
)as animaciones CSS nos permiten realizar eectos que hasta ahora estaban slo disponibles con otros
tipos de tecnolog"as. Oeremos los principales aspectos a conocer sobre las animaciones CSS 3.
Por Sara Alvarez
Object 19
Como todos posiblemente sepamos! hasta el momento! las animaciones en las p%ginas web siempre se
ten"an que realizar utilizando diversas tecnolog"as accesorias! m%s all% del simple &'() o CSS. +l
primer sistema que alcanz gran popularidad para realizar una animacin de elementos bastante luida
y espectacular ue la tecnolog"a 9lash y luego le acompaaron algunos otros sistemas como Silverlight!
de caracter"sticas similares. Sin embargo! todo esto son tecnolog"as propietarias! que requieren la
instalacin de un plugin para uncionar en el navegador! lo que impide que sean universales! por mucha
aceptacin que hayan llegado a tener.
Paralelamente e3isten varios otros soportes para animacin que s" orman parte de las tecnolog"as de
creacin de p%ginas web universales! pero que no llegan ni de le$os a las posibilidades de animacin
que podr"amos desear. #os reerimos a los 5<9 animados! que tanto se utilizaron al principio y que
ahora est%n pr%cticamente olvidados! as" como a Vavascript que tambi.n permite hacer animaciones a
base de cambiar atributos CSS de manera progresiva a lo largo de un tiempo.
*ota) &ablando de Vavascript y aunque quede uera de lo que vamos a tratar en este art"culo! e3isten
algunos ramewor1s interesantes que permiten desarrollar animaciones de una manera bastante m%s
sencilla de lo que ser"a si no los utiliz%semos. Por e$emplo el popular $Uuery permite animaciones
simples pero que se hacen en cuestin de segundos. 'ambien se pueden realizar animaciones CSS con
Vavascript incluso con ramewor1s especializados en este %rea como las librerias $s0nim.
6ien! pues con CSS 3 viene una nueva orma de realizar animaciones totalmente novedosa y que
resultar% mucho m%s sencilla que el uso que podemos conocer con Vavascript. Pero lo que es m%s
importante! que soporta muchos m%s tipos de animacin que hasta ahora estaban reservados a
tecnolog"as como 9lash! como pueden ser rotaciones! ampliaciones y reducciones del tamao
vectoriales! etc.
+sto no se queda ah"! ya que adem%s se han implementado una ciertas interacciones con el usuario y
que se consiguen ,nicamente con CSS 3. 0dem%s! todo ello sin tener que programar! lo que puede
resultar mucho m%s agradable y al alcance de los desarrolladores menos t.cnicos.
*ota) +sta novedad puede resultar realmente interesante pero debemos decir que en el momento de
escribir este art"culo no unciona con todos los navegadores. Slo admiten las animaciones CSS los
navegadores Saari y 5oogle Chrome. +l resto esta traba$ando duro para implementarlo y esperamos
que en poco tiempo se puedan ver en todos los navegadores! sobre todo en 9ireo3 y <nternet +3plorer
que son los m%s utilizados.
1enta$as de las animaciones CSS 3
)as animaciones CSS permiten hacer muchas de las cosas que antes ten"amos reservadas slo al uso de
tecnolog"as supletorias! que no hac"an m%s que incrementar la diicultad del desarrollo! limitar su
compatibilidad entre distintos tipos de usuarios y plataormas! as" como los requisitos de conocimientos
del desarrollador para poder incorporarlas.
Por tanto! una de las venta$as es que nos podemos olvidar de 9lash si queremos hacer dinamismos
espectaculares en nuestra web. De$ar a 9lash de lado adem%s implica que no tenemos que preocuparnos
por el posicionamiento de la p%gina que tantos quebraderos de cabeza provoca cuando nuestra web esta
creada en enteramente en 9lash. 'odo esto sin entrar en el tema de la accesibilidad! en el que 9lash es
un verdadero quebradero de cabeza.
Pero! como de$%bamos entrever! las venta$as m%s importantes ser"an la compatibilidad y la acilidad de
implementacin! al usar un lengua$e que ya resulta amiliar para el desarrollador. )a compatibilidad
viene dada por por el uso de un sistema abierto y regulado por el 83C! al que todos los navegadores
tarde o temprano se adaptar%n. T la acilidad de desarrollo porque slo traba$aremos en nuestros sitios
con el lengua$e CSS y no e3istir% la necesidad de dominar otros lengua$es de programacin como
ocurr"a con 9lash.
#nconvenientes de las animaciones CSS
Como todo en la vida! tambi.n e3isten algunas desventa$as al traba$ar con animaciones en CSS. )o
cierto es que la mayor que se podr"a destacar es slo circunstancial! debido al poco soporte que e3iste
actualmente a esta utilidad. 'enemos dos principales inconvenientes.
+n el momento de escribir este art"culo las animaciones CSS no son admitidas por los principales
navegadores =#inguna utilidad para animacin con CSS 3 se puede utilizar en <nternet +3plorer y en
9ireo3 algunas cosas ya podemos ver que uncionan a medias! pero aun le queda largo camino por
recorrer>.
Consume bastantes recursos de m%quina para producir las animaciones.
'ambi.n podremos encontrar que e3iste alguna diicultad a la hora de la programacin! pero no m%s de
la que encontrar"amos si tuvi.semos que utilizar otros lengua$es o tecnolog"as distintos de CSS.
9inalmente! volvemos a remarcar que! debido a la imposibilidad de ver los resultados en todos los
clientes web! al menos por el momento! deberemos utilizar navegadores basados en 8eb1it! como son
Saari o 5oogle Chrome =siempre en su versin mas actualizada>.
Sin mucho m%s que aadir a nuestra pequea introduccin a las animaciones CSS! comenzaremos a ver
cmo se realizan en el siguiente art"culo! que nos muestra un poco la teor"a sobre este tema y nos da los
principios b%sicos para poder realizar animaciones con CSS 3.
1ideotutorial de animaciones CSS3
0dem%s! os presentamos la grabacin de un evento en directo que emitimos el J de $unio de /E-/ en el
que hablamos sobre animaciones CSS. Se trata de una estupenda presentacin para quienes quieren
comenzar a realizar sus animaciones en CSS! para que tengan una visin global sobre cmo se realizan
y cu%les son sus posibilidades. +speramos que os gusteW
Seguimos con el tema de las animaciones CSS y repasamos los conceptos y propiedades m%s b%sicas
para poder crear una animacin simple con CSS 3.
Object 20
+stamos continuando con la serie de art"culos sobre animaciones CSS! una utilidad que sin duda se
convertir% en un gran aliado de los diseadores para crear webs m%s impactantes y basadas en
est%ndares web. &ay que decir que! aunque en el momento de escribir estos art"culos las animaciones
CSS est%n disponibles tan solo en navegadores basados en 8eb1it! como 5oogle Chorme! en poco
tiempo ser%n compatibles con todos los navegadores.
0s" pues! una vez que sabemos lo que es la animacin CSS! podemos pasar a ver los conceptos clave
que necesitamos para poder crear una animacin.
*ota) 7tros conceptos importantes a tener en cuenta que hemos visto en otras entregas de contenido
dentro de Desarrollo8eb.com es la programacin &'() K y la especiicacin CSS 3.
Conceptos clave que tenemos que conocer bien:
otograma clave
)os otogramas claves son valores iniciales y inales que debe tener la animacin CSS. +stas
localizaciones! en teor"a! las sabemos a ciencia cierta! es decir! siempre conocemos en que punto vamos
a empezar y en cual vamos a terminar la animacin! as" como su duracin. Pero podemos crear otros
otogramas clave! no solamente los de inicio y in! que correspondan con puntos intermedios del
movimiento. )as reglas que determinan estos valores es lo que llamamos otogramas clave dentro de
CSS.
Su sinta3is seria algo parecido a esto:
X1eyrames ^nombreYotogramaYclave^ C
EQ C
let: -EEp3D
M

LEQ C
let: -KEp3D
M

JEQ C
let: IKp3D
M

-EEQ C
let: -EEp3D
M
M
+sta animacin estar"a compuesta de L otogramas clave! el porcenta$e es en el momento de la
animacin en el que va a producirse ese otograma y los p3 son la longitud y la alineacin donde se
colocar"a el otograma dentro del D<O en que se enca$e.
+l cdigo de dicho D<O ser"a el siguiente:
D<O C
animation2name: ^nombre2otograma2clave^D
animation2duration: LKsD
animation2iteration2count: -ED
M
)os atributos de estilo para esta capa que se ven en el cdigo anterior son los siguientes:
animation'name) el nombre del otograma clave.
animation'duration) la duracin de la animacin.
animation'iteration'count) la veces que se repite.
Propiedades sobre la animaci+n aplicables en el %#1
0dem%s de las propiedades que hemos citado en el p%rrao anterior! tenemos otra serie de atributos que
se pueden aplicar a la animacin y que se colocan en el D<O.
+sta ser"a una lista de las propiedades adicionales! aplicables para deinir las animaciones que
especiicamos en el D<O:
animation'timing'function) se aplica entre los otogramas clave! no sobre toda la animacin y
describe como progresa la animacin a lo largo de un ciclo.
animation'direction) esta propiedad deine el sentido de la animacin. Si especiicamos
alternate y los ciclos de iteraccion son impares! la animacin ir% en la direccin normal! si no!
se realizar% en la direccin inversa
animation'dela2) propiedad que nos indica el momento en el que comenzar% la animacin. Si
el valor es E se e$ecuta en cuanta se carga la p%gina.
animation) esta propiedad combina las anteriores de una orma resumida.
C+digo completo para una animaci+n CSS
0 continuacin veremos un cdigo CSS donde estamos deiniendo una animacin! aunque todav"a hay
algunas cosas que tenemos que contaros antes de hacer nuestra primera p%gina de prueba. Pero de
momento aqu" ten.is un e$emplo utilizando el otograma clave y las propiedades de una animacin:
D<O C
animation2name: ^movimiento2diagonal^D
animation2duration: KsD
animation2iteration2count: -ED
M
X1eyrames ^movimiento2diagonal^ C
rom C
let: ED
top: ED
M

to C
let: -EEp3D
top: -EEp3D
M
M
+ste e$emplo lo que nos mostrar"a seria una animacin en la que se mueve un elemento de la esquina
inerior izquierda a la esquina superior derecha! ese movimiento va a tardar K segundos y se va a repetir
-E veces.
*ota) +ste cdigo est% incompleto todav"a! porque slo es un ragmento del CSS y altar"a la parte del
&'(). De momento por ahora est% bien! pero aun tenemos que e3plicar otras cosas sobre las
animaciones CSS que debes saber sobre el estado actual de los navegadores y sus particularidades de
compatibilidad con esta nueva capacidad de CSS 3. Pero no preocupoarse! porque en breve veremos un
cdico completo y uncionando! en el siguiente art"culo.
Con estos conceptos podemos decir que estamos preparados para que en el siguiente art"culo
realicemos un e$emplo muy b%sico de animacin dentro de una p%gina web. 4ecordando siempre que
no unciona actualmente en todos los navegadores y que traba$amos con CSS 3 y &'() K.
4ealizamos un e$emplo b%sico de animacin CSS 3 sobre una capa con un simple te3to. Oeremos cmo
hacer uncionar este primer e$emplo de animacin CSS en navegadores basados en 8eb1it.
Por Sara Alvarez
Object 21
+n este art"culo vamos a realizar nuestro primer e$emplo de animacin CSS. Oeremos que todo es
bastante sencillo y que con unas pocas l"neas de cdigo CSS se pueden hacer cosas bastante
interesantes. Por lo menos! para los que hayan estudiado un poco sobre la animacin realizada con otras
tecnolog"as como Vavascript! quedar% claro que las animaciones CSS son mucho m%s %ciles y r%pidas
de producir.
0ntes de empezar! queremos dar un par de reerencias sobre art"culos tratados anteriormente en
Desarrollo8eb.com donde e3plicamos algunos detalles a conocer previamente! para poder entender
bien el presente e$emplo. +n concreto os recomendamos empezar la lectura en el art"culo que orece la
<ntroduccin a las 0nimaciones CSS y tambi.n por el articulo donde se e3plican los Conceptos 6%sicos
sobre 0nimaciones CSS.
Para los que no lo sepan! remarcamos que para ver este e$emplo necesitamos un navegador basado en
8eb1it! que es el ,nico que realmente unciona en el momento de escribir este art"culo! para poder ver
las animaciones CSS 3. +$emplos de navegadores 8eb1it son los conocidos 5oogle Chrome o Saari.
0dem%s! tenemos que saber que! como en el momento de escribir este art"culo las especiicaciones de
CSS 3 todav"a est%n en ase de revisin! los atributos que necesitamos de &o$as de +stilo en Cascada
para animacin no est%n uncionando! sino que tendremos que utilizar unos atributos especiales que
slo entienden los navegadores basados en web1it. +stos atributos son e3actamente iguales a los que
coment%bamos en el art"culo de los conceptos sobre animaciones CSS! lo ,nico que tenemos que aadir
el prei$o 2web1it2 antes del nombre de cada uno de ellos.
Para que os quede m%s claro vamos a pasar a construir nuestro e$emplo m%s sencillo ya con el paquete
web1it. +ste e$emplo va a consistir en un te3to dentro de un D<O! que se va a mover de izquierda a
derecha y viceversa! por un tiempo ininito.
)o primero que tenemos que hacer es crearnos nuestros otogramas clave! para ello utilizamos el
siguiente cdigo en nuestra ho$a de estilos.
X2web1it21eyrames movimiento2diagonal C
rom C
let: Ep3D
M

to C
let: -EEp3D
M
M
Como ya se coment anteriormente! lo que se ha deinido en el cdigo anterior es un par de otogramas
clave! que corresponden con el inicio y el in de la animacin. +n la pr%ctica .sto hace que se nos
mueva nuestro te3to! de izquierda a derecha de Ep3 a -EE p3.
Pna vez que tenemos este primer paso! vamos a darle las propiedades necesarias a la capa D<O! para
terminar de deinir nuestra animacin:
Fanim C
2web1it2animation2name: movimiento2diagonalD
2web1it2animation2duration: 3sD
2web1it2animation2iteration2count: ininiteD
2web1it2animation2direction: alternateD;\para que vuelva a su posicion inicial \;
width: -EEp3D
bac1ground2color: 'ealD
color: FD
position: relativeD
padding: /p3D
M
+n la primera linea le damos el nombre a la animacin! que tiene que ser el mismo que el del otograma
clave.
+n la segunda le damos una duracin de 3 segundos! es decir! la animacin tardar% en hacer el recorrido
slo 3 segundos.
+n la tercera le decimos que lo repita ininitas veces.
)a propiedad 2web1it2animation2direction: alternate hace que el te3to! una vez que haga el recorrido!
vuelva a su posicin inicial realizando el camino inverso.
T por ,ltimo le damos un ancho! y color de ondo y de te3to! as" como una posicin relativa! ya que de
lo contrario no uncionaria nuestra animacin.
Con esto nuestro cdigo CSS estar"a completo! ahora slo nos quedar"a el cdigo &'() que ser"a tan
simple como esto:
?htmlB
?headB
?titleB0nimacion CSS 3?;titleB
?lin1 rel@AstylesheetA hre@Aanimacion2css.cssA type@Ate3t;cssAB
?;headB
?bodyB
?div id@AanimAB+sto es una animacin?;divB
?;bodyB
?;htmlB
Con todo esto uncionando nuestra animacin quedar"a as".
Como pod.is ver este e$emplo de animacin CSS 3 con 8eb1it es bien sencillo y no requiere unos
conocimientos e3tensos en CSS. 7s de$o el cdigo completo de este e$emplo a continuacin:
animacion'css;css
X2web1it21eyrames movimiento2diagonal C
rom C
let: Ep3D
M

to C
let: -EEp3D
M
M
Fanim C
2web1it2animation2name: movimiento2diagonalD
2web1it2animation2direction: alternateD;\para que vuelva a su posicion inicial \;
width: -EEp3D
bac1ground2color: 'ealD
color: FD
position: relativeD
padding: /p3D
M
animacion'css;/tml
?htmlB
?headB
?titleB0nimacion CSS 3?;titleB
?lin1 rel@AstylesheetA hre@Aanimacion2css.cssA type@Ate3t;cssAB
?;headB
?bodyB
?div id@AanimAB+sto es una animacin?;divB
?;bodyB
?;htmlB
+n el siguiente articulo realizaremos un e$emplo algo m%s complicado para crear un ondo en
movimiento! del tipo de las pantallas de matri3.
Pr%ctica sobre 0nimaciones CSS3! en la que construimos un ondo animado al estilo de la pel"cula
(atri3! utilizando ,nicamente cdigo CSS 3.
Por Sara Alvarez
Object 22
+stamos revisando las particularidades del sistema de animacin que se ha creado a partir del lengua$e
CSS! a partir de su tercera especiicacin. 'odav"a es todo un poco el preludio de lo que podremos
hacer en el uturo con CSS y cmo nos ayudar% a crear p%ginas din%micas sin necesidad de Vavascript.
'odo esto ya comenzamos a e3plicarlo en la introduccin a las animaciones CSS! de modo que ahora
vamos a hacer una pr%ctica para asimilar los conocimientos adquiridos. 0unque hablando de e$emplos
pr%cticos de animaciones CSS 3 queremos sealar que ya hab"amos visto una pr%ctica anteriormente!
algo m%s sencilla que la que veremos a continuacin! sobre animacin de te3to con CSS.
Para comenzar! podemos ver primero como quedar"a nuestro e$emplo uncionando. T recordar que para
verlo! de momento! ten.is que utilizar 5oogle Chrome o Saari.
Como pod.is ver! es el t"pico ondo de letras que se mueven en la vertical! que conocemos si hemos
visto la pel"cula (atri3! pero donde hemos colocado letras en vez de s"mbolos.
)o primero que vamos a crear es nuestro archivo CSS con un otograma clave y las propiedades de la
animacin.
X2web1it21eyrames ondoC
rom Ctop: 2/JEQDM
to Ctop: -EEQDM
M
Con esto le estamos diciendo que vaya de arriba hacia aba$o! con ello dar% la sensacin de que la
animacin comienza desde arriba de la parte superior de nuestra pantalla.
0 continuacin vemos los estilos y propiedades que vamos a necesitar para animar nuestro ondo.
Fmatri3C
margin: -em autoD
width: -EEQD
height: -EEQD
overlow: hiddenD
bac1ground: FEEED
color: rgba=E! /KK! E! .I>D
te3t2shadow: rgba=/KK! /KK! /KK! .H> Ep3 Ep3 Lp3D
position: relativeD
M
0qu" principalmente damos los estilos a nuestro ondo y decimos que el te3to que aparezca sea verde.
Fmatri3 D<OC
position: absoluteD
top: ED
;\ rotamos el te3to\;
2web1it2transorm2origin: EQD
2web1it2transorm: rotate=GEdeg>D
2web1it2animation2name: ondoD
2web1it2animation2direction: normalD

M
0qu" ya damos las propiedades necesarias a nuestra animacin. )o primero que hacemos es rotarla GE
grados! esto lo hacemos para que las letras caigan y no vayan de izquierda a derecha. Ta solo nos queda
lo que vimos en el art"culo anterior! el nombre! las veces que se repite y la direccin.
)os estilos que vemos a continuacin lo que van a hacer es que los te3tos ba$en a dierentes
velocidades y en distintos intervalos de tiempo.
.-C
ont2size: -./emD
M
./C
ont2size: .GemD
M
.c-C
color: rgba=E! /KK! E! .K>D
M
.d-C
2web1it2animation2duration: LsD
M
.d/C
2web1it2animation2duration: JsD
M
.d3C
2web1it2animation2duration: HsD
M
.dLC
2web1it2animation2duration: -EsD
M
.deC
2web1it2animation2delay: 3sD
M
Con esto la parte de CSS esta lista! ahora pasamos a nuestro cdigo &'().
?htmlB
?headB
?titleB9ondo animado con CSS?;titleB
?lin1 rel@AstylesheetA hre@Amatri3.cssA type@Ate3t;cssAB
?;headB
?bodyB
?div id@Amatri3AB
?div class@Ad3 -A style@Alet:3Ep3DABhgdLldhbcG1pugccsrq?;divB
?div class@Ad- / c-A style@Alet:JEp3DABtrzewsEy1ldLcvgbh$n?;divB
?div class@Ad/ -A style@Alet:HEp3DABsodhrLGwhuybsrnlep$h?;divB
?div class@AdL c3 deA style@Alet:--Ep3DABueI3s$Etb13powvn?;divB
?div class@Ad/ c-A style@Alet:-LEp3DABs$dhgueiwgivec$ow31wp1pomvc$oeuur?;divB
?div class@Ad3 / c-A style@Alet:-IEp3DABtrzhggh?;divB
?div class@Ad- c-A style@Alet:-HKp3DABthgpmsrthdvytvEGHIJtqgv?;divB
?div class@Ad3 deA style@Alet:/EEp3DABdhiwgduesr$m?;divB
?div class@AdL -A style@Alet:/KEp3DABosadharshdyeu$m?;divB
?div class@Ad/ deA style@Alet:/GEp3DABwed$sd$hlgmrghtdercwewerg$m?;divB
?div class@Ad3 /A style@Alet:3-Ep3DABsodhrLGwhaybsrnlep$h?;divB
?div class@Ad- -A style@Alet:3KEp3DABpEEoiEnKsu$hgdgbr$s3Jgdrg$po?;divB
?div class@AdL c-A style@Alet:3GEp3DABhJH1gdet1lbbesw1?;divB
?div class@Ad/ deA style@Alet:L-Ep3DABdrttvbscsr?;divB
?div class@Ad- c- deA style@Alet:LL3Ep3DABsgybEhreseL1c?;divB
?div class@Ad3 -A style@Alet:K3Ep3DABhgdLldhbcG1pugccsrq?;divB
?div class@Ad- / c-A style@Alet:KJEp3DABtrzewsEy1ldLcvgbh$n?;divB
?div class@Ad/ -A style@Alet:KHEp3DABsodhrLGwhuybsrnlep$h?;divB
?div class@AdL c3 deA style@Alet:J-Ep3DABueI3s$Etb13powvn?;divB
?div class@Ad/ c-A style@Alet:ILEp3DABs$dhgueiwgivec$ow31wp1pomvc$oeuur?;divB
?div class@Ad3 / c-A style@Alet:IIEp3DABtrzhggh?;divB
?div class@Ad- c-A style@Alet:IHKp3DABthgpmsrthdvytvEGHIJtqgv?;divB
?div class@Ad3 deA style@Alet:HEEp3DABdhiwgduesr$m?;divB
?div class@AdL -A style@Alet:HKEp3DABosadharshdyeu$m?;divB
?div class@Ad/ deA style@Alet:HGEp3DABwed$sd$hlgmrghtdercwewerg$m?;divB
?div class@Ad3 /A style@Alet:G-Ep3DABsodhrLGwhaybsrnlep$h?;divB
?div class@Ad- -A style@Alet:GKEp3DABpEEoiEnKsu$hgdgbr$s3Jgdrg$po?;divB
?div class@AdL c-A style@Alet:GGEp3DABhJH1gdet1lbbesw1?;divB
?div class@Ad/ deA style@Alet:-E-Ep3DABdrttvbscsr?;divB
?div class@Ad- c- deA style@Alet:-E3Ep3DABsgybEhreseL1c?;divB
?;divB
?;bodyB
?;htmlB
Si os i$%is tenemos varios D<O con las letras y la posicin en la que se colocan! si no hacemos esto nos
saldr"a todo $unto y no se ver"an por toda la pantalla.
Podemos poner tantos D<O como deseemos siempre viendo la posicin en la que los colocamos y
teniendo en cuenta las resoluciones de pantalla.
Como pod.is ver! nuestro e$emplo resulta un poco laborioso y teniendo en cuenta que simplemente
ser"a el ondo! al que deber"amos aadir el resto de nuestro cdigo para la creacin de nuestra web! la
cosa se queda un poco m%s comple$a de lo que desear"amos. De momento! hay que tomar este e$emplo
como algo e3perimental! pues debido a su comple$idad y que las animaciones CSS no uncionan en
todos los navegadores! no ser"a muy recomendable utilizar la t.cnica para una web real. Por lo menos
queremos que sirva para ver el tema de las animaciones CSS 3! pues el e$emplo es bastante interesante.
Por ,ltimo os de$o el e$emplo uncionado en una p%gina aparte.
+n el siguiente art"culo veremos un e$emplo parecido pero esta vez caer% nieve y con distintos
movimientos en vez de la ca"da recta de este e$emplo.
'aller de animacin CSS 3! en el que creamos un ondo donde simulamos que est%n cayendo copos de
nieve! utilizando tan slo con CSS 3.
Por Sara Alvarez
Object 23
)as caracter"sticas de las &o$as de +stilo en Cascada en su tercera especiicacin! incluyen diversas
utilidades para crear animaciones sin necesidad de programar! solamente deiniendo estilos CSS. +s
algo que ya empezamos a e3plicar en el art"culo de introduccin a las animaciones CSS.
+n estos momentos estamos oreciendo varios e$emplos pr%cticos sobre cmo crear distintos tipos de
animaciones CSS. +n el presente art"culo veremos un e$emplo de ondo con copos de nieve que caen
por nuestra pantalla! con movimientos de orma ondulante. +s un e$emplo parecido al que hicimos
anteriormente! en el art"culo sobre el ondo de (atri3! pero en esta ocasin en vez de hacer
movimientos rectos en la vertical! ser%n movimientos curvos.
De modo que! la complicacin adicional en esta pr%ctica ser% realizar esos movimientos circulares
t"picos de los copos de nieve! para los que vamos a ensear una nueva propiedad de las animaciones
CSS! transorm! a la que se accede en el momento de escribir este art"culo con la propiedad temporal
2web1it2transorm! que est% disponible para navegadores como Chrome o Saari. Dicho sea de paso!
aprender esta propiedad nos vendr% muy bien porque dar% mucha opciones a la hora de animar ob$etos.
Como hacemos en estos e$ercicios pr%cticos! lo primero que recomendamos hacer es ver el e$emplo
uncionando en una p%gina aparte! donde se podr% apreciar el resultado inal de la pr%ctica que
pretendemos realizar.
0hora vamos a ver el cdigo CSS necesario para crear nuestro ondo. +l cual ser% reducido! pero donde
simplemente tenemos que aumentar los tamaos para sacar el mismo resultado en un ondo mayor.
FcontainerC
bac1ground: FJJJ url=images;ondo2nieve.$pg> no2repeatD
width: LEEp3D
height: 3EEp3D
position: relativeD
M
0 continuacin damos propiedades al con$unto de la nieve en general y luego a cada copo en particular.
X2web1it21eyrames nieveC
rom Ctop: 2-Ep3DM
to Ctop: LKEp3DM
M

X2web1it21eyrames coposC
EQ C 2web1it2transorm: rotate=2-HEdeg> translate=Ep3! Ep3>DM
-EEQ C 2web1it2transorm: rotate=-HEdeg> translate=-Ep3! IKp3>DM
M
Con el primero decidimos que los copos vayan de la parte superior a la inerior! del tal orma que
parezca que aparecen por arriba y desaparecen por aba$o.
+n el segundo lo que le decimos es que cada copo va ir girando haciendo una semicircunerencia!
saliendo el copo desde -Ep3 para inalizar en IKp3.
Pna vez que tenemos ya nuestros otogramas clave nos queda darle propiedades a nuestras
animaciones. Para ello creamos un estilo para las animaciones nieve y copos y a parte! una serie de
estilos para cada copo en particular. 0qu"! como en el e$ercicio anterior! podemos crear todos los copos
que necesitemos.
Fsnow div C
position: absoluteD
top: 2LEp3D
2web1it2animation2name: nieve! coposD
2web1it2animation2timing2unction: ease2inD
M
.copos C
color: FD
ont2size: -emD
position: absoluteD
M
.copos.- C
let: LEp3D
2web1it2animation2duration: KsD
M
.copos./ C
ont2size: -.HemD
let: -/Ep3D
2web1it2animation2duration: IsD
M
.copos.3 C
let: /EEp3D
2web1it2animation2duration: HsD
M
.copos.L C
ont2size: -.KemD
let: /HEp3D
2web1it2animation2duration: JsD
M
Considero que no hace alta e3plicar este cdigo! que ya hemos visto en los e$emplos anteriores de
nuestro manual! por lo que paso a poneros el cdigo &'() necesario para que nuestro ondo uncione.
?htmlB
?headB
?titleB9ondo animado con CSS?;titleB
?lin1 rel@AstylesheetA hre@Anieve.cssA type@Ate3t;cssAB
?;headB
?bodyB
?div id@AcontainerAB
?div id@AsnowA class@AsnowAB
?div class@Acopos -ABS?;divB
?div class@Acopos /ABS?;divB
?div class@Acopos 3ABS?;divB
?div class@Acopos LABS?;divB
?;divB
?div id@AgroundAB?;divB
?;divB
?;bodyB
?;htmlB
De este cdigo cabe destacar que no hemos utilizado im%genes para generar los copos de nieve!
simplemente hemos colocado el cdigo &'() que nos muestra el s"mbolo copo .
Pod.is volver a ver el e$emplo uncionando en una pagina aparte.
+n el siguiente art"culo veremos cmo animar un mueco para ir haciendo algo m%s que ondos
animados.
Pr%ctica general sobre dierentes t.cnicas de animacin CSS! en el que realizamos un dibu$o animado
por varios elementos que tienen dierentes particualidades.
Por Sara Alvarez
Object 24
+n el presente e$ercicio vamos a ver cmo podemos animar un dibu$o con CSS 3 en varios puntos! que
nos dar%n una idea global de las posibilidades de las animaciones CSS y nos orecer%n una pr%ctica
completa de las t.cnicas que que hemos visto hasta el momento.
+n lo relacionado a las animaciones de ob$etos con CSS ya hemos visto algunos e$emplos interesantes
con t.cnicas que vamos a utilizar en el presente art"culo. )os e$emplos vistos hasta ahora son la
animacin de te3to! el ondo de tipo (atri3 y el ondo con los copos de nieve. +n este art"culo vamos a
mezclarlo todo y realizar un dibu$o con distintas animaciones.
Si lo deseas! puedes comenzar viendo el resultado inal de este e$emplo. Pero ten en cuenta que de
momento unciona slo con Chorme o Saari.
Para la realizacin de esta pr%ctica! lo primero que vamos a hacer es crear un ondo simple para nuestra
animacin. 0lgo como esto:
0 continuacin vamos a crear una nube! que se vaya moviendo por el cielo de nuestro dibu$o.
Pna vez que tenemos la nube! colocamos en nuestro archivo CSS el siguiente cdigo:
X2web1it21eyrames nube C
rom C
let: -EEp3D
opacity: -D
M
to C
let: 3EEp3D
opacity: ED
M
M
FnubeC
position:relativeD
2web1it2animation2name: nubeD
2web1it2animation2direction: alternateD
M
Del otograma clave no hay mucho que comentar! simplemente va de -EEp3 a 3EEp3 y va perdiendo
opacidad! es decir! va haci.ndose m%s transparente a medida que se mueve hacia la derecha! con lo que
va desapareciendo de nuestro dibu$o.
+n cuanto a la animacin pues es m%s de lo mismo! dura 3 segundos y va y viene a su posicin inicial.
0hora vamos a animar el %rbol para que veamos como caen sus ho$as! para ello nos creamos una ho$a y
colocamos el siguiente cdigo en nuestro CSS:
X2web1it21eyrames ho$asC
rom C
top: -KEp3D
opacity: -D
M
to C
top: LEEp3D
opacity: ED
M
M
X2web1it21eyrames ho$aC
EQ C 2web1it2transorm: rotate=2-HEdeg> translate=Ep3! Ep3>DM
-EEQ C 2web1it2transorm: rotate=-HEdeg> translate=-Ep3! IKp3>DM
M
Fho$a div C
position: absoluteD
top: 2LEp3D
2web1it2animation2name: ho$a! ho$asD
M
.ho$as C
position: absoluteD
M
.ho$as.- C
let: LEp3D
2web1it2animation2duration: KsD
M
.ho$as./ C
ont2size: -.HemD
let: -EEp3D
2web1it2animation2duration: IsD
M
Como pod.is ver tenemos dos otogramas clave! uno que nos dice cmo se van a mover todas las ho$as
que caen del %rbol y el otro que nos dice el movimiento que va a realizar cada ho$a por separado.
Despu.s hemos ido dando propiedades a las ho$as! con unas propiedades generales deinidas en el D<O
ho$a y luego propiedades especiicas para cada ho$a! creo que no hace alta e3plicarlas porque las
hemos visto todas en art"culos anteriores de nuestro manual de CSS 3.
T por ,ltimo nos queda la animacin del mueco que hemos colocado. Para ello hemos realizado un
dibu$o con el tronco! las piernas y la cabeza y despu.s hemos dibu$ado los brazos por separado que son
los que se van a mover. +sta es la animacin m%s complicada ya que hacer cuadrar los brazos con el
tronco y conseguir el movimiento adecuado ha resultado un poco lioso y aun as" no ha terminado de
salir perecto. Su cdigo CSS es el siguiente:
X2web1it21eyrames mano/ C
EQ C
2web1it2transorm: rotate=Edeg> translate=Ep3!Ep3>D
M
-EEQ C
2web1it2transorm: rotate=2JEdeg> translate=Ep3!Ep3>D
M
M
FmanoderechaC
position: absoluteD
top:/KEp3D
let:/IGp3D
width:2-Ep3D
M
FmanoizquierdaC
position: absoluteD
top:/KEp3D
let:3LEp3D
width:Hp3D
2web1it2animation2name: mano/D
2web1it2animation2direction: alternateD
M
+sto lo que hace es de$arnos la mano derecha i$a y la izquierda nos est% saludando. 'odo esto
utilizando las propiedades ya vistas.
Con esto terminamos nuestro cdigo CSS para las animaciones y nos alta un estilo m%s para nuestro
e$emplo.
FcontainerC
bac1ground: FJJJ url=images;ondo2muneco/.$pg> no2repeatD
width: JEEp3D
height: LEEp3D
position: relativeD
M
Fsituacion C
width: /EEp3D
position: absoluteD
let: 3EEp3D
top: /EEp3D
M
Pno para las propiedades del dibu$o en general y el de situacin para colocar el mueco en la posicin
deseada.
0hora ya slo nos queda el cdigo &'() que es el siguiente:
?WD7C'TP+ htmlB
?htmlB
?headB

?titleBDibu$o animado CSS 3?;titleB
?lin1 rel@AstylesheetA hre@Amuneco.cssA type@Ate3t;cssAB

?;headB
?bodyB
?div id@containerB
?div id@AnubeAB?img src@Aimages;nube/.pngA alt@AA border@AEAB?;divB
?div id@AsituacionAB?img src@Aimages;tronco2muneco/.pngA alt@AA border@AEAB?;divB
?div id@AmanoizquierdaAB?img src@Aimages;mano2izquierda.pngA alt@AA border@AEAB?;divB
?div id@AmanoderechaAB?img src@Aimages;mano2derecha.pngA alt@AA border@AEAB?;divB
?div id@Aho$aA class@Aho$aAB
?div class@Aho$as -AB?img src@Aimages;ho$a.pngA alt@AA border@AEAB?;divB
?div class@Aho$as /AB?img src@Aimages;ho$a.pngA alt@AA border@AEAB?;divB
?;divB
?;divB
?;bodyB
?;htmlB
'odo va dentro de nuestro D<O container y luego cada animacin dentro de un D<O. 7tra cosa ha
destacar es que hay tantos D<O ho$as - como ho$as queremos que se caigan! en nuestro caso /! pero
podr"a haber m%s si quisi.ramos.
0hora slo nos queda ver nuevamente nuestro e$emplo uncionando.
Creamos un %lbum de otos con estilos impactantes de CSS 3 y animacin! sin utilizar Vavascript o
$Uuery.
Por Sara Alvarez
Object 25
0 lo largo de varios art"culos hemos presentado un avance de las posibilidades de CSS 3 para crear
animaciones. que son sin duda una de las novedades m%s impactantes de esa nueva versin del lengua$e
de estilos. +n este art"culo avanzamos un poco en din%mica de los anteriores de este manual y pasamos
a utilizar lo aprendido sobre las animaciones CSS para darle un me$or aspecto a nuestra web.
+n este e$emplo comprobaremos como con CSS3 podemos! simplemente aplicando unas cuantas reglas
de estilo! dar un ormato totalmente distinto e impactante a algo tan simple como unas im%genes y un
te3to. 0dem%s! veremos cmo aplicarle dinamismo a nuestra presentacin y una pequea
interactividad! deiniendo unicamente unos estilos CSS.
+ste e$emplo! que ver.is es relativamente sencillo! hace aos ser"a muy complicado de hacer y
tendr"amos que emplear =aparte de &'() y CSS> muchas l"neas de cdigo y conocimientos avanzados
de Vavascript o de alg,n ramewor1 como $Uuery. +s una muestra e3celente de cmo CSS 3 sustituir% a
Vavascript en algunas parcelas de sus usos habituales. +stoy segura que os encantar%.
*ota) Oamos a darle estilo a una pequea galer"a de im%genes con unas otogra"as i$as! que tenemos
en un cdigo &'() que he escrito a mano. Pero pod.is imaginar que! con un poco de programacin
del lado del servidor! podemos hacerla m%s din%mica y sacar las im%genes de una base de datos.
+n este caso lo primero que vamos a ver va a ser nuestro cdigo &'()! para ir viendo los cambios que
vamos realizando seg,n vamos metiendo propiedades a nuestro CSS.
)o primero que tenemos son las im%genes i$as en nuestro &'().
*ota) 0viso de antemano que este e$emplo est% preparado para el navegador 5oogle Chrome o Saari!
pero que pronto otros navegadores ser%n capaces de interpretar estas reglas de CSS 3. #o obstante!
habr% que cambiar algo el cdigo del e$emplo! para incorporar las etiquetas CSS deinitivas que se
deinan cuando el est%ndar termine de estar recomendado para implementacin.
?htmlB
?headB
?titleB_lbum de otos con CSS?;titleB
?lin1 rel@AstylesheetA hre@Aalbum.cssA type@Ate3t;cssAB
?;headB
?bodyB
?ulB
?liB?img src@Aimages;mi2gatito.$pgA alt@AA border@AEAB?;liB
?liB?img src@Aimages;queso2gema.$pgA alt@AA border@AEAB?;liB
?liB?img src@Aimages;atardecer2pescando.$pgA alt@AA border@AEAB?;liB
?liB?img src@Aimages;moto.$pgA alt@AA border@AEAB?;liB
?liB?img src@Aimages;tanto2monta.$pgA alt@AA border@AEAB?;liB
?liB?img src@Aimages;doris.$pgA alt@AA border@AEAB?;liB
?;ulB
?;bodyB
?;htmlB
Con esto! tan slo nos aparecer"an todas las im%genes en una lista! sin estilos y sin nada. +ntonces lo
primero que vamos a hacer es darle un estilo a la etiqueta ?P)B de$%ndola as": ?P) class@otosB
T ese estilo lo deinimos con el siguiente cdigo CSS:
ul.otos C
width: GIEp3D
margin: E E -Hp3 23Ep3D
M
ul.otos li C
display: inlineD
M
ul.otos a C
display: inlineD
loat: letD
margin: E E /Ip3 3Ep3D
width: autoD
padding: -Ep3 -Ep3 -Kp3D
te3t2align: centerD
color: F333D
ont2size: -Hp3D
M
ul.otos img C
display: bloc1D
width: -GEp3D
margin2bottom: -/p3D
M
+sto lo ,nico que hace es darle un ancho a nuestro %lbum! y redimensiona nuestras im%genes para que
todas tengan el mismo tamao inicial. 'odav"a no hemos animado nada! vamos paso a paso.
0hora vamos a ver que pasa si le damos m%s estilos a los
! pero esta vez tenemos que crear un enlace! aunque no apunte a ning,n sitio para poder darle
animacin a nuestras im%genes. +l enlace luego puede ir a la ampliacin o a otro sitio! etc.
?ul class@AotosAB
?liB?a hre@AFA title@A(i gatoAB?img src@Aimages;mi2gatito.$pgA alt@AA border@AEA B?;aB?;liB
?liB?a hre@AFA title@A+l quesoAB?img src@Aimages;queso2gema.$pgA alt@AA border@AEA B?;aB?;liB
?liB?a hre@AFA title@AOalmayorAB?img src@Aimages;atardecer2pescando.$pgA alt@AA border@AEA
B?;aB?;liB
?liB?a hre@AFA title@A(i motoAB?img src@Aimages;moto.$pgA alt@AA border@AEA B?;aB?;liB
?liB?a hre@AFA title@A'oledoAB?img src@Aimages;tanto2monta.$pgA alt@AA border@AEA B?;aB?;liB
?liB?a hre@AFA title@A(i cone$aAB?img src@Aimages;doris.$pgA alt@AA border@AEA B?;aB?;liB

?;ulB
Para que nos salgan los t"tulos de las otos tenemos que poner el atributo title en el enlace y no en la
imagen.
)os nuevos estilos CSS ser"an los siguientes:
ul.otos a:ater C
content: attr=title>D
M
+ste estilo $unto con las siguientes lineas que aadir"amos al estilo ul.otos a ! nos mostrar"an una ca$a
y el titulo de cada oto. )as l"neas que tenemos que aadir son las siguientes:
2web1it2bo32shadow: E 3p3 Jp3 rgba=E!E!E!./K>D
2web1it2transorm: rotate=2/deg>D
2web1it2transition: 2web1it2transorm .-Ks linearD
+stos estilos son para la colocacin de las ca$as:
ul.otos li:nth2child=3n> a C
2web1it2transorm: noneD
position: relativeD
top: 2Kp3D

M
ul.otos li:nth2child=Kn> a C
2web1it2transorm: rotate=Kdeg>D
position: relativeD
right: Kp3D

M
ul.otos li a:hover C
2web1it2transorm: scale=-./K>D
2web1it2bo32shadow: E 3p3 Jp3 rgba=E!E!E!.K>D
position: relativeD
z2inde3: KD
M
Con estos estilos lo que le decimos es que nos rote las otos 3 grados y que cada 3 una la ponga recta!
despu.s en la K la rote algo m%s que las otras. +stos estilos podr"amos hacerlos para ininidad de
im%genes! buscando cada cuantas otos queremos rotar o poner rectas. 0dem%s el ,ltimo estilo nos hace
que al pasar el ratn por la imagen! esta se agrande con scale y se ponga recta si estaba rotada.
*ota) hay que recordar que en el momento de redactar este art"culo solamente es visible en Chrome y
Saari.
6ueno y el resultado inal ser"a el siguiente.
+n el siguiente art"culo veremos otro e$emplo de %lbum de otos con CSS 3.
4ealizamos otro e$emplo de animaciones para tu galer"a de otos solamente con CSS 3.
Por Sara Alvarez
Object 26
Continuamos e3plorando las posibilidades de las animaciones CSS3! con nuevos e$emplos pr%cticos
que estamos seguros resultar%n interesantes para los aicionados al desarrollo de p%ginas web.
+n este art"culo vamos a realizar una galer"a de otos! en la que las im%genes aparecen desordenadas y
al pasar por ellas pasan a primer plano y se ven a su tamao real. +n el art"culo anterior vimos como
realizar un e$emplo distinto de galer"a inspirado en las cl%sicas Polaroid. 0hora podemos ver otra idea
de galer"a otogr%ica con animaciones CSS 3! que tendr% un resultado bastante curioso! pero veremos
que es m%s sencilla de realizar que la anterior.
Oamos a colocar primero nuestro cdigo &'() para ir viendo poco a poco cmo construir"amos
nuestro e$emplo.
?htmlB
?headB
?titleB0lbum de otos con CSS?;titleB
?lin1 rel@AstylesheetA hre@Aalbum/.cssA type@Ate3t;cssAB
?;headB
?bodyB
?div id@AgaleriaAB
?div id@Aimagen-AB
?img src@Aimages;image-.$pgAB

?;divB
?div id@Aimagen/AB
?img src@Aimages;image/.$pgAB

?;divB
?div id@Aimagen3AB
?img src@Aimages;image3.$pgAB

?;divB
?div id@AimagenLAB
?img src@Aimages;imageL.$pgAB

?;divB
?div id@AimagenKAB
?img src@Aimages;imageK.$pgAB

?;divB
?div id@AimagenJAB
?img src@Aimages;imageJ.$pgAB

?;divB
?;divB
?;bodyB
?;htmlB
+n principio no hay nada que no sepamos! es simplemente un ?D<O id@galeriaB y dentro hemos ido
colocando las im%genes dentro de otros ?D<OB.
0hora pasamos al cdigo CSS que es el realmente importante:
Primero unos estilos generales para la galer"a:
Fgaleria C
width: HEEp3D
height: JEEp3D
margin: /Ep3 autoD
padding: LEp3D
position: relativeD
M
)uego unos estilos espec"icos para cada imagen:
Fgaleria div C
position: absoluteD
overlow: hiddenD
opacity: E.GD
2web1it2transition: all E.Ks linearD
2web1it2border2radius: -Kp3D
border2radius: -Kp3D
2web1it2bo32shadow: 23p3 23p3 KEp3 FJJJD
bo32shadow: 23p3 23p3 KEp3 FJJJD
2web1it2transorm: scale=E.JE>D
M
0qu" lo que hacemos es crear un borde alrededor de cada imagen! de$arla un poco transparente y
ba$arla el tamao! para que luego cuando pasemos el ratn crezca a su tamao real.
*ota) Como venimos advirtiendo! las animaciones CSS 3 todav"a no se encuentran disponibles en
todos los navegadores. +n estos e$emplos estamos traba$ando a modo de demostracin! con los
atributos de CSS 3 propios del navegador Chrome o Saari. +n breve podremos usar los atributos
propios de CSS 3! que ser"an simplemente los mismos! pero quitando el prei$o 2web1it. Pero de
momento! para ver los e$emplos en uncionamiento y que se vean todas las animaciones CSS! hay que
e$ecutarlos en 5oogle Chrome o Saari.
Fgaleria div:hover C
z2inde3: GGGD
2web1it2transorm: rotate=Edeg>D
opacity: -D

M
Con este cdigo conseguimos que la imagen vaya al primer plano de la pantalla y se vea sin
transparencia! al pasar el ratn por encima de la imagen.
Fimagen- C
top: KEp3D
let: -3Ep3D
z2inde3:-D
M

Fimagen/ C
top: 3EEp3D
let:-EEp3D
z2inde3:ID
M

Fimagen3 C
top: L/Ep3D
let:3KEp3D
z2inde3:3D
M

FimagenL C
top: -3Kp3D
let: LKEp3D
z2inde3:LD
M

FimagenK C
top: 2-EEp3D
right: /EEp3D
z2inde3:KD
M

FimagenJ C
top: //Ep3D
right: -/Ep3D
z2inde3:JD
M
T inalmente con estos estilos lo que hacemos es colocar las im%genes donde nos de la gana. Si
tuvi.ramos un sistema autom%tico que nos mostrara m%s im%genes estos estilos los podr"amos poner
directamente en nuestro cdigo.
7tra opcin posible para este %lbum es la de rotar las im%genes para que parezcan m%s desordenadas!
para ello tan solo tendr"amos que aadir la propiedad 2web1it2transorm: rotate=3deg>D a cada imagen!
siendo 3 los grados a rotar.
Podemos ver como se queda nuestro album en el siguiente enlace.
+n el siguiente art"culo veremos como crear un men, din%mico sin Vavascript ni $Uuery ni
programacin en otros lengua$es que no sean &'() y CSS 3.
#uevo e$emplo de animaciones CSS 3! en el que construimos un men, animado con &'() y CSS! sin
necesidad de Vavascript ni $Uuery.
Por Sara Alvarez
Object 27
+n este nuevo art"culo de nuestro manual sobre animacin con CSS 3 vamos a realizar un men,
din%mico con tan solo &'() y CSS 3. Personalmente me ha parecido sencillo y puede darnos muchas
posibilidades a la hora de maquetar nuestra web! ya que no necesitamos tener conocimientos de
Vavascript ni de $Uuery.
0ntes de ponernos manos a la obra! sugiero ver el resultado inal en este enlace. Pero recordar que
solamente los navegadores que soporten animaciones CSS lo podr%n ver correctamente. +n el momento
de escribir este art"culo los navegadores con los que ver%s bien el e$emplo son: 5oogle Chrome y
Saari. 0unque cabe destacar que 7pera y (ozilla 9ireo3 estan en base beta y algunas propiedades
como transition y bo32shadow uncioan.
*ota) Como la especiicacin de las animaciones CSS todav"a se encuentra en ase de borrador! a todas
las propiedades asociadas con ellas se les aade el prei$o A2moz2A para usarse en 5ec1o=9ireo3 L>.
Para la compatibilidad con 8ebNit! se aconse$a usar tambi.n el prei$o A2web1it2A y para la
compatibilidad con 7pera! el prei$o A2o2A. +s decir! por e$emplo! especiicar"as la propiedad de
transicin como 2moz2transition! 2web1it2transition y 2o2transition.
)o primero que vamos a hacer es crearnos nuestro &'()! es decir! el cdigo necesario que
utilizar"amos para crearnos nuestro men, normalmente! eso si! realizado con D<Os y no con tablas.
?WD7C'TP+ &'() PP6)<C A2;;83C;;D'D &'() K.E 'ransitional;;+#AB
?htmlB
?headB
?titleB(en, animado con CSS?;titleB
?lin1 rel@AstylesheetA hre@Amenu.cssA type@Ate3t;cssAB
?;headB
?bodyB
?div class@Amenu2generalAB
?ul class@AnavAB
?liB?a hre@Ahttp:;;www.desarrolloweb.com;html;AB&'()?;aB?;liB
?liB?a hre@Ahttp:;;www.desarrolloweb.com;css;ABCSS?;aB?;liB
?liB?a hre@Ahttp:;;www.desarrolloweb.com;$avascript;ABVavascript?;aB?;liB
?liB?a hre@Ahttp:;;www.desarrolloweb.com;asp;AB0SP?;aB?;liB
?liB?a hre@Ahttp:;;www.desarrolloweb.com;php;ABP&P?;aB?;liB
?;ulB
?;divB
?;divB
?;bodyB
?;htmlB
Como pod.is ver no tiene nada del otro mundo! es simplemente un men, en el que utilizamos un
listado.
6ien pues ahora vamos a dar estilos a los D<O y al listado para crear nuestro men, din%mico.
)o primero que vamos a realizar es un ondo! simplemente para que el men, quede bien en nuestro
e$emplo.
bodyC
bac1ground: 2web1it2gradient=linear! let top! let bottom! rom=F3Lbdc>! to=FKHa>>D
M
+ste ono es de un color azul que va degrad%ndose a un blanco de arriba hacia aba$o.
0 continuacin vamos a darle estilos a nuestro menu2general:
.menu2general C
position: relativeD
loat: letD
M
Simplemente vamos a hacer que lote a la izquierda y que tenga una posicin relativa =+sto es
importante para que nuestra animacin uncione correctamente>.
0hora ya pasamos a los estilos del listado de nuestro men,:
ul.nav C
list2style: noneD
display: bloc1D
width: /EEp3D
position: relativeD
top: KEp3D
let: -EEp3D
padding: JEp3 E JEp3 ED
2web1it2bac1ground2size: KEQ -EEQD
2moz2bac1ground2size: KEQ -EEQD
2o2bac1ground2size: KEQ -EEQD
M
0qu" lo que hacemos es quitar los guiones del listado! situamos el listado y le damos un tamao. 0l
inal le damos la animacin de transormar el tamao del KEQ al -EEQ. esto nos dar% la animacin que
queremos! es decir! que se haga grande el botn.
ul.nav li a C
2web1it2transition: all E.3s ease2outD
2moz2transition: all E.3s ease2outD
2o2transition: all E.3s ease2outD
bac1ground: FIIeEHD
color: F-ILHJID
padding: Ip3 -Kp3 Ip3 -Kp3D
2web1it2border2top2right2radius: -Ep3D
2moz2border2top2right2radius: -Ep3D
2o2border2top2right2radius: -Ep3D
2web1it2border2bottom2right2radius: -Ep3D
2moz2border2bottom2right2radius: -Ep3D
2o2border2bottom2right2radius: -Ep3D
2web1it2border2top2let2radius: -Ep3D
2moz2border2top2let2radius: -Ep3D
2o2border2top2let2radius: -Ep3D
2web1it2border2bottom2let2radius: -Ep3D
2moz2border2bottom2let2radius: -Ep3D
2o2border2bottom2let2radius: -Ep3D
width: -EEp3D
display: bloc1D
te3t2decoration: noneD
2web1it2bo32shadow: /p3 /p3 Lp3 FEe-JGbD
2moz2bo32shadow: /p3 /p3 Lp3 FEe-JGbD
2o2bo32shadow: /p3 /p3 Lp3 FEe-JGbD
M
+n este estilo lo que hacemos es construir los botones de nuestro men,. )e damos un color de ondo!
unas esquinas redondeadas! y una sobra alrededor.
ul.nav li a:hover C
bac1ground: FaeIID
color: FJIaKcdD
padding: Ip3 -Kp3 Ip3 3Ep3D
M
T por ultimo le damos estilos a nuestro men, para cuando pasemos por encima con el ratn.
Con esto ya tendr"a que uncionarnos nuestro men,! eso si! recordando siempre que en el momento de
escribir este art"culo slo uncionaba completamente para los navegadores Saari y Chrome y
parcialmente para (ozilla 9ireo3 y 7pera.
Podemos ver el e$emplo en marcha en una p%gina aparte.
Creamos una serie de botones con colores y eectos al pasar el ratn sobre ellos! ,nicamente con CSS
3.
Por Sara Alvarez
Object 28
+n este art"culo vamos a ver como crear botones con CSS3. +stos botones van a tener dierentes
colores y tamaos! y todos ellos tendr%n un pequeo eecto al pasar el ratn por encima.
)o primero que vamos a ver ser. el cdigo html necesario para mostrar nuestro botn.
Partimos de que cada botn tendr% una clase que vendr% dada por el tamao que queremos mostrar y el
color del botn.
Si vemos el cdigo nos quedar% m%s claro:
?a class@Abutton pequeno azulA hre@AFAB?spanB6otn?;spanB?;aB
Cmo pod.is ver tenemos la clase boton pequeno azul! pero podr"a ser boton mediano ro$o! o similar!
siempre manteniendo i$a la clase boton que es la principal y la que nos va a dibu$ar el botn.
Pna vez que tenemos esto en nuestro archivo html! tenemos que irnos al archivo css donde vamos a
crear los estilos necesarios para mostrar nuestros botones.
+mpezamos creando el estilo boton:
.button! .button span C
display: inline2bloc1D
2web1it2border2radius: Lp3D
2moz2border2radius: Lp3D
border2radius: Lp3D
M
.button C
white2space: nowrapD
line2height:-emD
position:relativeD
outline: noneD
overlow: visibleD
cursor: pointerD
border: -p3 solid FGGGD
border: rgba=E! E! E! ./> -p3 solidD
border2bottom:rgba=E! E! E! .L> -p3 solidD
2web1it2bo32shadow: E -p3 /p3 rgba=E!E!E!./>D
2moz2bo32shadow: E -p3 /p3 rgba=E!E!E!./>D
bo32shadow: E -p3 /p3 rgba=E!E!E!./>D
bac1ground: 2moz2linear2gradient=
center top!
rgba=/KK! /KK! /KK! .-> EQ!
rgba=E! E! E! .-> -EEQ
>D
bac1ground: 2web1it2gradient=
linear!
center bottom!
center top!
rom=rgba=E! E! E! .->>!
to=rgba=/KK! /KK! /KK! .->>
>D
2moz2user2select: noneD
2web1it2user2select:noneD
21html2user2select: noneD
user2select: noneD
margin2bottom:-Ep3D
M
.button.ull! .button.ull span C
display: bloc1D
M
.button:hover! .button.hover C
center top!
rgba=/KK! /KK! /KK! ./> EQ!
rgba=/KK! /KK! /KK! .-> -EEQ
>D
linear!
center bottom!
center top!
rom=rgba=/KK! /KK! /KK! .->>!
to=rgba=/KK! /KK! /KK! ./>>
>D
M
.button:active! .button.active C
top:-p3D
M
.button span C
position: relativeD
color:FD
te3t2shadow:E -p3 -p3 rgba=E! E! E! E./K>D
border2top: rgba=/KK! /KK! /KK! ./> -p3 solidD
padding:E.Jem -.3emD
line2height:-emD
te3t2align:centerD
M
+l cdigo no vamos a pasar a comentarlo linea a linea ya que damos por sentado que hab.is le"do
nuestro manual de CSS 3 y comprend.is dicha nomenclatura.
Slo destacar que hemos utilizado los prei$os moz2 y web1it2 para que sea compatible con varios
navegadores! como son 9ireo3! Chrome y Saari! y que adem%s hemos creado el eecto de cambiar un
poco el color de ondo al pasar el ratn sobre el botn. +sto lo hemos realizado en el estilo
.boton:hover! .boton.hover
Pna vez que tenemos el estilo del botn vamos a crear dierentes estilos para los tamaos:
.button.pequeno span C
ont2size:-/p3D
M
.button.mediano span C
ont2size:-Jp3D
M
.button.grande span C
ont2size://p3D
M
Con esto ya slo nos queda los estilos para los colores! aqu" pod.is crear tantos estilos como colores
quer%is poder implementar en vuestros botones.
Pn e$emplo de estilos para 3 colores por e$emplo ser"a el siguiente:
.button.ro$o C
bac1ground2color: FeJ/I/ID
M
.button.naran$a C
bac1ground2color: FKcEED
M
.button.azul C
bac1ground2color: FEE0D++D
M
T terminamos nuestro CSS quitando el subrayado a nuestros enlaces para que no aparezcan los botones
con ello.
0C
color: FEEEEccD
M
Con esto tenemos todo lo necesario para mostrar nuestros botones. Podemos ver el e$emplo
uncionando en una p%gina aparte.
Para inalizar os de$o el cdigo completo del archivo .html y del .css
6oton.html
?WD7C'TP+ htmlB
?htmlB
?headB

?titleB6otones CSS 3?;titleB
?lin1 rel@AstylesheetA hre@Abotones2css3.cssA type@Ate3t;cssAB

?;headB
?bodyB
?a class@Abutton pequeno ro$oA hre@AFAB?spanB6otn?;spanB?;aB
?brB
?a class@Abutton mediano naran$aA hre@AFAB?spanB6otn?;spanB?;aB
?brB
?a class@Abutton grande azulA hre@AFAB?spanB6otn?;spanB?;aB
?;bodyB
?;htmlB
?a class@Aboton pequeno grisA hre@AFAB?spanB6otn?;spanB?;aB
?;bodyB
?;htmlB
boton2css3.css
.button! .button span C
display: inline2bloc1D
2web1it2border2radius: Lp3D
2moz2border2radius: Lp3D
border2radius: Lp3D
M
.button C
line2height:-emD
position:relativeD
outline: noneD
overlow: visibleD
cursor: pointerD
border: -p3 solid FGGGD
border: rgba=E! E! E! ./> -p3 solidD
border2bottom:rgba=E! E! E! .L> -p3 solidD
2web1it2bo32shadow: E -p3 /p3 rgba=E!E!E!./>D
2moz2bo32shadow: E -p3 /p3 rgba=E!E!E!./>D
bo32shadow: E -p3 /p3 rgba=E!E!E!./>D
center top!
rgba=/KK! /KK! /KK! .-> EQ!
rgba=E! E! E! .-> -EEQ
>D
linear!
center bottom!
center top!
rom=rgba=E! E! E! .->>!
to=rgba=/KK! /KK! /KK! .->>
>D
2moz2user2select: noneD
2web1it2user2select:noneD
21html2user2select: noneD
user2select: noneD
margin2bottom:-Ep3D
M
.button.ull! .button.ull span C
display: bloc1D
M
.button:hover! .button.hover C
center top!
rgba=/KK! /KK! /KK! ./> EQ!
rgba=/KK! /KK! /KK! .-> -EEQ
>D
linear!
center bottom!
center top!
rom=rgba=/KK! /KK! /KK! .->>!
to=rgba=/KK! /KK! /KK! ./>>
>D
M
.button:active! .button.active C
top:-p3D
M
.button span C
position: relativeD
color:FD
te3t2shadow:E -p3 -p3 rgba=E! E! E! E./K>D
border2top: rgba=/KK! /KK! /KK! ./> -p3 solidD
padding:E.Jem -.3emD
line2height:-emD
te3t2align:centerD
M
.button.pequeno span C
ont2size:-/p3D
M
.button.mediano span C
ont2size:-Jp3D
M
.button.grande span C
ont2size://p3D
M
.button.ro$o C
bac1ground2color: FeJ/I/ID
M
.button.naran$a C
bac1ground2color: FKcEED
M
.button.azul C
bac1ground2color: FEE0D++D
M
0C
color: FEEEEccD
M
0plicaciones atractivas con transiciones CSS3.
Por %avid (ousset
Object 29
<na aplicaci+n atractiva tiene 4ue provocar un impacto visual agradable en el usuario; =os
usuarios siempre /an de saber 4ue cual4uier orden su2a >mediante clic del rat+n, una pulsaci+n
en pantalla o cual4uier otra forma8 se recibe e interpreta de forma correcta en la aplicaci+n, 2 las
animaciones ofrecen una manera mu2 interesante de conseguir esto;
)a nueva especiicacin &'()K =aunque! en honor a la verdad! tendr"a que decir Ala nueva
especiicacin CSS3A> incorpora una herramienta muy potente para gestionar animaciones sencillas: las
transiciones.
Seg,n se indica en la especiicacin ACSS 'ransitions (odule )evel 3A que podemos leer en el sitio
web del 83C! las transiciones CSS3 permiten realizar cambios en los valores CSS de manera
progresiva durante un tiempo determinado.
+l ob$etivo de este art"culo consiste! en primer lugar! en describir el concepto de transicin y despu.s
ver cmo unciona CSS3 'ransitions y cmo podemos mane$ar el resultado en los navegadores que no
soportan esta uncionalidad.
0dem%s! sugiero que os le%is el art"culo A<ntroduccin a las animaciones con CSS3A =escrito por m"
mismo> que os puede servir de complemento ideal para este otro.
Para saber cmo se utilizan las transiciones con CSS3 he desarrollado un e$emplo de un $uego que
utiliza CSS3 'ransitions para animar las ichas de un puzzle =y que incluye un fallback hecho con
VavaScript si el navegador no soporta CSS3 'ransitions >:
Para disponer de la versin e$ecutable de este $uego! visita mi blog aqu". +l cdigo del $uego lo puedes
encontrar aqu".
#ntroducci+n
0l principio! el grupo de traba$o de CSS dentro del 83C se resist"a a integrar las transiciones dentro de
CSS argumentando que en realidad no son propiedades de los estilos! pero inalmente los diseadores y
desarrolladores consiguieron convencerles de que las transiciones son en realidad estilos din%micos y
que pueden tener cabida dentro de un archivo CSS.
Seg,n se puede leer en el sitio web del 83C! CSS3 'ransitions permite crear variaciones progresivas
sobre los siguientes tipos de propiedades:
-. Color: interpolacin entre los componentes ro$o! verde! azul y alpha =tratando a cada uno como
un n,mero! como se ver% m%s adelante>.
/. )ongitud: interpolando entre valores e3presados como n,meros reales.
3. Porcenta$e: interpolando entre valores e3presados como n,meros reales.
L. +ntero: interpolado en pasos discretos =n,meros completos>. )a interpolacin tiene lugar en el
espacio de los n,meros reales y se convierte a entero utilizando la uncin loor=>.
K. #,mero: se interpola entre valores e3presados como n,meros reales =coma lotante>.
J. )ista de transormacin: puedes consultar la especiicacin CSS 'ransorms en:
http:;;www.w3.org;'4;css32/d2transorms;.
I. 4ect%ngulo: se interpolan los valores 3 e y! y los componentes de anchura y altura =todos estos
valores se tratan como n,meros>.
H. Oisibilidad: se interpola en orma de pasos discretos. )a interpolacin se produce en el espacio
de n,meros entre el cero! el -! donde - signiica AvisibleA y el resto de valores son AhiddenA
=ocultos>.
G. Sombra: se interpolan los valores de color! coordenadas 3 e y! y el componente de diuminado
=blur>! tratando todos los valores como de color o n,mero seg,n corresponda. +n aquellos casos
donde e3isten listas de sombras! la lista m%s corta se rellena al inal con sombras de color
transparente y todas las longitudes =3!y y diuminado>! con valor cero.
-E.5radiente: se interpolan los valores de posicin y color en cada parada. 'ienen que ser del
mismo tipo =radial o lineal > y con el mismo n,mero de paradas para poder realizar la
animacin.
--.Servidor de dibu$o =SO5>: la interpolacin solo est% soportada para las transiciones de gradiente
a gradiente y de color a color. 9uncionan como se ha descrito antes para cada uno de esos
valores.
-/.)ista separada mediante espacios de los elementos anteriores: si la lista tiene el mismo n,mero
de elementos! cada elemento dentro de ella se interpola siguiendo las reglas anteriores. Si no! no
se produce la interpolacin.
-3.Pna propiedad abreviada: si todas las partes de una abreviatura se pueden animar! la
interpolacin se eect,a como si se hubiera especiicado cada una de las propiedades de manera
individual.
T esta es la lista de propiedades que se pueden modiicar mediante transiciones:
-. bac1ground2color =color>
/. bac1ground2image =solo gradientes>
3. bac1ground2position =porcenta$e y longitud>
L. border2bottom2color =color>
K. border2bottom2width =longitud>
J. border2color =color>
I. border2let2color =color>
H. border2let2width =longitud>
G. border2right2color =color>
-E.border2right2width =longitud>
--.border2spacing =longitud>
-/.border2top2color =color>
-3.border2top2width =longitud>
-L.border2width =longitud>
-K.bottom =longitud y porcenta$e>
-J.color =color>
-I.crop =rect%ngulo>
-H.ont2size =longitud y porcenta$e>
-G.ont2weight =n,mero>
/E.grid2\ =diversos valores>
/-.height =longitud y porcenta$e>
//.let =longitud y porcenta$e>
/3.letter2spacing =longitud>
/L.line2height =n,mero! longitud y porcenta$e>
/K.margin2bottom =longitud>
/J.margin2let =longitud>
/I.margin2right =longitud>
/H.margin2top =longitud>
/G.ma32height =longitud y porcenta$e>
3E.ma32width =longitud y porcenta$e>
3-.min2height =longitud y porcenta$e>
3/.min2width =longitud y porcenta$e>
33.opacity =n,mero>
3L.outline2color =color>
3K.outline2oset =entero>
3J.outline2width =longitud>
3I.padding2bottom =longitud>
3H.padding2let =longitud>
3G.padding2right =longitud>
LE.padding2top =longitud>
L-.right =longitud y porcenta$e>
L/.te3t2indent =longitud y porcenta$e>
L3.te3t2shadow =sombra>
LL.top =longitud y porcenta$e>
LK.vertical2align =palabras clave! longitud y porcenta$e>
LJ.visibility =visibilidad>
LI.width =longitud y porcenta$e>
LH.word2spacing =longitud y porcenta$e>
LG.z2inde3 =entero>
KE.zoom =n,mero>
S1,
)as propiedades de los ob$etos SO5 son susceptibles de animacin si se deinen con la cl%usula
animatable:true en la especiicacin SO5: http:;;www.w3.org;'4;SO5;struct.html.
%eclaraciones
Para declarar una transicin en un archivo CSS nos basta con escribir el siguiente cdigo:
transition2property: allD
transition2duration: E.KsD
transition2timing2unction: easeD
transition2delay: EsD
+sta declaracin indica que cualquier modiicacin del valor de cualquier propiedad debe hacerse en un
intervalo de E!K segundos =y no de orma inmediata>.
T podemos tambi.n deinir las transiciones a nivel individual para cada propiedad:
transition2property: opacity let topD
transition2duration: E.Ks E.Hs E.-sD
transition2timing2unction: ease linear easeD
transition2delay: Es Es -sD
9inalmente! podemos utilizar la propiedad abreviada AtransitionA para deinir todo lo necesario en una
sola l"nea:
transition: all E.Ks ease EsD
+n esta versin abreviada se pueden incorporar todas las propiedades que queramos! separ%ndolas con
comas:
transition: opacity E.Ks ease Es! let E.Hs linear EsD
)as transiciones se disparan cuando se modiica una propiedad del ob$eto indicado. )a modiicacin se
puede hacer con VavaScript o utilizando CSS3 mediante la asignacin de una nueva clase a una
etiqueta.
Por e$emplo! si usamos <+-E! tenemos la siguiente declaracin CSS3:
2ms2transition2property: opacity let topD
2ms2transition2duration: E.Ks E.Hs E.KsD
2ms2transition2timing2unction: ease linear easeD
Cuando actualicemos la opacidad en nuestra etiqueta! se inicia una animacin que va alterando
progresivamente el valor desde el actual al nuevo! durante E!K segundos! con una uncin de a$uste no
lineal a lo largo de ese intervalo =easing>! que nos proporciona el eecto de una animacin suave.
!ransiciones no lineales
)a l"nea Atransition2timing2unctionA indica que la transicin no va a ser lineal! sino que utilizar% una
uncin de tiempo que genera una animacin no lineal. 6%sicamente! las transiciones CSS3 utilizan la
uncin de curva de 6ezier c,bica para suavizar las transiciones mediante el c%lculo de distintos
valores de velocidad durante el intervalo de e$ecucin.
&ay otras unciones de transicin tambi.n soportadas:
-. )inear: transicin a velocidad constante
/. Cubic2bezier: la velocidad se calcula de acuerdo con la uncin de curva 6ezier c,bica deinida
por dos puntos de control! PE y P- =as" que tenemos que deinir L valores en este caso: PE32PEy
y P-32 P-y>
3. +ase: )a velocidad se calcula seg,n la uncin de curva 6ezier c,bica con los par%metros =E./K!
E.-! E./K! ->
L. +ase2in: )a velocidad se calcula con la uncin de curva 6ezier con los par%metros =E.L/! E! -!
->
K. +ase2inout: )a velocidad se calcula con la uncin de curva 6ezier con los par%metros =E.L/! E!
E.KH! ->
J. +ase2out: )a velocidad se calcula con la uncin de curva 6ezier con los par%metros =E! E! E.KH!
->
+n http:;;www.catuhe.com;msdn;transitions;easingunctions.htm tenemos una herramienta de
simulacin =utilizando SO5 por supuesto> para mostrar el impacto de cada una de estas unciones de
a$uste.
+ste simulador est% escrito totalmente en VavaScript para acilitar la comprensin de la uncin:
'40#S<'<7#S&+)P+4.computeCubic6ezierCurve<nterpolation @ unction =t! 3-! y-! 3/! y/> C
;; +3trae * =que aqu" equivale al tiempo>
var E @ - 2 3 \ 3/ ` 3 \ 3-D
var - @ 3 \ 3/ 2 J \ 3-D
var / @ 3 \ 3-D
var reined' @ tD
or =var i @ ED i ? KD i``> C
var reined'/ @ reined' \ reined'D
var reined'3 @ reined'/ \ reined'D
var 3 @ E \ reined'3 ` - \ reined'/ ` / \ reined'D
var slope @ -.E ; =3.E \ E \ reined'/ ` /.E \ - \ reined' ` />D
reined' 2@ =3 2 t> \ slopeD
reined' @ (ath.min=-! (ath.ma3=E! reined'>>D
M
;; 4esuelve la curba 6ezier c,bica para el valor 3 dado
return 3 \ (ath.pow=- 2 reined'! /> \ reined' \ y- `
3 \ =- 2 reined'> \ (ath.pow=reined'! /> \ y/ `
(ath.pow=reined'! 3>D
MD
+ste cdigo es la implementacin de la curva 6ezier c,bica basada en esta deinicin y puedes
encontrar el cdigo uente del simulador aqu".
(etardo
)a l"nea Atransition2delayA determina el retardo que se produce entre el momento en que se modiica el
valor de la propiedad y el comienzo de la transicin.
-ventos
0l inal de cada transicin se dispara un evento llamado A'ransition+ndA. Dependiendo de qu.
navegador utilicemos! el nombre cambia:
Chrome y Saari: web1it'ransition+nd
9ireo3: moz'ransition+nd
7pera: o'ransition+nd
<nternet +3plorer: (S'ransition+nd
+l evento nos pasa la siguiente inormacin:
Property#ame: #ombre de la propiedad animada
+lapsed'ime: )a cantidad de tiempo! en segundos que ha estado desarroll%ndose la transicin
+ste ser"a un e$emplo de uso en <+-E:
bloc1.add+vent)istener=A(S'ransition+ndA! on'ransition+vent>D
Ms sobre las transiciones CSS3
Puedo sugerir dos e3celentes razones por las cuales las transiciones CSS3 van a ser muy ,tiles:
-. 0celeracin por hardware: las transiciones basadas en CSS3 las mane$a directamente la 5PP =si
e3iste en el equipo> dando lugar a resultados mucho m%s suaves. T esto es verdaderamente
importante en los dispositivos mviles! cuya capacidad de computacin! en general! es limitada.
/. (ayor independencia entre el cdigo y el diseo: desde mi punto de vista! el desarrollador no
deber"a tener que ocuparse de las animaciones ni de nada relacionado con el diseo. Por esa
misma razn! el diseador;artista no tendr"a que ocuparse del VavaScript. Por eso me parece que
CSS3 'ransitions es una novedad realmente interesante para los diseadores! que pueden
describir todas las transiciones utilizando CSS sin involucrar a los programadores.
Soporte 2 fallbac0
Desde la versin PP3! <+-E =que ya podemos descargar con la versin Preliminar de Desarrollo de
8indows H desde aqu"> soporta las transiciones CSS3:
<norme obtenido desde http:;;caniuse.com;Fsearch@CSS3 transitions.
Sin duda! puesto que la especiicacin a,n no est% terminada =est% en la ase working draft>! nos va a
tocar utilizar los prei$os de abricante: 2ms2! 2moz2! 2web1it2! 2o2.
Podemos adem%s ver que! obviamente! ser% necesaria una solucin transparente para resolver la
situacin que se va a presentar en el resto de navegadores. Si el navegador no soporta la uncionalidad!
tendremos que preparar un fallback programando con VavaScript.
Conviene tener preparado un m.todo de allbac1 si las uncionalidades de tus sitios web dependen de
las transiciones. Si no quieres hacerlo! deber"as pensar en utilizar las transiciones solamente como
me$oras de diseo. +n este caso el sitio web seguir% uncionando! pero la e3periencia completa solo se
podr% ver en los navegadores que la soporten. 0qu" solemos hablar de Ame$oras progresivasA ya que
cuanto m%s potente es el navegador! m%s uncionalidades nos permite orecer.
!ransiciones sin CSS3 !ransitions
0s" pues! para incluir un allbac1 para los navegadores no compatibles con CSS3 'ransitions! vamos a
desarrollar un pequeo 1it de herramientas que har%n lo mismo por programacin.
)o primero! vamos a crear un ob$eto contenedor para nuestro espacio de nombres:
var '40#S<'<7#S&+)P+4 @ '40#S<'<7#S&+)P+4 ]] CMD
'40#S<'<7#S&+)P+4.tic1<nterval<D @ ED
'40#S<'<7#S&+)P+4.easing9unctions @ C
linear:E!
ease:-!
easein:/!
easeout:3!
easeinout:L!
custom:K
MD
'40#S<'<7#S&+)P+4.current'ransitions @ Z[D
Para dar soporte al mismo nivel de unciones de velocidad de transicin! tenemos que declarar un
AenumA con todos los campos necesarios.
+l 1it de herramientas se basa en una uncin a la que se llama cada -Ims =para conseguir animaciones
a JEps>. )a uncin ir% pasando a trav.s de una coleccin de transiciones activas. Para cada transicin!
el cdigo eval,a el siguiente valor calculado a partir del valor actual y el indicado como valor inal.
#ecesitamos una serie de unciones muy ,tiles para e3traer el valor de las propiedades y las unidades
de medida utilizadas:
'40#S<'<7#S&+)P+4.e3tractOalue @ unction =string> C
try C
var result @ parse9loat=string>D
i =is#a#=result>> C
return ED
M
return resultD
M catch =e> C
return ED
M
MD
'40#S<'<7#S&+)P+4.e3tractPnit @ unction =string> C
;; si el valor est% vac"o! suponemos que se e3presa en p3
i =string @@ AA> C
return Ap3AD
M
var value @ '40#S<'<7#S&+)P+4.e3tractOalue=string>D
var unit @ string.replace=value! AA>D
return unitD
MD
)a uncin principal procesar% las transiciones activas y llamar% a la uncin c,bica 6ezier para
calcular los valores actuales:
'40#S<'<7#S&+)P+4.tic1 @ unction => C
;; Procesando transiciones
or =var inde3 @ ED inde3 ? '40#S<'<7#S&+)P+4.current'ransitions.lengthD inde3``> C
var transition @ '40#S<'<7#S&+)P+4.current'ransitionsZinde3[D
;; calcula el nuevo valor
var currentDate @ =new Date>.get'ime=>D
var di @ currentDate 2 transition.startDateD
var step @ di ; transition.durationD
var oset @ -D
;; 9uncin de timing
switch =transition.ease> C
case '40#S<'<7#S&+)P+4.easing9unctions.linear:
oset @ '40#S<'<7#S&+)P+4.computeCubic6ezierCurve<nterpolation=step! E! E! -.E! -.E>D
brea1D
case '40#S<'<7#S&+)P+4.easing9unctions.ease:
oset @ '40#S<'<7#S&+)P+4.computeCubic6ezierCurve<nterpolation=step! E./K! E.-! E./K! -.E>D
brea1D
case '40#S<'<7#S&+)P+4.easing9unctions.easein:
oset @ '40#S<'<7#S&+)P+4.computeCubic6ezierCurve<nterpolation=step! E.L/! E! -.E! -.E>D
brea1D
case '40#S<'<7#S&+)P+4.easing9unctions.easeout:
oset @ '40#S<'<7#S&+)P+4.computeCubic6ezierCurve<nterpolation=step! E! E! E.KH! -.E>D
brea1D
case '40#S<'<7#S&+)P+4.easing9unctions.easeinout:
oset @ '40#S<'<7#S&+)P+4.computeCubic6ezierCurve<nterpolation=step! E.L/! E! E.KH! -.E>D
brea1D
case '40#S<'<7#S&+)P+4.easing9unctions.custom:
oset @ '40#S<'<7#S&+)P+4.computeCubic6ezierCurve<nterpolation=step!
transition.custom+aseP-*! transition.custom+aseP-T! transition.custom+aseP/*!
transition.custom+aseP/T>D
brea1D
M
oset \@ =transition.inalOalue 2 transition.originalOalue>D
var unit @ '40#S<'<7#S&+)P+4.e3tractPnit=transition.target.styleZtransition.property[>D
var currentOalue @ transition.originalOalue ` osetD
transition.currentDate @ currentDateD
;; R'ransicin muertaS
i =currentDate B@ transition.startDate ` transition.duration> C
currentOalue @ transition.inalOalueD ;; Clamping
'40#S<'<7#S&+)P+4.current'ransitions.splice=inde3! ->D ;; 4emoving transition
inde322D
;; +vento inal
i =transition.onCompletion> C
transition.onCompletion=Cproperty#ame:transition.property! elapsed'ime:transition.durationM>D
M
M
;; Oalor inal
transition.target.styleZtransition.property[ @ currentOalue ` unitD
M
MD
)a versin actual del 1it de herramientas solo soporta valores num.ricos! pero si quieres animar valores
comple$os =como el color>! simplemente tienes que descomponerlos en valores individuales.
+l registro de una transicin en el sistema se har"a utilizando este cdigo:
'40#S<'<7#S&+)P+4.transition @ unction =target! property! newOalue! duration! ease!
custom+aseP-*! custom+aseP-T! custom+aseP/*! custom+aseP/T! onCompletion> C
;; Creamos una nueva transicin
var transition @ C
target: target!
property: property!
inalOalue: newOalue!
originalOalue: '40#S<'<7#S&+)P+4.e3tractOalue=target.styleZproperty[>!
duration: duration!
startDate: =new Date>.get'ime=>!
currentDate: =new Date>.get'ime=>!
ease:ease!
custom+aseP-*:custom+aseP-*!
custom+aseP/*:custom+aseP/*!
custom+aseP-T: custom+aseP-T!
custom+aseP/T: custom+aseP/T!
onCompletion: onCompletion
MD
;; 0rranca el sevicio de tic1 si es preciso
i ='40#S<'<7#S&+)P+4.tic1<nterval<D @@ E> C
'40#S<'<7#S&+)P+4.tic1<nterval<D @ set<nterval='40#S<'<7#S&+)P+4.tic1! -I>D
M
;; +limina las transiciones anteriores para la misma propiedad y ob$eto
or =var inde3 @ ED inde3 ? '40#S<'<7#S&+)P+4.current'ransitions.lengthD inde3``> C
var temp @ '40#S<'<7#S&+)P+4.current'ransitionsZinde3[D
i =temp.target @@@ transition.target aa temp.property @@@ transition.property> C
'40#S<'<7#S&+)P+4.current'ransitions.splice=inde3! ->D
inde322D
M
M
;; 4egistramos
i =transition.originalOalue W@ transition.inalOalue> C
'40#S<'<7#S&+)P+4.current'ransitions.push=transition>D
M
MD
)a uncin Atic1A arranca la primera vez que se activa la transicin.
9inalmente! tendremos que utilizar modernizr para saber si el navegador soporta CSS3 'ransitions. Si
no! podemos de$ar nuestro 1it como allbac1.
+l cdigo para el 'ransitions&elper se puede descargar desde aqu":
http:;;www.catuhe.com;msdn;transitions;transitionshelper.$s
Por e$emplo! en mi $uego de puzzle! utilizo este cdigo para animar las piezas:
i =WPPbb)+.is'ransitionsSupported> C
'40#S<'<7#S&+)P+4.transition=bloc1.div! AtopA! bloc1.3 \ totalSize ` oset! KEE!
'40#S<'<7#S&+)P+4.easing9unctions.ease>D
'40#S<'<7#S&+)P+4.transition=bloc1.div! AletA! bloc1.y \ totalSize ` oset! KEE!
'40#S<'<7#S&+)P+4.easing9unctions.ease>D
M
else C
bloc1.div.style.top @ =bloc1.3 \ totalSize ` oset> ` Ap3AD
bloc1.div.style.let @ =bloc1.y \ totalSize ` oset> ` Ap3AD
M
Se puede ver que podr"a haber empleado otra solucin para animar las cuadr"culas en el caso de que
CSS3 'ransitions estuviera soportado: podr"a haber deinido una coleccin de clases CSS3 con valores
predeinidos let y top =uno por cada celda> para aplicarlos a las piezas correspondientes.
Ta e3isten algunos entornos y 1its de desarrollo que soportan las transiciones por sotware:
$Uuery.transition.$s
$UPery20nimate2+nhanced
T por supuesto! siempre podemos utilizar el conocido y potente m.todo animate=> de $Uuery.
Conclusi+n
Como has podido comprobar! CSS3 'ransitions es sin duda una orma muy sencilla de incorporar
animaciones a nuestros proyectos. Podemos crear una aplicacin m%s reactiva simplemente aadiendo
algunas transiciones cuando vayamos a modiicar ciertos valores.
Pero adem%s tenemos dos alternativas para implementar un allbac1 con VavaScript:
-. Podemos hacerlo todo con VavaScript! y si detectamos que el navegador soporta las transiciones
CSS3! inyectar las declaraciones CSS3 en la p%gina.
/. 7 bien podemos utilizar la manera m%s ortodo3a =utilizando declaraciones CSS3 aut.nticas en
los archivos CSS> y detectar si necesitamos o no aplicar un allbac1 desde VavaScript. Para m"
esta es la me$or opcin! puesto que el allbac1 tiene que considerarse una opcin alternativa! no
la principal. De cara al uturo pr3imo! todos los navegadores van a soportar CSS3 'ransitions
y en este caso solo tendr"amos que eliminar el cdigo de allbac1. Pero adem%s es que es la
me$or =o si no! la ,nica> manera de de$ar todo el bloque CSS ba$o el control del equipo de
diseadores! retir%ndolo en lo posible de la parte de programacin.
Para saber ms
6log sobre CSS3 0nimations de David 4ousset
+speciicaciones CSS3 'ransitions
+$emplos de <+ 'est Drive sobre transiciones con CSS3
7tros art"culos de inter.s:
http:;;addyosmani.com;blog;css3transitions2$query;
http:;;css3.bradshawenterprises.com;
http:;;webdesignerwall.com;trends;LI2amazing2css32animation2demos

css3 PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

css3 PDF

Загружено:

Авторское право:

Доступные форматы

CSS 3 trae grandes novedades para el diseo de webs y algunos navegadores comienzan a implementar

Вам также может понравиться