1.

Estilos y estructura

CSS: Cascading Style Sheets (Hoja de Estilos en Cascada) es un

lenguaje que trabaja junto HTML para proveer estilos visuales a los
elementos del documento, como tamao, color, fondo, bordes, etc.

Oficialmente CSS nada tiene que ver con HTML5. CSS no es parte de
la especificacin y nunca lo fue. Este lenguaje es, de hecho, un
complemento desarrollado para superar las limitaciones y reducir la
complejidad de HTML. Al comienzo, atributos dentro de las etiquetas
HTML provean estilos esenciales para cada elemento, pero a medida
que el lenguaje evolucion, la estructura de cdigos se volvi ms
compleja y HTML por si mismo no pudo ms que satisfacer las
demandas de los diseadores. En consecuencia, CSS fue adoptado
como la forma de separar la estructura de la presentacin. Desde
entonces, CSS ha crecido y ganado importancia, pero siempre
desarrollado en paralelo, enfocado en las necesidades de los
diseadores y apartado del proceso de evolucin de HTML.

1.1 Elementos Block

Con respecto a la estructura, bsicamente cada

navegador ordena los elementos por defecto de acuerdo
a su tipo: block (bloque) o inline (en lnea). Esta
clasificacin est asociada con la forma en que los
elementos son mostrados en pantalla.

Elementos block son posicionados uno sobre otro hacia

abajo en la pgina.

Elementos inline son posicionados lado a lado, uno al lado

del otro en la misma lnea a menos que ya no halla mas
espacio horizontal para ubicarlos.

Esto significa que cada elemento HTML que representa una

parte de la organizacin

1.2 Modelos de Caja

Para aprender cmo podemos crear nuestra propia

organizacin de los elementos en pantalla, debemos
primero entender cmo los navegadores procesan el
cdigo HTML. Los navegadores consideran cada
elemento HTML como una caja. Una pagina web es en
realidad un grupo de cajas ordenadas siguiendo ciertas
reglas. Estas reglas son establecidas por estilos provistos
por los navegadores o por los diseadores usando CSS.

CSS tiene un set predeterminado de propiedades destinados a

sobre escribir los estilos provistos por navegadores y obtener la
organizacin deseada. Estas propiedades no son especificas,
tienen que ser combinadas para formar reglas que luego sern
usadas para agrupar cajas y obtener la correcta disposicin de
pantalla. La combinacin de estas reglas es normalmente
llamada modelo o sistema de disposicin. Todas estas reglas
aplicadas juntas constituyen lo que se llama modelo de caja.

Existe solo un modelo de caja que es considerado estndar estos

das, y muchos otros que an se encuentran en estado
experimental. El modelo vlido y ampliamente adoptado, en
paginas web, es el llamado Modelo de caja tradicional, el cual
ha sido usado desde la primera versin de CSS.

2. Conceptos bsicos sobre estilos

2.1 Estilos en lnea

Una de las tcnicas ms simples para incorporar estilos

CSS a un documento HTML es la de asignar los estilos
dentro de las etiquetas por medio del atributo style.

El siguiente cdigo muestra un documento HTML simple

que contiene el elemento <p> modificado por el
atributo style con el valor font-size: 20px. Este estilo
cambia el tamao por defecto del texto dentro del
elemento <p> a un nuevo tamao de 20 pixeles.

Usar la tcnica demostrada anteriormente es una buena

manera de probar estilos y obtener una vista rpida de sus
efectos, pero no es recomendable para aplicar estilos a todo
el documento. La razn es simple: cuando usamos esta
tcnica, debemos escribir y repetir cada estilo en cada uno
de los elementos que queremos modificar, incrementando el
tamao del documento a proporciones inaceptables y
hacindolo imposible de mantener y actualizar.

Ejemplo estiloenlinea.html

2.2 Estilos embebidos

Una mejor alternativa es insertar los estilos en la cabecera

del documento y luego usar referencias para afectar los
elementos HTML correspondientes.

El elemento <style> (en el siguiente cdigo) permite a los

desarrolladores agrupar estilos CSS dentro del documento. En
HTML5 los estilos por defecto son CSS, por lo tanto no
necesitamos agregar ningn atributo en la etiqueta de
apertura <style>.

