CSS avanzado

Capitulo I. Tnicas imprescindibles

itulo 1. T6cnicas imprescindibles
El estndar CSS 2.1 incluye ms de 100 propiedades de todo tipo para disefiar el aspecto de las
pginas HTML. No obstante los disefios !eb ms actuates muestran recursos grficos "ue no se
pueden reali#ar con CSS como sombras transparencias es"uinas redondeadas y tipografla
a$an#ada. %or ese moti$o es preciso "ue los disefiadores !eb profesionales cono#can las
t&cnicas imprescindibles para crear disefios !eb a$an#ados.
En las pr&'imas secciones se muestran las siguientes t&cnicas imprescindibles(
% %ropiedades shorthand para crear )o*as de estilos concisas.
%La propiedad )asLayout de +nternet E'plorer imprescindible para solucionar muc)os
errores de ese na$egador.
%Limpiar floats, para traba*ar correctamente con los elementos posicionados de forma
flotante.
%C&mo crear elementos de la misma altura imprescindible para el /ayout o estructura de las
pginas.
% Sombras transparencias y es"uinas redondeadas "ue no se pueden crear con CSS 2.1.
%Sustituci&n de te'to por imgenes y por ,las) para utili#ar cual"uier tipografia en el
disefio de las pginas.
% -ollo$ers y sprites CSS para me*orar el tiempo de respuesta de las pginas.
% T&micas para traba*ar con el te'to y la tipografia.
1.1. Propiedades shorthand
.lgunas propiedades del estndar CSS 2.1 son especiales ya "ue permiten establecer
simultneamente el $alor de $arias propiedades diferentes. Este tipo de propiedades se
denominan "propiedades shorthand " y todos los disefiadores !eb profesionales las utili#an.
La gran $enta*a de las propiedades shorthand es "ue permiten crear )o*as de estilos muc)o ms
concisas y por tanto muc)o ms fcites de leer. . continuaci&n se incluye a modo de referencia
la definici&n formal de las seis propiedades shorthand disponibles en el estndar CSS 2.1.
font
Tipografia
Va|ores
( ( <font-style> ll <font-variant> ll <font-weight> )?
<font-size> ( / <line-height> )? <font-family> ) | caption |
icon | menu | message-box | small-caption | status-bar | inherit
Se aplica a Todos los elementos
Valor inicial
Descripci6n Permite indicar de forma directa todas las propiedades de la tipografia de un texto
Capitulo I. Tnicas imprescindibles
CSS avanzado
margin
Margen
Va|ores ( <meia> | <porcenta!e> | auto ) "#$ %& | inherit
Se aplica a
Todos los elementos salvo algunos casos especiales de elementos mostrados como
tablas
Valor inicial
Descripci6n Establece de forma directa todos los m8rgenes de un elemento
paing elleno
Va|ores ( <meia> | <porcenta!e> )"#$ %& | inherit
Se aplica a
Todos los elementos excepto algunos elementos de tablas como grupos de cabeceras y
grupos de pies de tabla
Valor inicial
Descripci6n Establece de forma directa todos los rellenos de los elementos
borde
Estilo completo de todos los bordes
Va|ores ( <borer-with> ll <borer-color> ll <borer-style> ) | inherit
Se aplica a Todos los elementos
Valor inicial
Descripci6n Establece el estilo completo de todos los bordes de los elementos
background Fondo de un elemento
Va|ores
( <bac'groun-color> ll <bac'groun-image> ||
<bac'groun-repeat> ll <bac'groun-attachment> ll
<bac'groun-position> ) | inherit
Se aplica a Todos los elementos
Valor inicial
Descripci6n Establece todas las propiedades del fondo de un elemento
list-styl
Estilo de na lista
Va|ores
! "list # st$le# t$pe% | | "li st # st$le# posit ion% & &
"list # st$le#image% ' | inherit
Se aplica a Elementos de na lista
Valor inicial
Descripci6n Propiedad (ue permite establecer de forma simultanea todas las opciones de )na
lista
Si Se considera la siguiente )o*a de estilos(
CSS avanzado
Capitulo !. Tnicas imprescindibles
P{
font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 1.em;
line-height: 1.;
font-family: !rial" sans-serif;
#
div {
margin-top: p$;
margin-right: lop$;
margin-bottom: p$;
margin-left: lop$;
padding-top: %p$;
padding-right: p$;
padding-bottom: lop$;
padding-left: &p$;
#
hl {
background-color: '((((((;
background-image: url)*imagenes+icono.png*,;
background-repeat: no-repeat;
background-position: l-p$ p$;
/tili#ando las propiedades shorthand es posible con$ertir las 20 +fneas
estilos anterior en s&lo 10 +fneas manteniendo los mismos estilos(
que ocupa la )o*a de
P{
font: normal small-caps bold 1.em+1. !rial" sans-serif;
#
div {
margin: p$ lop$;
padding: %p$ p$ lop$ &p$;
#
hl {
background: '((( url)*imagenes+icono.png*, no-repeat l-p$
5px;
1.*. la propiedad hasla$out de &nternet Explorer
El na$egador +nternet E'plorer 1 y Sus $ersiones anteriores incluyen decenas de errores
relacionados con CSS. La mayon2a de esos errores se pueden solucionar con trucos y t&cnicas "ue
apro$ec)an otros errores o caracterfsticas del na$egador. .dems muc)os errores se
solucionan gracias a la propiedad )as Layout de +nternet E'plorer.
En efecto muc)as soluciones de los errores de +nternet E'plorer consisten en orzar a un
elemento a que tenga un layout". El moti$o es "ue para mostrar los elementos de una pgina el
na$egador +nternet E'plorer di$ide a todos los elementos en dos grupos(
% Los elementos cuyo tamafio y posici&n dependen de su elemento contenedor.
% Los elementos "ue establecen su propio tamafio y posici&n.
Capitulo I. T"cmicas imprescindibles
CSS avanzado
La mayorfa de elementos de una pgina son del primer tipo ya "ue sus elementos contenedores
3normalmente el elemento 4body56 determinan su tamafio y posici&n. Los elementos del
Segundo tipo son los "ue +nternet E'plorer considera "ue tienen un /ayout.
Los elementos HTML "ue por defecto tienen un /ayout en +nternet E'plorer son(
% #$tml%&#body%
% #table%& #tr%& #t$%& #td%
% <img>
% #$r%
% #input%& #button%& #select%& #textarea%& #fieldset%& #legend%
% #if rame%& #embed%& #ob'ect%& #applet%
( <mar)uee>
No obstante algunas propiedades CSS pro$ocan "ue el elemento tenga un /ayout y por tanto
acti$an la propiedad )asLayout. La siguiente tabla muestra todas las propiedades CSS y $alores
"ue )acen "ue un elemento tenga un /ayout:
Propiedad Va|ores (ue acti+an la propiedad has,a$out -cmentarios
position
absolute& fixed f ixed s"lo en Internet Explorer (
float left&rig$t
isplay inline-bloc'
)idt$ Cual*uier valor *ue no sea aut o
min-)idt$ Cual*uier valor S"!o en Internet Explorer (
max-)idt$ Cual*uier valor S"!o en Internet Explorer (
$eig$t Cual*uier valor *ue no sea aut o
min-$eig$t Cual*uier valor S"!o en Internet Explorer (
max-$eig$t Cual*uier valor S"!o en Internet Explorer (
zoom -ual(uier +alor (ue no sea normal
)riting-mode tb-rl
overflow hidden. scroll. auto S61o en &nternet Explorer /
Las propiedades #oom y !ri t ing 7mode no se definen en ning&n estndar de CSS por"ue son
propietarias del na$egador +nternet E'plorer. Si se utili#an estas dos propiedades la )o*a de
estilos no pasa satisfactoriamente el proceso de $alidaci&n.
%ara "uitar el /ayout a un elemento es necesario establecer el $alor por defecto de todas las
propiedades de la tabla anterior "ue )ayan sido modificadas(
. width: auto"height: auto
+ max-)idt$, auto&min-)idt$, auto
CSS avanzado
Capitulo !. Tnicas imprescindibles
. position: static
. float* none
. overflow* visible
. zoom: normal
- )riting-mode, Ir-tb
Utilizando alguna de las propiedades CSS anteriores se ban ideado numerosas soluciones para
forzar a que un elemento tenga un layout. /no de los trucos ms conocidos desde bace muc)os
afios es el famoso Holly hack 3)ttp(88!!!.communitym'.com8content8
article.cfm9page:2;cid:C<1E06 "ue soluciona un problema con un elemento posicionado de
forma flotante aplicando la siguiente regla:
.selector {
height: 1/;
En el na$egador +nternet E'plorer & se puede utili#ar el truco del gui&n ba*o y la propiedad
)eig)t para for#ar a un elemento a "ue tenga /ayout:
.selector {
0height: 1/;
En +nternet E'plorer 1 se puede utili#ar la propiedad min7)eig)t utili#ando cual"uier $alor
incluso el 0(
.selector {
min-height: o;
=tra propiedad muy utili#ada en +nternet E'plorer 1 es #oom aun"ue no es una propiedad
estndar de CSS(
.selector {
zoom: 1;
En las pr&'imas secciones se presentan algunas t&cnicas "ue requieren for#ar a "ue un elemento
tenga /ayout en Internet E'plorer. Si "uieres acceder a decenas de t&cnicas "ue bacen uso de la
propiedad hasLayout, puedes consultar el articulo On having layout 3)ttp(>>!!!.sat#ansat#?de>
cssd8on)a$inglayout?)tml6 Microsoft tambi&n )a publicado un articulo +lamado HasLayout
Overview 3)ttp(>>msdn?microsoft.com>en7us>library>bb2@00A13BS?A@6.asp'6 "ue e'plica la
propiedad hasLayout y Sus implicaciones en el disebo de sin7=s !eb.
1.0. ,impiar floats
La principal caracterfstica de los elementos posicionados de forma flotante mediante la
propiedad f + oat es "ue desaparecen del flu*o normal del documento. Ce esta forma es posible
"ue algunos o todos los elementos flotantes se salgan de su elemento contenedor.
Ca pitulo !. Tnicas imprescindibles
CSS avanzado
La siguiente +magen muestra un elemento contenedor "ue encierra a dos elementos de te'to.
Como los elementos interiores esn posicionados de forma flotante y el elemento contenedor
no dispone de ms contenidos el resultado es el siguiente(
Figura !.!. .os elementos posicionados de forma flotante se salen de su elemento contenedor
c&digo HTML y CSS del e*emplo anterior se muestra a continuaci&n(
1div id2*contenedor*3
1div id2*iz4uierda*35orem ipsum dolor sit amet" consectetuer adipiscing elit. 6uis
molestie turpis vitae ante.1+div3
1div id2*derecha*35orem ipsum dolor sit amet" consectetuer adipiscing elit. 7ulla
bibendum mi non lacus.1+div3
1+div3
'contenedor {
border: thick solid '888;
'iz4uierda{
float: left;
width: 98/;
'derecha {
float: right;
width: 98/;
El
La soluci&n tradicional de este problema consiste en afiadir un elemento in$isible despu&s de
todos los elementos posicionados de forma flotante para for#ar a "ue el elemento contenedor
tenga la altura suficiente. Los elementos in$isibles ms utili#ados son 4di$5 4br5 y 4p5.
Ce esta forma si se afiade un elemento 4di$5 in$isible con la propiedad clear de CSS en el
e*emplo anterior(
1div id2*contenedor*3
1div id2*iz4uierda*35orem ipsum dolor sit amet" consectetuer adipiscing elit. 6uis
molestie turpis vitae ante.1+div3
1div id2*derecha*35orem ipsum dolor sit amet" consectetuer adipiscing elit. 7ulla
bibendum mi non lacus.1+div3
1div style2*clear: both*31+div3
1+div3
11
CSS avanzado
Capitulo !. Tnicas imprescindibles
.)ora el elemento contenedor se $isuali#a correctamente por"ue encierra a todos sus
elementos(
/0- //
1 11111
1 1 1 1 1
1 1 1
#div% invlSibIe
Figura
La t&cnica de corregir los problemas ocasionados por los elementos posicionados de forma
flotante se suele denominar "limpiar las float".
.un"ue afiadir un elemento in$isible corrige correctamente el problema se trata de una
soluci&n poco elegante e incorrecta desde el punto de $ista semntico. No tiene ning&n sentido
afiadir un elemento $acfo en el c&digo HTML sobre todo si ese elemento se utili#a
e'clusi$amente para corregir el aspecto de los contenidos.
Aortunadamente, existe una solu!i"n altemati$a para limpiar las float que no o#liga a afiadir
nue$os elementos %&'L y que adems es elegante y muy sen!illa( La solu!i"n !onsiste en
utilizar la propiedad o$er + o) de CSS so#re el elemento !ontenedor( *l autor de la solu!i"n es el
disefiador %aul +,-rien 3)ttp(88pmob.co?uD86 y se pu#li!" por primera $ez en el artfculo Simple
Clearing of Floats 3)ttp(>>!!!.sitepoint.com>blogs>200@>02>2&>simpletearingfoats>6 .
Si Se modifica el c&digo CSS anterior y se incluye la siguiente regla(
'contenedor{
border: thick solid '888;
overflow: hidden;
.)ora el contenedor encierra correctamente a los dos elementos 4di$5 interiores y no es
necesario afiadir ning&n elemento adicional en el c&digo HTML. .dems del $alor )idden
tambi&n es posible utili#ar el $alor auto obteniendo el mismo resultado.
Esta soluci&n funciona correctamente en todas las $ersiones recientes de los na$egadores
incluyendo +nternet E'plorer 1 y A. No obstante en las $ersiones anteriores de +nternet E'plorer
es necesario afiadir cual"uier propiedad CSS "ue obligue al na$egador a considerar "ue el
elemento contenedor ocupa sitio en la pgina.
T&cnicamente esta estrategia se conoce como forzar a que Internet Eplorer a!ti"e la propiedad
hasLayout so#re el elemento. . continuaci&n se muestran algunas t&cnicas sencillas para
conseguirlo(
11
Ca pitulo !. Tnicas imprescindibles
+: Funciona correctamente con cualquier navegador */
'contenedor {
border: thick solid '888;
overflow: hidden;
width: 188/;
+: Funciona correctamente con cualquier navegador */
'contenedor {
border: thick solid '888;
overflow: hidden;
height: 1/;
CSS avanzado
/* La propiedad zoom no es porte del estdndar CSS, par lo
que esta hoja de estilos no validaria */
'contenedor {
border: thick solid '888;
overflow: hidden;
zoom: 1;
/* El truco del gui6n bajo delante de las propiedades CSS no
lo interpreta correctamente la version de !nternet E"plorer */
'contenedor {
border: thick solid 'ooo;
overflow: hidden;
0height: 1/;
Ce todas las soluciones anteriores la ms utili#ada es la "ue establece la propiedad )e ig)t ( 1E
ya "ue normalmente es la "ue menos afecta al aspecto del elemento contenedor. Considerando
todo lo anterior a continuaci&n se muestra la soluci&n definiti$a para limpiar las $%oats, "ue es
compatible con todos los na$egadores y "ue )ace "ue la )o*a de estilos sea lida(
'contenedor{
border: thick solid '888;
overflow: hidden;
height: 1/;
'iz4uierda{
float: left;
width: 9o/;
'derecha {
float: right;
width: 98/;
./
CSS avanzado
Capitulo !. Tnicas imprescindibles
.(0( *lementos de la misma altura
Hasta )ace unos afios la estructura de las pginas !eb comple*as se creaba mediante tablas
HTML. .un"ue esta soluci&n presenta muc)os incon$enientes su principal $enta*a es "ue todas
las columnas "ue forman la pgina son de la misma altura.
Normalmente cuando se crea la estructura de una pgina comple*a se desea "ue todas las
columnas "ue la forman tengan la misma altura. Ce )ec)o cuando algunas o todas las columnas
tienen imgenes o colores de rondo esta caracterfstica es imprescindible para obtener un disefio
correcto.
Sin embargo como el contenido de cada columna suele ser $ariable no es posible determinar la
altura de la columna ms alta y por tanto no es posible )acer "ue todas las columnas tengan la
misma altura directamente con la propiedad )eig)t.
Cuando se utili#a una tabla para crear la estructura de la pgina este problema no e'iste por"ue
cada columna de la estructura se corresponde con una celda de datos de la tabla. Sin embargo
cuando se disefia la estructura de la pgina utili#ando s&lo CSS el problema no es tan fcil de
solucionar. .fortunadamente e'isten $arias soluciones para asegurar "ue dos elementos tengan
la misma altura.
La primera soluci&n es la ms sencilla y la public& el disefiador Alex -obinson en su artfculo
qual Height Columns ! revisite" 3)ttp(>>!!!?positionise$eryt)ing.net>articles>onetruelayout>
e"ual)eig)t6 . El truco consiste en afiadir un espacio de relleno inferior 1padding2#ottom3 muy
grande a todas las columnas y despu&s afiadirles un margen inferior negati$o 1margin2#ottom3
del mismo tamafio.
'contenedor {
overflow: hidden;
+columnal$ +columna,$ +columna- {
paing-bottom* -,./.px0
margin-bottom* --,./.px0
El $alor utili#ado en el espacio de relleno y en el margen inferior de las columnas debe ser tan
grande como la altura esperada para la columna ms alta. %ara e$itar "uedarse corto se
recomienda utili#ar $alores a partir de 10 . 000 pf'eles.
Los dos principales problemas "ue presenta esta soluci&n son los siguientes(
% Se pueden producir errores al imprimir la pgina con el na$egador +nternet E'plorer.
%Si Se utili#an enlaces de tipo ancla en cual"uier columna al pulsar sobre el enlace las
columnas se despla#an de forma ascendente y desapare!en de la pgina.
=tra soluci&n al problema de los elementos de la misma altura es la "ue present& el disefiador
Can Ceder)olm en su c&lebre artfculo &au Columns 3)ttp(>>!!!.alistapart.com>articles>
fau'columns86 . Si la soluci&n anterior consi)2a en engahar al na$egador esta segunda soluci&n
se basa en engahar al o*o del usuario.
Capitulo !. TMicas imprescindibles
CSS avanzado
La soluci&n de las columnas falsas consiste en establecer una +magen de rondo repetida
$erticalmente en el elemento contenedor. Como el contenedor es tan alto como la columna ms
alta su +magen de rondo da la sensaci&n de "ue todas las columnas son de la misma altura.
+A
0
E

A
FGFFF.FFFF8FFF2FFF..FF2FFFFFFF1F
8 2+tF.H8
Figura !.2. .as columnas parecen de la misma altura por*ue el elemento contenedor muestra na
Imagen de fondo repetida verticalmente
El principal incon$eniente de esta t&cnica es "ue s&lo se puede emplear cuando la estructura de
la pgina es de anc)ura fi*a es decir cuando su disefio no es +f"uido y no se adapta a la anc)ura
de la $entana del na$egador.
Si el rondo de las !olumnas es simplemente un !olor y no una Imagen, se puede utilizar una
solu!i"n alternati$a planteada por el diseiador 4ouglas Li$ingstone en su t"!ni!a #or"ere"
Colors 3)ttp(>>!!!.redmelon.net>tstme><cols2>6 y "ue se #asa en el uso de las propiedades
#order 2let y #order2right so#re la !olumna !entral de la estru!tura de la pgina( Una $ersi"n
alternati$a y me5orada de la t&cnica original se puede en!ontrar en Or"ere" #or"ers Layout
3)ttp..>>!!!?positionise$eryt)ing.net>ordered.borders7center.)tml6 .
Las dos soluciones planteadas )asta el memento consisten en truces para engafiar a los
na$egadores y a los usuarios. . continuaci&n se presenta la &nica soluci&n t&cnicamente correcta
para for#ar a "ue dos elementos muestren la misma altura.
La soluci&n rue propuesta por el disefiador -oger Io)ansson en su articulo Equal height #oes
'ith CSS 3)ttp(>>!!!.0@&bereastreetcom8arc)i$e820000@8e"ual?)eig)tHbo'es?!it)7.css86 y
se basa en el uso a$an#ado de la propiedad di spl ay de CSS.
En primer lugar es necesario afiadir un elemento adicional 34di$ id:FcontenidosF56 en el
c&digo HTML de la pgina(
1div id2*contenedor*3
1div id2*contenidos*3
1div id2*columnal*31+div3
1div id2*columna;*31+div3
1div id2*columna%*31+div3
1+div3
1+div3
12
CSS avanzado
Capitulo !. Tmicas imprescindibles
. continuaci&n se utili#a la propiedad display de CSS para mostrar los elementos 4di$5
anteriores como si fueran celdas de una tabla de datos(
'contenedor {
display: table;
'contenidos {
display: table-row;
+columnal$ +columna,$ +columna- "
isplay* table-cell0
Jracias a la propiedad display de CSS cual"uier elemento se puede comportar como una tabla
una fila de tabla o una celda de tabla independientemente del tipo de elemento "ue se trate.
Ce esta forma los elementos 4di$5 "ue forman las columnas de la pgina en realidad se
comportan como celdas de tabla lo "ue permite "ue el na$egador las muestre con la misma
altura.
El &nico incon$eniente de la soluci&n anterior es "ue el na$egador +nternet E'plorer 1 y sus
$ersiones anteriores no son capaces de mane*ar los $alores ms a$an#ados de la propiedad
display por lo "ue en esos na$egadores la pgina no muestra correctamente su estructura.
1.3. Sombras
/na de las carencias del estndar CSS 2.1 ms demandadas por los disefiadores es la posibilidad
de mostrar sombras tipo "drop shado'" sobre cual"uier elemento de la pgina. %or este moti$o
la futura $ersi&n CSS < incluir una propiedad -amada bo'7 s)ado! para crear este tipo de
sombras.
. continuaci&n se muestra la regla CSS < necesaria para crear una sombra gris muy difuminada y
"ue se $isualice en la es"uina inferior derec)a de un elemento(
.elemento{
bo$-shadow: ;p$ ;p$ p$ '<<<;
Cesafortunadamente esta propiedad s&lo es disponible en los na$egadores "ue ms se
preocupan por los esndares. El na$egador Safari < incluye la propiedad con el Hombre
7!ebDi t 7 bo'7 s)ado! y ,irefo' <.1 la incluye con el Hombre 7mo# 7 bo'7 s)ado!.
La sintaxis completa de la propiedad bo'7 shado) es muy comple*a y se define en el borrador de
traba*o del m&dulo de rondos y )ordes de CSS< 3)ttp(88de$?!<.org8css!g8css<7bacDground8
Kt)e7bo'7s)ado!6 . . continuaci&n se muestra su sinta'is simplificada )abitual(
bo$-shadow: 1medida3 1medida3 1medida3= 1medida3= 1color3
Capitulo !. Tnicas imprescindibles
CSS avanzado
%La primera medida es obligatoria e indica el despla#amiento )ori#ontal de la sombra. Si el
$alor es positi$o la sombra se despla#a )acia la derec)a y si es negati$o se despla#a )acia
la i#"uierda.
%La segunda medida tambi&n es obligatoria e indica el despla#amiento $ertical de la
sombra. Si el $alor es positi$o la sombra se despla#a )acia aba*o y si es negati$o se
despla#a )acia arriba.
%La tercera medida es opcional e indica el radio utili#ado para difuminar la sombra. Cuanto
ms grande sea su $alor ms borrosa aparece la sombra. Si se utili#a el $alor 0 la sombra
se muestra como un color s&lido.
%La cuarta medida tambi&n es opcional e indica el radio con el "ue se e'pande la sombra. Si
se establece un $alor positi$o la sombra se e'pande en todas direcciones. Si se utili#a un
$alor negati$o la sombra se comprime.
% El color indicado es directamente el color de la sombra "ue se muestra.
La siguiente regla CSS muestra una sombra en los na$egadores ,irefo' y Safari(
.elemento {
-webkit-bo$-shadow: ;p$ ;p$ p$ '<<<;
-moz-bo$-shadow: ;p$ ;p$ p$ '<<<;
%or su parte el na$egador +nternet E'plorer dispone de su propio mecanismo para crear
sombras. La soluci&n se basa en el uso de los filtros un mecanismo "ue no forma parte del
estndar de CSS y "ue permiten aplicar operaciones comple*as a los elementos de la pgina.
Entre los filtros de +nternet E'plorer 3)ttp(88msdn?microsoftcom8en7us8library8
ms@<2A@<3BS.A@6.asp'6 se encuentra el filtro s)ado! 3)ttp(88msdn?microsoftcom8en7us8
library8ms@<<0A&3BS?A@6.asp'6 "ue permite mostrar una sombra en un elemento de la pgina.
Las opciones del filtro s)ado! son muc)o ms limitadas "ue las de la propiedad bo' 7 s)ado!. Su
sinta'is es la )abitual de los filtros de +nternet E'plorer y las opciones son(
% col =r establecido mediante el formato )e'adecimal 3e*emplo( 677++++3(
%direct ion direcci&n )acia la "ue se despla#a la sombra. Su $alor se indica en grados y s&lo
se permiten los $alores 0 0@ L0 1<@ 1A0 22@ 210 y <1@.
% strengt) distancia en pf'eles )asta la "ue se e'tiende la sombra.
. continuaci&n se modifica la regla CSS anterior para incluir el filtro de +nternet E'plorer "ue
muestra una sombra similar(
1elemento"
-web'it-box-shaow* ,px ,px 2px +3330
-moz-box-shaow* ,px ,px 2px +3330
filter* 4haow(color5+333333$ irection5#-2$ strength5,)0
Lamentablemente )asta "ue todos los na$egadores ms utili#ados no incluyan la propiedad
bo' 7 s)ado! la &nica forma de mostrar una sombra sobre un elemento de la pgina consiste en
utili#ar imgenes "ue simulan una sombra.
CSS avanzado
Capitulo !. Tmicas imprescindibles
. continuaci&n se detallan los pasos necesarios para mostrar una sombra sencilla sobre una
+magen(
1.
2.
<.
Se crea una +magen del mismo tamafio "ue la +magen original y cuyo aspecto sea el de la
sombra "ue se "uiere mostrar.
Se afiade un espacio de relleno a la +magen original en la posici&n en la "ue se "uiere
mostrar la sombra. Si por e*emplo se "uiere mostrar una sombra en la es"uina inferior
derec)a se afiade padding 7 rig)t y padding 7 bott om.
/tili#ando la propiedad bacDground se afiade la +magen de la sombra como +magen de
rondo de la +magen original. La +magen de rondo se coloca en la posici&n en la "ue se
"uiere mostrar la sombra. En el caso de la sombra inferior derec)a la posici&n de la
+magen de rondo es bottom rig)t.
La siguiente +magen muestra el resultado final y las imgenes utili#adas en el proceso(
8igura .(0( Apli!ando Una som#ra a Una Imagen
El c&digo CSS necesario para conseguir este efecto se muestra a continuaci&n(
img {
background: url)*imagenes+sombra.png*, no-repeat bottom right;
padding-right: lop$;
padding-bottom: lop$;
El principal incon$eniente de esta t&cnica sencilla es "ue se deben crear tantas imgenes de
sombra como tamafios diferentes de imgenes )aya en el sitio !eb. La soluci&n a este problema
consiste en crear una +magen de sombra muy grande y aplicarla a todas las imgenes. Esta nue$a
sombra debe tener un tamafio al menos tan grande como la +magen ms grande "ue se $aya a
utili#ar.
El problema de utili#ar una +magen de sombra muy grande es "ue los )ordes de la sombra no
"uedan tan bien como cuando se utili#a una +magen de sombra del mismo tamafio "ue la +magen
original(
14
Capitulo !. Tmicas
imprescindibles
CSS avanzado
Figura !.3. .as imgenes de sombra muy grande producen $ordes ms feos
La soluci&n completa para crear sombras de cual"uier tamafio y con )ordes correctos implica el
uso de ms imgenes. Los siguientes recursos muestran c&mo crear ese tipo de sombras(
%Sha"owe" $mage 3)ttp(>>!!!.cssdesignpatterns.com>C)apterE2010E207E2=+M.JES>
S)ado!edE2=lmage>e'ample?)tml6 ( utiliza tres ima9genes y tres elementos <di$> para
!ada (Imagen(
%CSS (rop Shado's II: Fuzzy Shado's 3)ttp(>>!!!.alistapartcom>articles>cssdrop2>6 (
uti)M#a dos ima2genes y dos elementos 4di$5 para cada .+magen.
% )y !ontri#ution to the CSS shado' *erfuffle 3)ttp..>>t)es)apeofdays.com>200@>11>2L>
my7contribution7to7t)e7css7s)ado!7)erfuffle?)tml6 ( el resultado es ide2ntico al obtenido
mediante el drop shado' de %)otos)op pero re"uiere cinco ima2genes y cinco elementos
4di$5 para cada +magen.
Si Se "uiere mostrar una sombra sobre elementos "ue no sea imgenes la soluci&n consiste en
encerrar los contenidos con dos elementos 4di$5 y aplicar la +magen de sombra sobre el primero
de ellos(
'sombra {
background: url)*imagenes+sombra0>rande.png*, no-repeat #667 #oo70
padding-right: 1p$;
padding-bottom: 1p$;
width: ;oop$;
+sombra iv "
bac'groun* '(((;
with* ,oopx0
1div id2*sombra*3
1div35orem ipsum dolor sit amet" consectetuer adipiscing elit. ?t diam metus"
venenatis ullamcorper" conse4uat sit amet" volutpat at" nulla. 7ulla sollicitudin
metus.1+div3
1+div3
Las soluciones basadas en imgenes tienen la $enta*a de "ue funcionan correctamente en
cual"uier na$egador. Sin embargo complican innecesariamente el c&digo HTML de la pgina y
tienen limitaciones como la de tener "ue crear una nue$a +magen cada $e# "ue se "uiere cambiar
el color de la sombra.
18
CSS avanzado
Capitulo !. Tnicas imprescindibles
1.6. Transparencies
El esndar de CSS /(. no in!luye ninguna propiedad para !ontrolar la opacidad de los elementos
de la pgina( Sin em#argo, la futura $ersi"n CSS < in!luye una propiedad :amada opa!ity,
definida en el m&dulo de colores de CSS < 3)ttp(88!!!?!<.org8T-8css<7color86 y "ue permite
in!luir transparen!ias en el disefio de la pgina(
. pesar de "ue falta muc)o tiempo )asta "ue se publi"ue la $ersi&n definiti$a del estndar CSS <
los na$egadores "ue ms se esfuer#an en cumplir los esndares 3,irefo' Safari y =pera6 ya
incluyen la propiedad opac ity en Sus &ltimas $ersiones.
El $alor de la propiedad opacity se establece mediante un n&mero decimal comprendido entre
0 . 0 y 1 . 0. La interpretaci&n del $alor num&rico es tal "ue el $alor 0 . 0 es la mma
transparencia 3el elemento es in$isible6 y el $alor 1. 0 se corresponde con la mima opacidad
3el elemento es completamente $isible6. Ce esta forma el $alor 0 . @ corresponde a un elemento
semitransparente y asf sucesi$amente.
En el siguiente e*emplo se establece la propiedad opacity con un $alor de 0 . @ para conseguir
una transparencia del @0E sobre dos de los elementos 4di$5(
+4eguno$ +tercero"
opacity* 6120
Kprirnero N
bacDground7color( blueO
'@egundo {
background-color: red;
'tercero {
background-color: green;
Si Se $isuali#a el e*emplo anterior en el na$egador ,irefo' Safari u =pera los elementos 4di$5
ro*o y Berde aparecen semitransparentes tal y como se muestra en la siguiente +magen(
15
Capitulo !. Tnicas imprescindibles
CSS avanzado
Figura !.". Creando elementos semitransparentes con la propiedad opacity
Cesafortunadamente la soluci&n anterior no funciona en el na$egador +nternet E'plorer 1 y sus
$ersiones anteriores por"ue no soportan la propiedad opacity. No obstante el na$egador
+nternet E'plorer incluye un mecanismo +lamado filtros "ue no forman parte de ning&n
estndar de CSS pero "ue permiten solucionar esta limitaci&n.
Los iltros permiten apli!ar opera!iones !omple5as a los elementos de la pgina( Los iltros de
Internet *xplorer 3)ttp(88msdn?microsoftcom8en7us8library8ms@<2A@<3BS?A@6.asp'6 se
di$iden en esti!os y de transi!i"n( Los iltros esl:"ti!os 3)ttp(88msdn?microsoftcom8en7us8
library8ms&1<@<L3BS.A@6.asp'6 se utilizan #si!amente para !rear ee!tos gri!os so#re los
elementos, normalmente imgenes( *ntre los iltros esti!os se en!uentra el iltro alpha
3)ttp(88msdn?microsoft.com8en7us8library8ms@<2L&1.asp'6 que permite !ontrolar la opa!idad
de un elemento de la pgina(
La sinta'is completa del filtro alp)a es muy comple*a por"ue sus posibilidades son numerosas.
No obstante la sinta'is necesaria para establecer solamente el ni$el de transparencia de un
elemento es muy sencilla(
'@egundo" 'tercero{
filter: alpha)opacity2o,;
El $alor de la opci&n opacity del filtro alp)a se establece mediante un n&mero entero
comprendido entre 0 3el elemento es in$isible6 y .;; 3el elemento es completamente opaco6. El
$alor @0 del e*emplo anterior )ace "ue el elemento sea semitransparente.
. continuaci&n se muestra la soluci&n compatible con todos los na$egadores para "ue un
elemento de la pgina sea semitransparente(
selector{
opacity: 8.;
filter: alpha)opacity28,;
%or tHtimo recuerda "ue la propiedad f il ter es propietaria de +nternet E'plorer y no forma
parte de ning&n esndar de CSS por lo "ue regla anterior no pasa satisfactoriamente el proceso
de $alidaci&n CSS.
/;
CSS avanzado
Capitulo !. Tnicas imprescindibles
1.4. Sustituci6n de texto por im6genes
La limitaci&n ms frustrante para los disefiadores !eb "ue cuidan especialmente la tipografia de
sus pginas es la imposibilidad de utili#ar cual"uier tipo de tetra para mostrar los contenidos de
te'to. Como se sabe las fuentes "ue utili#a una pgina deben estar instaladas en el ordenador o
dispositi$o del usuario para "ue el na$egador pueda mostrarlas.
%or lo tanto Si el disefiador utili#a en la pgina una fuente especial poco com&n entre los
usuarios normales el na$egador no encuentra esa fuente y la sustituye por una fuente por
defecto. El resultado es "ue la pgina "ue $e el usuario y la "ue $e el disefiador se diferencian
completamente en su tipograHa.
La consecuencia directa de esta limitaci&n es "ue todos los disefiadores se limitan a utili#ar las
pocas ,uentes "ue tienen Casi todos los usuarios del mundo(
%Sistemas operati$os tipo <indo)s: Aria + =erdana, &ahoma, 7ouri er >e), &imeS >e)
:+man, ?eorgia( Tambi&n es disponible una lista con todas las ,uentes "ue incluye por
defecto cada $ersi&n de Pindo!s 3)ttp(88!!!.ampsoft.net8!ebdesign7+8
!indo!s7fonts7by7$ersion?)tml6 .
% Sistemas operativos tipo Mac, 4rial& 5elvetica& 6erdana& Monaco& Times.
%Sitemas operati$os tipo Linu'( incluyen decenas de ,uentes muc)as de ellas $ersiones
li#res de las ,uentes comerciales. Tambi&n es posi#le instalar las 8uentes ms populares de
Pindo!s mediante el pa"uete Core ,ont 3)ttp(88corefonts?sourceforge.net86 .
Cebido a la presencia mayoritaria de los sistemas operati$os Pindo!s y la disponibilidad de
muc)as de sus fuentes en otros sistemas operati$os la mayorfa de disefiadores utili#an
e'clusi$amente las ,uentes ms populares de Pindo!s.
.fortunadamente e'isten $arias t&cnicas "ue permiten utili#ar cual"uier tipo de tetra en el
disefio de una pgina con la seguridad de "ue todos los usuarios la $ern correctamente.
1.4.1. ,a directi+a 6font#face
La &nica solu!i"n t"!ni!amente correcta desde el punto de $ista de CSS es el uso de la directi$a
@ ont 2 ac e. *sta dire!ti$a se deini" en el estndar CSS 2 pero desapareci& en el esl(&ndar CSS
/(. que utilizan todos los na$egadores de )oy en dfa. La futura $ersi"n de CSS < $ol$er a incluir
la directi$a @ ont 2 ac e en el m&dulo +lamado %e& Fonts 3)ttp(>>!!!?!<.org>T->
css<7!ebfonts86 .
La directi$a Qf ont 7 f ace permite describir las fuentes "ue utili#a una pgina !eb. Como parte de
la descripci&n se puede indicar la direcci&n o /-L desde la "ue el na$egador se puede descargar
la fuente utili#ada si el usuario no dispone de ella. . continuaci&n se muestra un e*emplo de uso
de la directi$a Qf ont 7 f a ce(
#$ont%$ace &
font-family: *(uente muy rara80
src: url(8http*//www1e!emplo1com/fuentes/fuente9muy9rara1ttf8)0
/.
Capitulo !. Tnicas imprescindibles
CSS avanzado
hl{
font-family: *(uente muy rara*" sans-serif;
La directi$a @ ont 7 f ac e tambi&n permite definir otras propiedades de la fuente como su
formato grosor y estilo. . continuaci&n se muestran otros e*emplos(
#$ont%$ace &
font-family: (ontinsans;
src: url)*fonts+(ontin0@ans0@A09b.otf*, format)*opentype*,;
font-weight: bold;
font-style: italic;
#$ont%$ace &
font-family: Bagesschrift;
src: url)*fonts+CanoneBagesschrift.ttf*, format)*truetype*,;
Los e*emplos anteriores ban sido e'trafdos de la pgina A; 'reat Free Fonts for (font!face
em&e""ing 3)ttp(>>opentype.info>demo>!ebfontdemo.btml6 . %ara $er el efecto de la directi$a
@ ont 2 ac e debes acceder a esa paFgina uti)M#ando un na$egador como Safari.
1.4.*. Soluciones 7&
Las siglas 8I: )Fahrner $mage *eplacement+ abarcan decenas de t&cnicas similares que tratan de
resol$er el problema de utilizar cual"uier tipo de tetra en una pgina )e#( El prop&sito de estas
t&cnicas es sustituir el te'to normal por una Imagen que !ontenga el mismo texto es!rito con la
tipografia deseada. La primera t&cnica se present" en el artfculo ,sing #ackgroun"!$mage to
*eplace -e.t 3)ttp(>>!!!.stopdesign.com>articles>replaceHte't>6 .
Si Se dispone de un uFtulo de secci&n 4)l5 "ue se "uiere mostrar con una tipografia muy especial
se puede utili#ar el siguiente c&digo HTML y CSS para sustituirlo por una +magen(
1hl31span35orem ipsum dolor sit amet1+span31+hl3
hl{
width: 98p$;
height: loop$;
bac'groun* '((( url)*+imagenes+titular.png*, no-repeat top left;
hl span {
display: none;
El c&digo anterior muestra como +magen de rondo del elemento 4)l5 la +magen "ue contiene el
titular escrito con la tipografia deseada. %ara sustituir el te'to por la +magen simplemente se
oculta el te'to mediante la propiedad display( none.
//
CSS avanzado
Capitulo !. Tnicas imprescindibles
.un"ue se trata de una de las t&cnicas ,+- ms sencillas su principal problema es "ue el te'to
oculto mediante display no lo teen correctamente los dispositi$os lectores de pginas "ue
utili#an las personas con discapacidades $isuales.
La e$oluci&n de la t&cnica anterior consiste en reempla#ar la propiedad display por
te't7indent(
1hl35orem ipsum dolor sit amet1+hl3
hl{
width: 98p$;
height: loop$;
background: '((( url)*+imagenes+titular.png*, no-repeat top left;
te$t-indent: -ooop$;
/tili#ando un $alor negati$o muy grande en la propiedad te't 7 indent del elemento "ue se
"uiere reempla#ar el te'to no se oculta pero se despla#a fuera de la pantalla. Los na$egadores
normales no muestran el te'to y los lectores de pginas lo teen correctamente por"ue el te'to no
est oculto.
El problema de la soluci&n anterior es "ue si el na$egador tiene acti$ado CSS y desacti$ada la
carga de las imgenes no se muestra nada. La soluci&n consiste en $ol$er a utili#ar otro
elemento 4span5 dentro del elemento "ue se "uiere reempla#ar(
<hl><span></span>:orem ipsum olor sit amet</hl>
hl{
width: 98p$;
height: loop$;
position: relative;
hl span {
background: '((( url)*+imagenes+titular.png*, no-repeat top left;
position: absolute;
width: 188/;
height: 188/;
En esta soluci&n la +magen se muestra por delante del te'to por lo "ue aun"ue el te'to no se
oculta ni se despla#a el usuario no puede $erlo. El principal problema de esta t&cnica es "ue no
se pueden utili#ar imgenes con transparencias.
El articulo +e"ised Image +epla!ement 3)ttp(>>!!!.me##oblue.com>tests>
re$ised7image7replacement>6 presenta otras t&cm.cas ,+- y discute Sus problemas y )Mmitaciones.
+ndependientemente de los problemas t&cnicos relacionados con CSS y los na$egadores el
principal problema de las t&cnicas ,+- anteriores es "ue se deben crear tantas imgenes como
elementos se "uieran reempla#ar. .un"ue el proceso de creaci&n de imgenes sea automtico es
un proceso pesado cuando se "uiere modificar por e*emplo el tamafio o tipo de tetra utili#ado.
Ca pitulo !. Tnicas imprescindibles
CSS avanzado
1.4.0. Soluciones a+an8adas
Las soluciones basadas e'clusi$amente en CSS suelen presentar problemas con los lectores de
pginas "ue utili#an las personas discapacitadas para na$egar. %or ese moti$o se ban ideado
otras soluciones basadas en diferentes lengua*es de programaci&n.
El programador Beter2Baul Roc) )a creado una solu!i"n #asada enCa$aS!ript y que expli!a en su
art!ulo /mage *eplacement 3)ttp(>>!!!."uirDsmode.org>dom>fir.)tml6 *sta soluci&n
muestra las imgenes en todos a"uellos na$egadores que las soporten y muestra s&lo el texto en
!ualquier otro caso. 4e esta orma, el texto original no se oculta de ninguna manera que pueda
impedir a los le!tores de pginas a!!eder a los !ontenidos(
=tras soluciones permiten crear de forma dinmica las imgenes "ue sustituyen al te'to. El
proceso es muy comple*o por"ue )ay "ue considerar aspectos como el espacio mimo "ue
puede ocupar la +magen y los posibles saltos de +fnea en el te'to. E'isten multitud de soluciones
de este tipo para diferentes lengua*es de programaci&n como por e*emplo el proyecto pcdtr
3)ttp(88code?google.com8p8pcdtr86 para %H%.
1.8. Sustituci6n de texto por 7lash
Como se e'plica en la secci&n anterior las soluciones basadas en CSS para sustituir el te'to por
imgenes presentan problemas t&cnicos no resueltos( los lectores de pginas pueden no leer el
te'to y los na$egadores normales tienen problemas cuando no se pueden cargar las imgenes.
.dems estas soluciones basadas en CSS siempre tienen el incon$eniente de "ue se deben crear
todas las imgenes "ue sustituyen al te'to. Si las imgenes se crean a mano el proceso es tedioso
y poco fle'ible. Si las imgenes se generan dinmicamente la aplicaci&n !eb puede sufrir una
penali#aci&n apreciable en su rendimiento.
La soluci&n definiti$a de todos los problemas de las soluciones basadas en CSS es la t&cnica s+,-
3)ttp(88!!!.miDeindustries.com8blog8sifr86 ,S!a/a#/e /nman &/ash +ep/a!ement-, "ue combina
CSS Ia$aScript y ,las) para mostrar correctamente cual"uier te'to con cual"uier tipografla
deseada.
La $ersi&n de s+,- recomendada para su uso en sitios !eb es la $ersi&n s+,- 2
3)ttp(88!!!.miDeindustries.com8blog8sifr86 ya "ue la $ersi&n s+,- <
3)ttp(88!iDi.no$emberborn.net8sifr<6 toda$ia se encuentra en perfodo de pruebas.
. continuaci&n se muestran los pasos "ue )ay "ue seguir para sustituir el te'to con la t&cnica
s+,-(
16 Cescarga la &ltima $ersi&n disponible de los arc)i$os de s+,-. .ctualmente la $ersi&n estable
es 2.0.2 y se puede descargar mediante el arc)i$o comprimido s+,-2.0.2.#ip
3)ttp(88!!!.miDeindustries.com8blog8files8sifr82?08s+,-2?=.2.#ip6 . Cescomprime este arc)i$o
en cual"uier carpeta del sistema.
26 El Segundo paso !onsiste en crear un arc)i$o 8lash "ue incluya la fuente "ue se $a a utilizar en
la sustitu!i"n( .bre el arc)i$o s i r ( + a con un editor de arc)i$os de tipo 8lash 3como por
e*emplo el programa 8lash %rofessional 3)ttp(88!!!.adobe.com8es8products8flas)86 6. Si no
/0
CSS avanzado
Capitulo !. Tnicas imprescindibles
dispones de ning&n editor de arc)i$os ,las) ms adelante se muestran $arias )erramientas y
utilidades e"ui$alentes.
Cuando se abre el arc)i$o s i fr . f + a s&lo se $e un rectngulo blanco. %inc)a dos $eces sobre ese
rectngulo de forma "ue se muestre un te'to. Selecciona el te'to modifica su fuente por la
tipografla "ue "uieres utili#ar en el disefio de tu pgina y guarda los cambios.
Si el te'to "ue $as a sustituir contiene caracteres espe!iales o caracteres propios de algunos
idiomas debes afiadir todos esos caracteres mediante la paleta de %ropi edades del te'to.
<6 E'porta el arc)i$o ,las) mediante la opci&n , i + e 5 E'port 5 E'port Mo$ie 3o .rc)i$o 5
E'portar6. /na buena recomendaci&n consiste en guardar el arc)i$o con el mismo Hombre del
tipo de tetra "ue incluye 3ar ia + . s!f $erdana . s!f etc.6. /na $e# creado el arc)i$o gurdalo en
un directorio del ser$idor en el "ue guardes todas las ,uentes de s+,- 3puedes +lamar a este
directorio f uente s 8 por e*emplo6.
06 s+,- necesita $arios arc)i$os CSS y Ia$aScript para funcionar. Copia el arc)i$o s ifr . * s en la
carpeta de arc)i$os Ia$aScript de tu ser$idor !eb 3normalmente este directorio se llama *s86.
Copia los arc)i$os CSS s+,-7 s creen . c s s y s +,- 7 pr int . cs s en la carpeta de arc)i$os CSS de tu
ser$idor !eb 3normalmente este directorio se llama cs s 86.
@6 Todas las pginas en las "ue se sustituye el te'to por ,las) deben incluir los arc)i$os
Ia$aScript y CSS. %ara ello afiade lo siguiente dentro de la secci&n 4)ead5 de la pgina(
#$ead%
1script src2*Ds+sifr.Ds* type2*te$t+Davascript*31+script3
1link rel2*stylesheet* href2*css+sE(F-screen.css* type2*te$t+css* media2*screen* +3
1link rel2*stylesheet* href2*css+sE(F-print.css* type2*te$t+css* media2*print* +3
<;hea>
El $alor de los atributos src y )ref debe contener la ruta completa 3absoluta o relati$a6 )asta los
arc)i$osIa$aScript y CSS respecti$amente.
Tambi&n es posible afiadir las reglas de los arc)i$os CSS de s+,- en los arc)i$os CSS propios de
la pgina y asf no tener "ue enla#ar otros dos arc)i$os CSS en cada pgina.
&6 . partir de este momento ya es posible sustituir cual"uier te'to por ,las) utili#ando
instrucciones Ia$aScript sencillas. . continuaci&n se muestra el c&digo Ia$aScript necesario para
mostrar todos los titulares de la pgina con una tipografia propia(
if)typeof sE(F 22 *function*,{
sE(F.replaceGlement)*hl*" named){s(lash@rc: *..+fuentes+mifuente.swf*#,,;
El c&digo Ia$aSript anterior lo puedes colocar en cual"uier parte de la pgina. .lgunos
disefiadores prefieren colocarlo en la secci&n 4)ead5 donde se encuentran el resto de elementos
de s+,- y otros disefiadores prefieren colocarlo *usto antes de la eti"ueta 4 8 body5 de cierre de la
pgina.
Capitulo I. T"cnicas imprescindibles
CSS avanzado
La sustituci&n re"uiere "ue en la funci&n rep + ac eEl ement 3 6 se indi"ue el selector CSS de los
elementos "ue se $an a sustituir y una serie de opciones "ue se deben tener en cuenta en la
sustituci&n. La &nica opci&n obligatoria se denomina S,laS)Src e indica la ruta completa )asta
el arc)i$o . S!f "ue contiene la tipografla deseada.
. continuaci&n se muestra una tabla con todas las propiedades de s,+-(
9pci6n Descripci6n
s4electo
El selector del elemento o elementos (ue se (uieren reempla8ar. Se puede indicar
mediante esta opci6n o como primer argumento de la funci6n r epl aceElemen t ! ' . Se
pueden indicar +arios selectores separ8ndolos por comas. ,os selectores soportados
son
s(lash@rc
7uta comp/eta $asta el arc$ivo . s)f *ue contiene la fuente utilizada. Si indicas la ruta
de forma relativa& el origen es la propia p8gina 5TM..
scolo Color del texto indicado en formato $exadecimal& como por e'emplo :111111 o
9CC::::
s5inkAolo
Color de los en/aces *ue puede contener el texto
s<over=olor
-olor del estado ; ho+er de los en|aces (ue puede contener el texto
s4g=olor -olor de fondo del texto indicado en formato hexadecimal
n>aing?op
n>aing@ight
n>aing4ottom
elleno superior. i8(uierdo. inferior e i8(uierdo del texto
sCas
Transformaci"n del texto. El valor upper transforma el texto a may;sculas< el valor
lo)er lo transforma a min:sculas
s<mod Esta opci6n causa problemas en algunas +ersiones de algunos na+egadores. por lo (ue
no se recomienda su uso. Si se le asigna el +alor t ran spa rent. el 7lash (ue sustitu$e
al
texto tiene un fondo transparente. Si se emplea el +alor opa(ue. el 7lash tiene un color
de fondo s6lido.
s(lashHars
6ariables adicionales *ue pueden modificar el aspecto del texto sustituido.
t ext al ign=c ent er contra el texto de forma $orizontal
of f se fie f t = 3 desplaza el texto $acia la derec$a los pixeles indicados por el n;mero
of f se t Top=3 desplaza el texto $acia aba'o los pixeles indicados por el n:mero
Elsiguiente e*emplo muestralos titulares de secci&n 4)l5 4)25 y 4)<5 con el mismo tipo de tetra
y color negro mientras "ue sus posibles enlaces se muestran de color a#ul "ue cambia a ro*o
cuando se pasa el rat&n por encima del te'to(
if)typeof sE(F 22 *function*,{
sE(F.replaceGlement)*hl" h;" h%*" named){s(lash@rc: *.+sifr+vandenkeere.swf*" sAolor:
8+6668$ s5inkAolor: *'%%II<<*" sJoverAolor: *'AAoooo*#,,;
El principal incon$eniente de la t&cnica s+,- es la creaci&n del arc)i$o . S) con la fuente "ue se
"uiere mostrar. .dems de ser un proceso manual es necesario disponer de un editor de
CSS avanzado
Capitulo !. Tnicas imprescindibles
arc)i$es ,las). .fortunadamente debido a la popularidad de s+,- se ban publicado numerosas
)erramientas para crear los arc)i$es . s!f necesarios(
%s+,- Jenerator 3)ttp(88!!!.sifrgenerator.com8!i#ard?)tml6 ( aplicaci&n )e# "ue genera
de forma rpida y sencilla el arc)i$e . s) a partir de una fuente de tipo &rue&ype
Dextensi"n ( tt3(
%s+,- ,ont Embedder 3)ttp(88digitalretrograde.com8%ro*ects8sifr,ontEmbedder86 (
aplicaci&n de escritorio "ue genera el arc)i$e . s!f a partir de la fuente seleccionada.
%ermite afiadir fcilmente todos los caracteres especiales deseados. -e"uiere el uso de un
programa e'temo +lamado s!f mil + y del frame!orD .NET $ersi&n 2.0.
%E'tensi&n para integrar s+,- en CreamPea$er 3)ttp(88!!!?tecnorama?org8
document?p)p9id?doc:106 ( e'tensi&n para el conocido entorno de desarrollo de sitios
!eb Cream!ea$er. %ermite configurar todas las opciones de s+,- de forma $isual y crea
automticamente los enlaces a los arc)i$es CSS yIa$aScript necesarios.
1.5. Es(uinas redondeadas
El actual estndar CSS 2.1 obliga a "ue todos los )ordes de los elementos Sean rectangulares.
Esta limitaci&n es una de las ms criticadas por los disefiadores ya "ue les impide crear )ordes
cur$es o redondeados "ue se adapten me*or a sus disefios.
La futura $ersi&n CSS < incluye $arias propiedades para definir )ordes redondeados. La
propiedad border7radius establece la misma cur$atura en todas las es"uinas y tambi&n se
definen las propiedades border 7 top7r ig)t 7 radius border7 bottom7 ri g)t 7 radius
border 7 bottom7 + eft 7 radius border 7 top7 + ef t 7 radi us para establecer la cur$atura de cada
es"uina.
En cada propiedad se debe indicar obligatoriamente una medida y se puede indicar
opcionalmente una segunda medida. Cuando se indica una sola medida la es"uina es circular y
su radio es igual a la medida indicada. Cuando se indican dos medidas la es"uina es elfptica
siendo la primera medida el radio )ori#ontal de la elipse y la segunda medida su radio $ertical.
.un"ue rattan muc)es afios )asta "ue se publi"ue la $ersi&n definiti$a de CSS < los na$egadores
"ue ms se preocupan de los esl(&ndares ya incluyen soporte para crear es"uinas redondeadas.
El siguiente e*emplo muestra c&mo crear es"uinas redondeadas con los na$egadores Safari y
,irefo'(
div >
-)eb?it -border-radius , 3px lopx< 0 @ safari */
-moz-border-radius , 3px lopx< 0@ Fi refox */
La soluci&n basada en CSS < es la ms sencilla y la me*or t&cnicamente pero )asta "ue todos los
na$egadores no incluyan soporte para CSS < no es posible utili#ar esta t&cnica para crear
es"uinas redondeadas.
/E
Capitulo !. Tnicas
imprescindibles
CSS avanzado
.fortunadamente las es"uinas redondeadas son uno de los recursos ms solicitados por los
disefiadores !eb y por eso se ban definido decenas de t&cnicas para mostrarlas. Las t&cnicas se
clasifican en(
% Soluciones basadas en CSS y "ue no utili#an imgenes.
% Soluciones basadas en CSS y "ue utili#an imgenes.
% Soluciones basadas en Sa$aScript.
Las soluciones basadas e'clusi$amente en CSS y "ue no utili#an imgenes combinan HTML y CSS
para engahar al o*o del usuario y bacerle creer "ue la es"uina es redondeada.
El truco consiste en afiadir $arios elementos cuya longitud disminuye progresi$amente para
crear un perfil cur$o. La siguiente +magen muestra el resultado final de esta t&cnica 3i#"uierda6
el n&mero de elementos necesarios para conseguirlo 3centro6 y un detalle ampliado de una
es"uina 3derecba6(
Figura !.A. Es*uinas redondeadas creadas con CSS y sin imgenes Bresultado
se consigueC
. continuaci&n se muestra el c&digo HTML y CSS necesarios para crear
con CSS y sin imgenes(
final y detalle de c"mo
es"uinas redondeadas
1div id2*contenedor*3
1b class2*es4uinas0superiores*3
1b class2*rl*31+b3
1b class2*r;*31+b3
1b class2*r%*31+b3
1b class2*r9*31+b3
1+b3
'(% )qui se inclu*en los contenidos %+
1b class2*es4uinas0inferiores*3
1b class2*r9*31+b3
1b class2*r%*31+b3
1b class2*r;*31+b3
1b class2*rl*31+b3
/F
CSS avanzado
Capitulo !. Tnicas imprescindibles
1+b3
1+div3
.es4uinas0superiores" .es4uinas0inferiores {
display: block;
#
.es4uinas0superiores :" .es4uinas0inferiores
display: block;
height: Ep$;
overflow: hidden;
#
.rl { margin: 8 p$; #
.r; { margin: 8 %p$; #
.r% { margin: 8 ;p$; #
.r9 { margin: 8 Ep$; height: ;p$; #
%ara crear una es"uina redondeada con esta t&cnica es necesario incluir muc)os elementos
HTML adicionales. %or ese moti$o se utili#a la eti"ueta 4b5 "ue )ace "ue el c&digo HTML siga
siendo $lido y su Hombre s&lo tiene una tetra por lo "ue aumenta lo mfnimo posible el tamafio
del c&digo HTML.
Las reglas CSS anteriores )acen "ue los elementos 4b5 tengan s&lo +p' de altura y "ue cada $e#
se )agan ms cortos ya "ue aumentan sus mrgenes laterales de forma progresi$a. Modificando
ligeramente los margin de cada elemento se pueden crear es"uinas con ms o menos radio de
cu$atura. .dems tambi&n se pueden crear cur$as s&lo en una de las es"uinas.
El principal problema de esta t&cnica es "ue no es sencillo cambiar la forma de la es"uina
redondeada y "ue la cur$a es tan escalonada "ue los usuarios pueden apreciarlo.
La soluci&n al Segundo problema consiste en crear cur$as "ue utilicen la t&cnica del anti.aliasing
para sua$i#ar sus )ordes. Esta t&cnica no es sencilla ya "ue se debe tener en cuenta el radio de
cur$atura el color de la cur$a y el color de rondo del elemento contenedor.
.lgunas aplicaciones !eb generan automticamente el c&digo %&'L y CSS necesarios a partir de
los colores y el radio de cur$atura deseado. . continuaci&n se muestra el c&digo %&'L y CSS
generados por la t&cnica Spiffy Corners 3)ttp(88!!!.spiffycorners.com86 (
<iv>
<b class58spiffy8>
<b class58spiffyl8><b></b></b>
<b class58spiffy,8><b></b></b>
<b class58spiffy-8></b>
<b class58spiffy%8></b>
<b class58spiffy28></b></b>
1div class2*spiffyfg*3
'(% )qui se inclu*en los contenidos %+
1Ediv3
<b class58spiffy8>
<b class58spiffy28></b>
<b class58spiffy%8></b>
<b class58spiffy-8></b>
<b class58spiffy,8><b></b></b>
/G
Capitulo !. Tnicas imprescindibles
CSS avanzado
1b class2*spiffyl*31b31+b31+b31+b3
1+div3
.spiffy{display:block#
.spiffy :{
display:block;
height:Ep$;
overflow:hidden;
font-size:.olem;
background:'888888#
.spiffyl{
margin-left:%p$;
margin-right:%p$;
padding-left:Ep$;
padding-right:Ep$;
border-left:Ep$ solid '<1<1<1;
border-right:Ep$ solid '<1<1<1;
background:'%f%f%f#
.spiffy;{
margin-left:Ep$;
margin-right:Ep$;
padding-right:Ep$;
padding-left:Ep$;
border-left:Ep$ solid 'eee;
border-right:Ep$ solid 'eee;
background:'%8%8%8#
.spiffy%{
margin-left:Ep$;
margin-right:Ep$;
border-left:Ep$ solid '%8%8%8;
border-right:Ep$ solid '%8%8%8;#
.spiffy9{
border-left:Ep$ solid '<1<1<1;
border-right:Ep$ solid '<1<1<1#
.spiffy{
border-left:Ep$ solid '%f%f%f;
border-right:Ep$ solid '%f%f%f#
.spiffyfg{
background:'888888#
-oundedCornr 3)ttp(88!!!.roundedcornr.com86 es otra aplicaci&n !eb "ue permite generar
automticamente el c&digo HTML y CSS necesarios para crear es"uinas redondeadas a$an#adas.
.dems de las es"uinas redondeadas sencillas muc)os disefiadores "uieren utili#ar en sus
traba*os es"uinas comple*as creadas a partir de imgenes. /na $e# ms la futura $ersi&n CSS <
incluir una propiedad -amada border7 image para utili#ar cual"uier +magen como )orde de un
elemento.
Hasta "ue los na$egadores no soporten CSS < la soluci&n consiste en aplicar las imgenes
mediante CSS y algunos elementos HTML especialmente preparados.
Esta t&cnica re"uiere en primer lugar crear las imgenes de cada una de las cuatro es"uinas del
elemento. /na $e# creadas las imgenes se afiaden elementos en el c&digo HTML. /tili#ando
CSS se muestran las es"uinas redondeadas como imgenes de rondo de esos elementos HTML.
01
CSS avanzado
Capitulo !. Tnicas imprescindibles
Los elementos HTML "ue se afiaden pueden $ariar de una soluci&n a otra pero en general se
afiaden elementos 4b5 por"ue es una eti"ueta de una sola tetra(
1div id2*contenedor*3
1b class2*superior*3
1b31+b3
1+b3
'(% )qui se inclu*en los contenidos %+
1b class2*inferior*3
1b31+b3
1+b3
1+div3
Con el c&digo HTML anterior las reglas CSS necesarias para mostrar las imgenes de cada
es"uina son muy sencillas(
b.superior { background:url)*imagenes+es4uina0superior0iz4uierda.png*, no-repeat; #
b.superior b { background:url)*imagenes+es4uina0superior0derecha.png*, no-repeat; #
b.inferior { background:url)*imagenes+es4uina0inferior0iz4uierda.png*, no-repeat; #
b.inferior b { background:url)*imagenes+es4uina0inferior0derecha.png*, no-repeat; #
%or Ptimo cuando las es"uinas redondeadas no utili#an imgenes es ms con$eniente utili#ar
soluciones basadas en Sa$aScript. La principal $enta*a de esta t&cnica es "ue no es necesario
ensu!iar de forma permanente el c&digo HTML con decenas de elementos de tipo 4di$5 o 4b5.
Cuando el usuario carga la pgina el c&digo Sa$aScript crea en ese momento todos los elementos
necesarios y los afiade de forma dinmica al c&digo HTML de la pgina.
.dems la otra gran $enta*a de las soluciones basadas en Sa$aScript es "ue afiaden decenas de
elementos para crear )ordes redondeados tan perfectos "ue son indistinguibles de los "ue se
pueden crear con imgenes.
Algunas de las solu!iones #asadas en Ha$aS!ript ms !ono!idas son /0uel1+/ Corner
3)ttp(>>met)$in.com>*"uery>*"7corner.)tml6 /0uel1+/ Cu Corners 3)ttp(>>blue7an$il.com>
arc)i$es>anti7aliased7rounded7corners7!it)7*"uery6 /0uel1y Corners 3)ttp(>>!!!.atblabs.com>
*"uery.corners?)tml6 y N Corners Cu&e 3)ttp(>>!!!.)tml.it>articoli>niftycube>inde'?)tml6 .
El articulo CSS +ounded Corners +oundup 3)ttp(>>!!!.smileycatcom>miao!>arc)i$es>
====00?p)p6 compara decenas de te m.cas para crear es"uinas redondeadas basadas en CSS y
Sa$aScript
1.11. ollo+ers $ sprites
Seg"n $arios estudios reali#ados por Ta)ooG )asta el F;I de la me5ora en el rendimiento de la
descarga de pginas )e# depende de la parte del !liente( *n el artfculo 2erformance *esearch3
/art 0.1 %hat the 45675 *ule -ells ,s a&out *e"ucing H--2 *equests 3)ttp(>>yuiblog.com>blog>
200&>11>2A>performance7researc)7part7186 Ta)ooG e'plica "ue generar dinmi!amente el
c&digo %&'L de la pgina y ser$irla ocupa el /;I del tiempo total de descarga de la pgina( El
F;I del tiempo restante los na$egadores des!argan las imgenes, arc)i$os Ha$aS!ript, bolas de
estilos y cual"uier otro tipo de arc)i$o enla#ado.
01
Capitulo !. Tnicas imprescindibles
CSS avanzado
.dems en la mayorfa de pginas !eb normales, la mayor parte de ese A0E del tiempo se
dedica a la descarga de las imgenes. %or tanto aun"ue los mayores esfuer#os siempre se
centran en reducir el tiempo de generaci&n dinmica de las pginas se consigue ms y con
menos esfuer#o me*orando la descarga de las imgenes.
La idea para me*orar el rendimiento de una pgina que descarga por e*emplo .5 imgenes
consiste en crear una &nica Imagen grande "ue incluya las .5 imgenes indi$iduates y utilizar las
propiedades CSS de las imgenes de rondo para mostrar cada Imagen( Esta t&cnica se present"
en el artfculo CSS Sprites1 $mage Slicing8s 9iss of :eath 3)ttp(>>!!!.alistapart.com>articles>
sprites6 y desde enton!es se conoce con el %om#re de spn.tes CSS.
El siguiente e*emplo e'plica el uso de los sprites CSS en un sitio !eb "ue muestra la pre$isi&n
meteorol&gica de $arias localidades utili#ando iconos(
Bre$isiones meteorol"gi!as
Figura !.8. 4specto de la previsi"n meteorol"gica mostrada con iconos
La soluci&n tradicional para crear la pgina anterior consiste en utili#ar cuatro elementos 4img5
en el c&digo HTML y disponer de cuatro imgenes correspondientes a los cuatro iconos(
1h%3Previsiones meteorolIgicas1+h%3
1p id2*localidadl*31img src2*imagenes+sol.png* +3 5ocalidad 1: soleado" mK$: %<" min:
;%<1+p3
1p id2*localidad;*31img src2*imagenes+sol0nubes.png* +3 5ocalidad ;: nublado" mK$: ;<"
min: 1%<1+p3
1p id2*localidad%*31img src2*imagenes+nubes.png* +3 5ocalidad %: muy nublado" mK$: ;;<"
min: 18<1+p3
1p id2*localidad9*31img src2*imagenes+tormentas.png* +3 5ocalidad 9: tormentas" mK$:
;%<" min: 11<1+p3
.un"ue es /na soluci&n sencilla y "ue funciona muy bien se trata de una soluci&n
completamente ineficiente. El na$egador debe descargar cuatro imgenes diferentes para
mostrar la pgina por lo "ue debe reali#ar cuatro peticiones al ser$idor.
Cespu&s del tamafio de los arc)i$os descargados el n&mero de peticiones reali#adas al ser$idor
es el factor "ue ms penali#a el rendimiento en la descarga de pginas !eb. /tili#ando la t&cnica
J/
CSS avanzado
Capitulo !. Tmicas imprescindibles
de los sprites CSS se $a a re)acer el e*emplo anterior para conseguir el mismo efecto con una sola
+magen y por tanto una sola petici&n al ser$idor.
El primer paso consiste en crear una +magen grande "ue incluya las cuatro imgenes
indi$iduates. Como los iconos son cuadrados de tamafio <2p' se crea una +magen de <2p' '
!D8px,
Figura !.E. Creando un sprite de CSS a partir de varias imgenes individuales
%ara facilitar el uso de esta t&cnica todas las imgenes indi$iduates ocupan el mismo sitio dentro
de la +magen grande. Ce esta forma los c+culos necesarios para despla#ar la +magen de rondo se
simplifican al mimo.
El siguiente paso consiste en simplificar el c&digo HTML(
1h%3Previsiones meteorolIgicas1+h%3
1p id2*localidadl*35ocalidad 1: soleado" mK$: %<" min: ;%<1+p3
1p id2*localidad;*35ocalidad ;: nublado" mK$: ;<" min: 1%<1+p3
1p id2*localidad%*35ocalidad %: muy nublado" mK$: ;;<" min: 18<1+p3
1p id2*localidad9*35ocalidad 9: tormentas" mK$: ;%<" min: 11<1+p3
La cla$e de la t&cnica de los sprites CSS consiste en mostrar las imgenes mediante la propiedad
bac Dground 7 image. %ara mostrar cada $e# una +magen diferente se utili#a la propiedad
bacDground7position "ue despla#a la +magen de rondo teniendo en cuenta la posici&n de cada
+magen indi$idual dentro de la +magen grande(
'localidadl" 'localidad;" 'localidad%" 'localidad9{
padding-left: %Kp$;
height: %;p$;
line-height: %;p$;
background-image: url)*imagenes+sprite.png*,;
background-repeat: no-repeat;
'localidadl{
background-position: 8 o;
#
'localidad; {
background-position: 8 -%;p$;
#
'localidad% {
background-position: o -I9p$;
Capitulo !. Tnicas imprescindibles
CSS avanzado
'localidad9{
background-position: 8 -<Ip$;
La siguiente +magen muestra lo "ue sucede con el Segundo prrafo(
Figura !.!;. Funcionamiento de la t"cnica de los sprites CSS
El prrafo tiene establecida una altura de <2p' id&ntica al tamafio de los iconos. Cespu&s de
afiadir un padding7left al prrafo se afiade la +magen de rondo mediante bac Dground 7 image.
%ara cambiar de una +magen a otra s&lo es necesario despla#ar de forma ascendente o
descendente la +magen grande.
Si Se "uiere mostrar la segunda +magen se despla#a de forma ascendente la +magen grande. %ara
despla#arla en ese sentido se utilf#an $alores negati$os en el $alor indicado en la propiedad
bacDground7position. %or &ltimo como la +magen grande )a sido especialmente preparada se
sabe "ue el despla#amiento necesario son <2 pi'el por lo "ue la regla CSS de este Segundo
elemento resulta en(
'localidad; {
padding-left: %Kp$;
height: %;p$;
line-height: %;p$;
background-image: url)*imagenes+sprite.png*,;
background-repeat: no-repeat;
background-position: 8 -%;p$;
La solu!i"n original utilza#a !uatro imgenes y realiza#a cuatro peti!iones al ser$idor( La
solu!i"n #asada en sprites CSS s&lo realiza una !onexi"n para des!argar una sola Imagen(
.dems los i!onos del proye!to &ango 3)ttp(88tango.freedesDtop.org86 "ue se ban utilizado en
este e5emplo ocupan 1.001 #ytes cuando se suman los tamaios de los cuatro i!onos por
separado( Bor su parte la Imagen grande "ue !ontiene los !uatro i!onos s"lo ocupa /(/JF #ytes(
Los spn.tes "ue incluyen todas sus imgenes $erticalmente son los ms fcites de mane*ar. Si en
el e*emplo anterior se emplea un sprite con las imgenes dispuestas tambi&n )ori#ontalmente(