Ejemplo estiloembebido.html

2.3 Archivos Externos

Declarar los estilos en la cabecera del documento

ahorra espacio y vuelve al cdigo ms consistente y
actualizable, pero nos requiere hacer una copia de cada
grupo de estilos en todos los documentos de nuestro
sitio web. La solucin es mover todos los estilos a un
archivo externo y luego utilizar la etiqueta <link> para
insertar este archivo dentro de cada documento que los
necesite.

Este mtodo nos permite cambiar los estilos por

completo simplemente incluyendo un archivo diferente.

Ejemplo
estilosenarchivo.html

Archivo CSS misestilos.css

Con la etiqueta <link> se insertan los archivos CSS al documento

HTML y sus atributos rel y href le decimos al navegador que
cargue el archivo misestilos.css por que contiene todos los
estilos necesitados para presentar el documento en pantalla. La
etiqueta <link> referenciando el archivo CSS, ser insertada en
cada uno de los documentos que requieren estos estilos.

Existen varios mtodos para seleccionar cules elementos HTML

sern afectados por la regla CSS:

Referenciando con palabra clave: Al declarar las reglas CSS

utilizando la palabra clave del elemento, afectamos cada elemento
de la misma clase en el documento.
p { font-size: 20}
span { font-size: 20}

Referenciado con el atributo id: El atributo id es como un

nombre que identifica al elemento. Esto significa que el valor de
este atributo no puede ser duplicado. Este nombre debe ser nico
en todo el documento. Para referenciar un elemento en particular
usando el atributo id desde nuestro archivo CSS la regla debe ser
declarada con el smbolo # al frente del valor que usamos para
identificar el elemento.
#texto1 { font-size: 20 px]

El ejemplo anterio ser aplicado al elemento HTML identificado con

el atributo id=texto1. Ahora nuestro cdigo HTML lucir de esta
manera:

Ejemplo
estiloenarchivoatribid.html

Referenciado con el atributo class: La mayora del tiempo, en

lugar de utilizar el atributo id para propsitos de estilos es mejor
utilizar class. Este atributo es ms flexible y puede ser asignado a
cada elemento HTML en el documento que comparte un diseo
similar.
.texto1 {Font-size: 20px}

Para trabajar con el atributo class, debemos declarar la regla CSS

con un punto antes del nombre. La ventaja de este mtodo es que
insertar el atributo class con el valor texto1 ser suficiente para
asignar estos estilos a cualquier elemento que queramos:

Ejemplo
estiloenarchivoatribclass.html

Ejemplo misestilos.css
modificado

La razn por la que debemos utilizar un punto delante del

nombre de la regla es que es posible construir referencias ms
complejas. Por ejemplo, se puede utilizar el mismo valor pra
el atributo class en diferentes elementos pero asignar
diferentes estilos para cada tipo:
P.texto1{ font-: 20}

En el cdigo anterior se creo una regla que referencia la clase

llmada texto1 pero solo para los elemento de tipo <p>.

3. Modelo de caja tradicional

El primer modelo de caja de la web, fueron las tablas. Las

cajas eran creadas expandiendo las celdas y combinando
filas de celdas, columnas de celdas y tablas enteras, unas
sobre otras o incluso anidadas. Cuando los sitios webs
crecieron y se volvieron ms y ms complejos esta
prctica comenz a presentar serios problemas
relacionados con el tamao y el mantenimiento del
cdigo, necesarios para crearlos.

Estos problemas iniciales hicieron necesario lo que ahora

vemos como una prctica natural: la divisin entre
estructura y presentacin. Usando las etiquetas <div> y
estilos CSS fue posible reemplazar la funcin de tablas y
efectivamente separar la estructura HTML de la
presentacin. Con estos elementos podemos crear cajas
en la pantalla, posicionar estas cajas a un lado o al otro y
darles un tamao, color o borde especifico entre otras
caractersticas.

3.1 Plantilla

El cdigo que a continuacin se presenta, recibir los

estilos CSS paso a paso, ya sea mediante el atributo id o
directamente por el tipo de etiqueta a usar. El estilo
ser insertado mediante un archivo externo de estilos
(.css) y vinculado a nuestra planilla por medio de la
etiqueta <link>.

Ejemplo plantilla1.css

3.2 Selector Universal

Normalmente, para la mayora de los elementos,

necesitamos personalizar los mrgenes o simplemente
mantenerlos al mnimo. Algunos elementos por defecto
tienen mrgenes que son diferentes de cero y en la mayora
de los casos demasiado amplios. A medida que avanzamos
en la creacin de nuestro diseo encontraremos que la
mayora de los elementos utilizados deben tener un margen
de 0 pixeles. Para evitar el tener que repetir los estilos
constantemente, podemos utilizar el selector universal.

La primera regla de nuestro archivo CSS (misestilos.css), nos

asegura que todo elemento tendr un margen interno y
externo de 0 pixeles. De ahora en adelante solo
necesitaremos modificar los mrgenes de los elementos que
queremos que sean mayores que cero.

El margen (margin) es en realidad el espacio alrededor del

elemento, el que se encuentra por fuera del borde de esa
caja (el estilo, padding), es el espacio alrededor del
contenido del elemento pero dentro de sus bordes, como el
espacio entre el ttulo y el borde de la caja virtual formada
por el elemento <h1> que contiene ese ttulo.

3.3 Nueva jerarqua para

cabeceras

En nuestra plantilla usamos elementos <h1> y <h2> para

declarar ttulos y subttulos de diferentes secciones del
documento. Los estilos por defecto de estos elementos se
encuentran siempre muy lejos de lo que queremos y adems
en HTML 5 podemos reconstruir la jerarqua H varias veces
en cada seccin. El elemento <h1>, por ejemplo, ser
usado varias veces en el documento, no solo para el ttulo
principal de la pgina web como pasaba anteriormente sino
tambin para secciones internas, por lo que tenemos que
otorgarle los estilos apropiados:

La propiedad font, asignada a los elementos <h1> y <h2>

en el cdigo anterior, permite declarar todos los estilos
para el texto en una sola lnea. Las propiedades que
pueden ser declaradas usando font son: font-style, fontvarian, font-weight, font-size/line-height, y font-family
en este orden. Con estas reglas estamos cambiando el
grosor, tamao y tipo de letra del texto dentro de los
elementos <h1> y <h2> a los valores que deseamos.

3.4 Nuevos elementos HTML5

Otra regla bsica que debemos declarar desde el

comienzo es la definicin por defecto de elementos
estructurales de HTML5. Algunos navegadores an no
reconocen estos elementos o los tratan como elementos
in line (en lnea). Necesitamos declarar los nuevos
elementos HTML5 como elementos block para
asegurarnos de que sern tratados como regularmente
hace con elementos <div> y de este modo construir
nuestro modelo de caja:

A partir de ahora, los elementos afectados por la

regla anterior sern posicionados una sobre otra a
menos que especifiquemos algo diferente ms
adelante.

3.5 Centrado del cuerpo

El primer modelo que es parte del modelo de caja es

siempre <body>. Normalmente, por diferentes razones
de diseo, el contenido de este elemento debe ser
posicionado horizontalmente. Siempre deberemos
especificar el tamao del contenido, o un tamao
mximo, para obtener un diseo consistente a travs de
diferentes configuraciones de pantalla.

Por defecto, la etiqueta <body> tiene un valor de ancho

establecido en 100%. Esto significa que el cuerpo ocupar el
ancho completo de la ventana del navegador. Por lo tanto, para
centrar la pgina en la pantalla necesitamos centrar el
contenido dentro del cuerpo. Con la regla anterior, todo lo que
se encuentra dentro de <body> ser centrado en la ventana,
centrando de este modo tola la pagina web.

3.6 Caja principal

Siguiendo con el diseo de nuestra pagina, debemos

especificar un tamao o tamao mximo para el contenido
del cuerpo. Como seguramente recuerda agregamos el
elemento <div> a la plantilla para agrupar todas las cajas
dentro del cuerpo. Este <div> ser considerado la caja
principal para la construccin de nuestro modelo de caja
(este es el propsito por el que lo agregamos). De este
modo, modificando el tamao de este elemento lo hacemos
al mismo tiempo para todos los dems:

La regla anterior est referenciando por primera vez a un

elemento a travs del valor de su atributo id. El carcter # le
est diciendo al navegador que el elemento afectado por este
conjunto de estilos tiene el atributo id con el valor agrupar.

Esta regla provee tres estilos para la caja principal. El primer

estilo establece un valor fijo de 960 pixeles. Esta caja tendr
siempre un ancho de 960 pixeles, lo que representa un valor
comn para un sitio web estos das (los valore se encuentran
entre 960 y 980 pixeles de ancho), sin embargo estos parmetros
cambian constantemente.

La propiedad margin usada para este propsito puede tener 4

valores: superior, derecho, inferior, en ese orden. Esto
significa que el primer valor declarado en el estilo representa
el margen de la parte superior del elemento, el segundo es el
margen de la derecha, y as sucesivamente. Sin embargo, si
solo escribimos los primeros dos parmetros, el resto tomar
los mismos valores.

La propiedad text-aling enva el texto a la izquierda con

excepcin de <h1>

3.7 Cabecera

Siguiendo la etiqueta de apertura del <div> principal se

encuentra el primer elemento estructural de HTML5: <header>.
Este elemento contiene el ttulo principal de nuestra pagina web
y estar ubicado en la parte superior de la pantalla. En nuestra
plantilla, <header> fue identificado con el atributo id y el valor
cabecera.

Cada elemento block, as como el cuerpo, por defecto tienen un

valor de ancho del 100%. Esto significa que el elemento ocupar
todo el espacio horizontal disponible. En el caso del cuerpo, ese
espacio es el ancho total de la pantalla visible, pero en el resto
de los elementos el espacio mximo disponible estar
determinado por el ancho de su elemento padre.

En el cdigo mostrado anteriormente, se le otorga a

<header> un fondo amarillo, un borde slido de 1 pixel
y un margen interior de 20 pixeles usando la propiedad
padding.

3.8 Barra de Navegacin

Siguiendo el elemento <header> se encuentra el

elemento <nav>, el cual tiene el propsito de
proporcionar ayuda para la navegacin. Los enlaces
agrupados dentro de este elemento representarn el
men de nuestro sitio web. Este men ser una simple
barra ubicada debajo de la cabecera.

<nav> es un elemento block por lo que ser ubicado

debajo del elemento previo, su ancho por defecto ser
100% por lo que ser ubicado debajo del elemento
previo, su ancho por defecto ser 100% por lo que ser
ubicado debajo del elemento previo, su ancho por
defecto ser 100% por lo que ser tan ancho como su
padre (el <div> principal), y tambin por defecto ser
tal alto como su contenido y los mrgenes
predeterminados.

En el cdigo anterior, la primera regla referencia al

elemento <nav> por su atributo id, cambia su color de
fondo y agrega mrgenes internos de 5px y 15px con la
propiedad padding.

Dentro de la barra de navegacin hay una lista creada conlas

etiquetas <ul> y <li>. Por defecto los tems de una lista son
posicionados unos sobre otros. Para cambiar este comportamiento
y colocar
cada opcin del men una al lado de la otra,
referenciamos los elementos <li> dentro de este elemento <nav>
en particular usando el selector #menu li, y luego asugnamos a
todos ellos el estilo display: inline-block para convertirlos en lo
que se llama cajas inline.

3.9 section y aside

Los siguientes elementos estructurales en nuestro cdigo

son dos cajas ordenadas horizontalmente. El Modelo de
Caja Tradicional es construido sobre estilos CSS que nos
permiten especificar la posicin de cada caja. Usando la
propiedad float podemos posicionar estas cajas del lado
izquierdo o derecho de acuerdo a nuestras necesidades.
Los elementos que utilizamos en nuestra plantilla HTML
para crear estas cajas son <section> y <aside>, cada uno
identificado con el atributo id y los valores seccin y
columna respectivamente.

La propiedad de CSS float es una de las propiedades ms

ampliamente utilizadas para aplicar el Modelo de Caja
Tradicional. Hace que el elemento flote hacia un lado o al
otro en el espacio disponible. Los elementos afectados por
float actan como elementos block.

La propiedad float mueve la caja al espacio disponible del lado

especificado por su valor, width asigna un tamao horizontal y
margin, por supuesto, declara el margen del elemento.

Afectado por estos valores, el contenido del elemento

<section> estar situado a la izquierda de la pantalla con un
tamao de 660 pixeles, ms 40 pixeles de margen, ocupando
un espacio total de 700 pixeles de ancho.

La propiedad float del elemento <aside> tambin tiene el

valor left. Esto significa que la caja generada ser movida la
espacio disponible a su izquierda.

3.10 Footer

Para finalizar la aplicacin del Modelo de Caja

Tradicional, otra propiedad CSS tiene que ser aplicada
al elemento <footer>. Esta propiedad devuelve al
documento su flujo normal y nos permite posicionar
<footer> debajo del ultimo elemento en lugar de a su
lado.

El cdigo anterior declara un borde de 2 pixeles en la parte superior

de <footer>, un margen interno (padding) de 20 pixeles, y centra el
texto dentro del elemento. A si mismo, restaura el normal flujo del
documento con la propiedad clear. Esta propiedad simplemente
restaura las condiciones normales del rea ocupada por el elemento,
no permitindoles posicionarse adyacente a una caja flotante.

La propiedad clear tambin empuja los elementos verticalmente,

haciendo que las cajas flotantes ocupen un rea real en la pantalla.

La primera regla del cdigo anterior referencia a todos

los elementos <article> y les otorga algunos estilos
bsicos. Cada elemento <article> cuenta tambin con
un elemento <footer> que muestra el nmero de
comentarios recibidos. Para referenciar un elemento
<footer> dentro de un elemento <article>, usamos el
selector article footer que significa cada <footer>
dentro de un <article> ser afectado por los siguientes
estilos. Esta tcnica de referencia fue aplicada aqu
para alinear a la derecha el texto dentro de los
elementos.

Al final del cdigo se cambia el color de cada elemento <time> y

diferenciamos la descripcin de la imagen (insertada con el elemento
<figcaption>) del resto del texto usando un tipo de letra diferente.

4. Propiedades de CSS3

CSS fue siempre sobre estilo, pero ya no ms. En un intento por

reducir el uso de cdigo Javascript y para estandarizar funciones
populares, CSS3 no solo cubre diseo y estilos web sino tambin
forma y movimiento. La especificacin de CSS3 es presentada en
mdulos que permiten a la tecnologa proveer una especificacin
estndar por cada aspecto involucrado en la presentacin visual
del documento. Desde esquinas redondeadas y sombras, hasta
transformaciones y reposicionamiento de los elementos ya
presentados en pantalla. Este nivel de cambio convierte a CSS3 en
una tecnologa prcticamente indita comparada con versiones
anteriores.

4.1 Plantilla

Las nuevas propiedades CSS3 son extremadamente poderosas y

deben ser estudiadas una por una, pero para facilitar su
aprendizaje vamos a aplicar todas ellas sobre la misma plantilla.
Por este motivo comenzaremos por crear un documento HTML
sencillo (plantilla.html) con algunos estilos bsicos.

Debido a que <font> se encuentra en desuso en HTML5, los

elementos usados para mostrar texto son normalmente <span> para
lneas cortas y <p> para prrafos, entre otros. Por esta razn el texto
en nuestra plantilla fue insertado usando las etiquetas <span>.

Los siguientes son estilos bsicos requeridos

(nuevocss3.css) por nuestro documento HTML:

4.2 Border-radius

Anteriormente hacer esquinas redondeadas era algo

muy complejo, pero ahora con HTML5 y CSS3 es muy
sencillo. Esta es la rozn por la que, entre todas las
nuevas
posibilidades
e
increbles
propiedades
incorporadas en CSS3, la que exploraremos en primera
instancia es border-radius.

Las propiedades border-radius en este momento es

experimental por lo que debemos usar los prefijos moz- y -webkit- para que funcionen en navegadores
basados en motores Gecko y Webkit, como Firefox,
Safari y Google Chrome. Si todas las esquinas tienen la
misma curvatura podemos utilizar un solo valor. Sin
embargo, como ocurre con las propiedades margin y
padding, podemos tambin declarar un valor diferente
para cada una:
-moz-border-radius: 20px 10px 30px 50px;
-webkit-border-radius: 20px 10px 30px 50px;
border-radius: 20px 10px 30px 50px;

En el cdigo anterior, los cuatro valores asignados a la

propiedad border-radius representan diferentes ubicaciones.
Recorriendo la caja en direccin de las agujas del reloj,
iniciando en la esquina superior izquierda.

Al igual que con margin o padding, border-radius puede

tambin trabajar solo con dos valores. El primer valor ser
asignado a la primera y tercera esquina (superior izquierda,
inferior derecha), y el segundo valor a la segunda y cuarta
esquina (superior derecha, inferior izquierda).

Tambin podemos dar forma a las esquinas declarando un

segundo grupo de valores separados por una barra. Los valores
de la izquierda de la barra representarn el radio horizontal,
mientras que los valores a la derecha representan el radio
vertical. La combinacin de estos valores genera una elipsis.

4.3 Box-shadow

Por aos diseadores han combinado imgenes,

elementos y algunas propiedades CSS para generar
sombras. Gracias a CSS3 y a la nueva propiedad boxshadow podremos aplicar sombras a nuestras cajas con
solo una simples lneas de cdigo.

La propiedad box-shadow necesita al menos tres valores. El

primero, que puede ver en el cdigo anterior es el color. Este
valor fue construido aqu utilizando la funcin rgb() y nmeros
decimales, pero podemos escribirlo en nmeros hexadecimales
tambin.

Los siguientes dos valores, expresados en pixeles, establecen el

desplazamiento de la sombra. Este desplazamiento puede ser
positivo o negativo. Los valores indican, respectivamente, la
distancia horizontal y vertical desde la sombra al elemento.
Valores negativos posicionarn la sobra a la izquierda y arriba del
elemento, mientras que los valores positivos crearn la sobra a la
derecha y debajo del elemento. Valores de 0 o nulos posicionaran
la sombra exactamente detrs del elemento, permitiendo la
posibilidad de crear un efecto difuminado a todo su alrededor.

Existen algunos parmetros ms y cambios que podemos

implementar para mejorar la apariencia de la sombra.

Un cuarto valor que se puede agregar a la propiedad ya

estudiada, es la distancia de difuminacin. Con este efecto ahora
la sombra lucir real.

box-shadow: rgb(150,150,150) 5px 5px 10px;

Agregando otro valor ms en pixeles al final de la propiedad

desparramar la sombra.

box-shadow: rgb(150,150,150) 5px 5px 10px 10px;

El ultimo valor posible para box-shadow no es un numero sino

ms bien una palabra clave: inset. Esta palabra convierte a la
sombra externa en una sombra interna.

box-shadow: rgb(150,150,150) 5px 5px 10px 10px inset;

4.4 Text-shadow

La propiedad box-shadow fue diseada especialmente para ser

aplicada en cajas. Si intenta aplicar este efecto a un elemento
<span>, por ejemplo, la caja invisible ocupada por este
elemento en la pantalla, tendr una sombra, pero no el
contenido del elemento.

Para crear sombras para figuras irregulares como texto, existe

una propiedad espacial llamada text-shadow.

Los valores para text-shadow son similares a los usados para

box-shadow. Podemos declarar el color de la sombra, la
distancia horizontal y vertical de la sombra con respecto al
objeto y el radio de difuminacin.

4.5 @font-face

La propiedad @font-face permite a los diseadores proveer

un archivo conteniendo una fuente especifica para mostrar
sus textos en la pgina. Ahora podemos incluir cualquier
fuente que necesitamos con solo proveer el archivo
adecuado.

http://www.minkbooks.com/es/links.php

http://www.moorstation.org/typoasis/designers/steffmann/

La propiedad @font-face necesita al menos dos estilos para

declarar la fuente y cargar el archivo. El estilo construido con la
propiedad font-family especifica el nombre que queremos
otorgar a esta fuente en particular, y la propiedad src indica la
URL del archivo con el cdigo correspondiente a esa fuente. En
el cdigo anterior, se especifico que el ttulo ser mostrado con
la nueva fuente o las alternativas verdana y sans-serif en caso de
que la fuente incorporada no sea cargada apropiadamente.

4.6 Gradiente Lineal

Los gradientes son uno de los efectos ms atractivos

entre aquellos incorporados en CSS3. Una propiedad
background con algunos pocos parmetros
es
suficiente para convertir su documento en una pagina
web con aspecto profesional:

Los gradientes son configurados como fondos, por lo que

podemos usar laspropiedades background o backgroundimage para declararlos. La sintaxis para los valores declarados
en estas propiedades es linear-gradient (posicin de inicio,
color inicial, color final). El primer valor puede ser
especificado en pixeles, porcentaje o usando las palabras
clave top, bottom, left y right.

El punto de comienzo puede ser reemplazado por un ngulo

para declarar una direccin especfica del gradiente.

background -webkit- linear-gradient(30deg, #FFFFFF,

#006699);
background:-moz#006699);

linear-gradient(30deg,

#FFFFFF,

Los gradientes son configurados como fondos, por lo que

podemos usar las propiedades background o backgroundimage para declararlos. La sintaxis para los valores declarados
en estas propiedades es linear-gradient (posicin de inicio,
color inicial, color final). El primer valor puede ser especificado
en pixeles, porcentaje o usando las palabras clave top, bottom,
left y right.

El punto de comienzo puede ser reemplazado por un ngulo

para declarar una direccin especfica del gradiente.
background: -webkit- linear-gradient(30deg, #FFFFFF, #006699);

Tambin podemos declarar los puntos de terminacin para cada

color:
background: -webkit- linear-gradient(top, #FFFFFF 50%, #006699 90%);

4.7 Gradiente Radial

La sintaxis estndar para los gradientes radiales solo

difieren en unos pocos aspectos con respecto al anterior.
Debemos usar la funcin radial-gradient() y un nuevo
atributo para la forma:

background: -webkit- radial-gradient(center, circle,

#FFFFFF 0%, #006699 200%);
background: -moz-radial-gradient(center, circle,
#FFFFFF 0%, #006699 200%);

La posicin de comienzo es el origen y puede ser

declarada en pixeles, porcentaje o una combinacin
de las palabras claves center, top, bottom, left y
right. Existen dos posibles valores para la forma
(circle y ellipse) y la terminacin para el color indica
el color y la posicin donde las transiciones
comienzan.

4.8 RGBA

CSS3 ha agregado una nueva funcin llamada rgba()

que simplifica la asignacin de colores y
transparentes.

La funcin rgba() tiene cuatro atributos. Los

primeros 3 simplemente declaran los valores para
colores rojo, verde y azul en nmeros decimales del 0
al 255. El ultimo valor corresponde a una nueva
capacidad de opacidad. Este valor se debe encontrar
dentro de un rango que va de 0 a 1, con 0 como
totalmente transparente y 1 como totalmente opaco.

4.9 HSLA

La funcin hsla() es simplemente una funcin diferente

para generar colores, pero es ms intuitiva que rgba().
Algunos diseadores encontraran ms fcil generar un
set de colores personalizado utilizando hsla(). La
sintaxis de la funcin es: hsla (tono, saturacin,
luminosidad, opacidad).

El tono representa el color extrado de una rueda

imaginaria y es expresado en grados desde 0 a 360.
Cerca de 0 y 360 estn los colores rojos, cerca de 120
los verdes y cerca de 240 los azules. El valor de la
saturacin es representado en porcentaje, desde 0%
(escala de grises) a 100% (todo color o completamente
saturado). La luminosidad es tambin un valor en
porcentaje desde 0% (completamente oscuro) a 100%
(completamente iluminado). El ultimo valor, as como
rgba(), representa la opacidad.

4.10 Outline

Esta propiedad era usada para crear un segundo

borde, y ahora ese borde puede ser mostrado
alejado del borde real del elemento.

4.11 Border-image

La nueva propiedad border-image fue incorporada

para superar estas limitaciones y dejar en manos del
diseador la calidad y variedad de bordes disponibles
ofreciendo la alternativa de utilizar imgenes propias.

Para hacer esto, necesitamos especificar tres atributos:

el nombre del archivo de la imagen, el tamaos de las
piezas que queremos obtener del patrn y algunas
palaras clave para declarar cmo las piezas sern
distribuidas alrededor del objeto.

El valor 29 declara el tamao de las piezas y stretch es

uno de los mtodos disponibles para distribuir estas
piezas alrededor de la caja. Existen tres valores; la
palabra clave repeat repetir las piezas tomadas de la
imagen todas las veces que sea necesario para cubrir el
lado del elemento. La palabra clave round considerar
qu tan largo es el lado a ser cubierto y ajustar el
tamao de las piezas para asegurarse que cubren todo el
lado y ninguna pieza es cortada y finalmente stretch
estira solo una pieza para cubrir el lado completo.

4.12 Transform y transition

Los elementos HTML, cuando son creados, son bloques

solidos e inamovibles. Pueden ser movidos usando
cdigo Javascript o aprovechando libreras populares
como jQuery, pero no exista un procedimiento
estndar para este propsito hasta que CSS3 present
las propiedades transform y transition.

La propiedad transform puede operar cuatro

transformaciones bsicas en un elemento: scale
(escalar), rotate (rotar), skew (inclinar) y traslate
(trasladar o mover).

4.12.1 Transform: scale

La funcin scale recibe dos parmetros: el valor x para

escala horizontal y el valor y para escala vertical. Si
solo un valor es provisto el mismo valor es aplicado a
ambos parmetros.

Nmeros enteros y decimales pueden ser declarados

para la escala. Los valores entre 0 y 1 reducirn el
elemento, un valor de 1 mantendr las proporciones
originales y valores mayores que 1 aumentarn las
dimensiones del elemento de manera incremental.

En el cdigo anterior, el primer valor , 1, mantiene la

proporcin original para la dimensin horizontal de la
caja. El segundo valor tambin mantiene la proporcin
original, pero invierte el elemento verticalmente para
producir el efecto de espejo.

4.12.2 Transform: rotate

La funcin rotate rota el elemento en la direccin de

las agujas del reloj. El valor debe ser especificado en
grados usando la unidad deg:

Si un valor negativo es declarado, solo cambiar la

direccin en la cual el elemento es rotado.

4.12.3 Transform: skew

Esta funcin cambia la simetra del elemento en grados

y en ambas dimensiones.

La funcin skew usa dos para metros, pero a diferencia

de otras funciones, cada parmetro de esta funcin solo
afecta una dimensin (los parmetros actan de forma
independiente).

En el cdigo anterior se realiz la operacin transform a

la caja de la cabecera para inclinarla. Solo se declar el
primer parmetro, por lo que solo la dimensin horizontal
de la caja ser modificada. Si se usar los dos parmetros,
podramos alterar ambas dimensiones del objeto. Como
alternativa podemos utilizar funciones diferentes para
cada una de ellas: skewX y skewY.

4.12.4 Transform: translate

Similar a las viejas propiedades top y left, la funcin

translate mueve o desplaza el elemento en la pantalla a
una nueva posicin.

Los valores negativos movern al objeto hacia la izquierda

y viceversa. Si queremos mover el elemento horizontal y
verticalmente, podemos usar funciones independientes
llamadas translateX y translateY

4.12.5: Transformaciones
dinmicas

Se
puede
aprovechar
la
combinacin
de
transformaciones y pseudo clases para convertir nuestra
pgina en una aplicacin dinmica.

En el cdigo anterior la caja de la cabecera queda intacta,

pero una nueva regla fue agregada para aplicar efectos de
transformacin usando la psuedoclase: hover. El resultado
obtenido es que cada vez que el puntero del ratn pasa
sobre esta caja, la propiedad transform rota la caja 5
grados, y cuando el puntero se aleja la caja vuel a su
posicin normal.

4.12.6 Transiciones

La propiedad transicin fue incluida para suavizar los

cambios.

La propiedad puede tomar hasta cuatro parmetros. El

primer valor es la propiedad que ser considerada para
hacer la transicin (en nuestro ejemplo elegimos
transform). El segundo parmetro especifica el tiempo
que la transicin se tomar para ir de la posicin inicial a
la final. El tercer parmetro puede ser cualquiera de las
siguientes palabras clave: ease, linear, ease-in-out.
Estas palabras clave determinan cmo se realizar el
proceso de transicin. El ltimo parmetro para la
propiedad transition es el retardo en segundos o el
tiempo en que tarda en iniciar.