Universidad Nacional del Litoral

Facultad de Ingenierı́a y Ciencias Hı́dricas

Departamento de Informática

Tecnicatura Universitara en Informática de Gestión

Programación Web

Unidad 2: CSS3

Docente: Ing. Risso, Oscar Luis

Año: 2024

1
Índice
1. CSS y HTML 3

2. Estilos y estructura 3
2.1. Elementos block . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2. Modelos de caja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

3. Conceptos básicos sobre estilos 4

3.1. Estilos en lı́nea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3.2. Estilos embebidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3.3. Archivos externos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.4. Referencias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.4.1. Referenciando con palabra clave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.4.2. Referenciando con el atributo id . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.4.3. Referenciando con el atributo class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.4.4. Referenciando con cualquier atributo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.4.5. Referenciando con pseudo clases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

4. Aplicando CSS a nuestra plantilla 10

5. Modelo de caja tradicional 10

5.1. Plantilla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
5.2. Selector universal * . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
5.3. Nueva jerarquı́a para cabeceras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
5.4. Declarando nuevos elementos HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
5.5. Centrando el cuerpo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
5.6. Creando la caja principal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
5.7. La cabecera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
5.8. Barra de navegación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
5.9. Section y aside . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
5.10. Footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
5.11. Últimos toques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
5.12. Box-sizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

6. Propiedades CSS3 20
6.1. Las nuevas reglas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
6.2. Plantilla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
6.3. Border-radius . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
6.4. Box-shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
6.5. Text-shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
6.6. @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
6.7. Gradiente lineal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
6.8. Gradiente radial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
6.9. RGBA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
6.10. HSLA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
6.11. Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
6.12. Border-image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
6.13. Transform y transition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
6.13.1. Transform: scale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
6.13.2. Transform: rotate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
6.13.3. Transform: skew . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
6.13.4. Transform: translate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
6.14. Transformando todo al mismo tiempo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
6.15. Transformaciones dinámicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
6.16. Transiciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
2
 Unidad 2 - Estilos CSS y modelos de caja
1. CSS y HTML
La nueva especificación de HTML (HTML5) no describe solo los nuevos elementos HTML o el lenguaje
mismo. La web demanda diseño y funcionalidad, no solo organización estructural o definición de secciones. En
este nuevo paradigma, HTML se presenta junto con CSS y Javascript como un único instrumento integrado.
Ahora vamos a analizar CSS, su relevancia dentro de esta unión estratégica y su influencia sobre la
presentación de documentos HTML.
Oficialmente CSS nada tiene que ver con HTML5. CSS no es parte de la especificación 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 proveı́an estilos esenciales para cada elemento,
pero a medida que el lenguaje evolucionó, la escritura de códigos se volvió más compleja y HTML por sı́
mismo no pudo más satisfacer las demandas de diseñadores. En consecuencia, CSS pronto fue adoptado como
la forma de separar la estructura de la presentación. Desde entonces, CSS ha crecido y ganado importancia,
pero siempre desarrollado en paralelo, enfocado en las necesidades de los diseñadores y apartado del proceso
de evolución de HTML.
La versión 3 de CSS sigue el mismo camino, pero esta vez con un mayor compromiso. La especificación
de HTML5 fue desarrollada considerando CSS a cargo del diseño. Debido a esta consideración, la integración
entre HTML y CSS es ahoravital para el desarrollo web y esta es la razón por la que cada vez que mencio-
namos HTML5 también estamos haciendo referencia a CSS3, aunque oficialmente se trate de dos tecnologı́as
completamente separadas.
En este momento las nuevas caracterı́sticas incorporadas en CSS3 están siendo implementadas e incluidas
ju nto al resto de la especificación en navegadores compatibles con HTML5.

Conceptos básicos

CSS es un lenguaje que trabaja junto con HTML para proveer estilos visuales a los elementos del
documento, como tamaño, color, fondo, bordes, etc.

2. Estilos y estructura
A pesar de que cada navegador garantiza estilos por defecto para cada uno de los elementos HTML, estos
estilos no necesariamente satisfacen los requerimientos de cada diseñador. Normalmente se encuentran muy
distanciados de lo que queremos para nuestros sitios webs. Diseñadores y desarrolladores a menudo deben
aplicar sus propios estilos para obtener la organización y el efecto visual que realmente desean.

2.1. Elementos block

Con respecto a la estructura, básicamente cada naveg ador ordena los elementos por defecto de acuerdo a
su tipo: block (bloque) o inline (en lı́nea). Esta clasificación está asociada con la forma en que los elementos
son mostrados en pantalla.

Elementos block son posicionados uno sobre otro hacia abajo en la página.
Elementos inline son posicionados lado a lado, uno al lado del otro en la misma lı́nea, sin ningún salto
de lı́nea a menos que ya no haya más espacio horizontal para ubicarlos.

Casi todos los elementos estructurales en nuestros documentos serán tratados por los navegadores como
el ementos block por defecto. Esto significa que cada elemento HTML que representa una parte de la orga-
nización visual (por ejemplo, <section>, <nav>, <header>, <footer>, <div>) será posicionado debajo del
anterior.
En el tema anterior creamos un documento HTML con la intención de reproducir un sitio web tradicional.
El diseño incluyó barras horizontales y dos columnas en el medio. Debido a la forma en que los navegadores
3
muestran estos elementos por defecto, el resultado en la pantalla está muy lejos de nuestras expectativas. Tan
pronto como el archivo HTML con el código del Listado 18, Apunte HTML 5, es abierto en el navegador,
la posición errónea en la pantalla de las dos columnas definidas por los elementos <section> y <aside> es
claramente visible. Una columna está debajo de la o tra en lugar de estar a su lado, como corresponderı́a.
Cada bloque (block) es mostrado por defecto tan ancho como sea posible, tan alto como la información que
contiene y uno sobre otro, como se muestra en la Figura 1.

Figura 1: Representación visual de una página web mostrada con estilos por defecto

2.2. Modelos de caja

Para aprender cómo podemos crear nuestra propia organización de los elementos en pantalla, debemos
primero entender cómo los navegadores procesan el código HTML. Los navegadores consideran cada elemento
HTML como una caja. Una pág ina 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 diseñadores usando CSS.
CSS tiene un set predeterminado de propiedades destinados a sobrescribir los estilos provistos por nave-
gadores y obtener la organización deseada. Estas propiedades no son especı́ficas, tienen que ser combinadas
para formar reglas que luego serán usadas para agrupar cajas y obtener la correcta disposición en pantalla.
La combinación de estas reglas es normalmente llamada modelo o sistema de disposición. Todas estas reglas
aplicadas juntas constituyen lo que se llama un modelo de caja.
Existe solo un modelo de caja que es considerado estándar estos dı́as, y muchos otros que aún se en-
cuentr an en estado experimental. El modelo válido y ampliamente adoptado es el llamado Modelo de Caja
Tradicional, el cual ha sido usado desde la primera versión de CSS.
Aunque este modelo ha probado ser efectivo, algunos modelos experimentales intentan superar sus de-
ficiencias, pero la falta de consenso sobre el reemplazo más adecuado aún mantiene a este viejo modelo en
vigencia y la mayorı́a de los sitios webs programados en HTML5 lo continúan utilizando.

3. Conceptos básicos sobre estilos

Antes de comenzar a insertar reglas CSS en nuestro archivo de estilos y aplicar un modelo de caja, debemos
revisar los conceptos básicos sobre estilos CSS que van a ser utilizados en el resto del libro.
Aplicar estilos a los elementos HTML cambia la forma en que estos son presentados en pantalla. Como
explicamos anteriormente, los navegadores proveen estilos por defecto que en la mayorı́a de los casos no son
4
 suficientes para satisfacer las necesidades de los diseñadores. Para cambiar esto, podemos sobrescribir estos
estilos con los nuestros usando diferentes técnicas.

Manos a la obra
Dentro de un archivo de texto vacı́o, copie cada código HTML estudiado en los siguientes listados y
abra el archivo en su navegador para comprobar su funcionamiento. Tenga en cuenta que el archivo
debe tener la extensió[Link] para ser abierto y procesado correctamente.

3.1. Estilos en lı́nea

Una de las técnicas más simples para incorporar estil os CSS a un documento HTML es la de asignar los
estilos dentro de las etiquetas por medio del atributo style.
El código 1 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 tamaño por defecto del texto dentro del elemento <p> a un nuevo tamaño de
20 pixeles.

1 <! DOCTYPE html >

2 < html lang = " es " >
3 < head >
4 < title > ... </ title >
5 </ head >
6

7 < body >

8 <p style = ’ font - size : 20 px ’ > Mi texto </ p >
9 </ body >
10 </ html >

Código 1: Estilos CSS dentro de etiquetas HTML.

Usar la técnica demostrada anteriormente es una buena manera de probar estilos y obtener una vista
rápida de sus efectos, pero no es recomendado para aplicar estilos a todo el documento. La razón es simple:
cuando usamos esta técnica, debemos escribir y repetir cada estilo en cada uno de los elementos que queremos
modificar, incrementando el tamaño del documento a proporciones inaceptables y haciéndolo imposible de
mantener y actualizar. Solo imagine lo que ocurrirı́a si decide que en lugar de 20 pixeles el tamaño de cada
uno de los elementos <p> deberı́a ser de 24 pixeles. Tendrı́a que modificar cada estilo en cada etiqueta <p>
en el documento completo.

3.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:

1 <! DOCTYPE html >

2 < html lang = " es " >
3 < head >
4 < title > ... </ title >
5 < style >
6 p { font - size : 20 px }
7 </ style >
8 </ head >
9

10 < body >

11 <p > Mi texto </ p >
12 </ body >
13 </ html >
5
 Código 2: Estilos listados en la cabecera del documento.
El elemento <style> (código 2) permite a los desarrolladores agrupar estilos CSS dentro del documento.
En versiones previas de HTML era necesario especificar qué tipo de estilos serı́an insertados. En HTML5 los
estilos por defecto son CSS, por lo tanto no necesitamos agregar ningún atributo en la etiqueta de apertura
<style>.
La sentencia style del código nro 2 tiene la misma función que la lı́nea de código 1, pero en 2 no tuvimos
que escribir el estilo dentro de cada etiqueta <p> porque todos los elementos <p> ya fueron afectados. Con
este método, reducimos nuestro código y asignamos los estilos que queremos a elementos especı́ficos utilizando
referencias.

3.3. Archivos externos

Declarar los estilos en la cabecera del documento ahorra es espacio y vuelve al código más consistente y
actualizable, pero nos requiere hacer una copia de cada grupo de estilos en todos los documentos de nuestro
sitio web. La solución es mover todos los estilos a un archivo externo y luego utilizar el elemento ¡link¿para
insertar este archivo dentro de cada documento que los necesite. Este método nos permite cambiar los estilos
por completo simplemente incluyendo un archivo diferente.
También nos permite modificar o adaptar nuestros documentos a cada circunstancia o dispositivo.
En el apunte de HTML 5 estudiamos la etiqueta <link> y cómo utilizarla para insertar archivos con estilos
CSS en nuestros documentos. Utilizando la lı́nea <link rel=”stylesheet” href=”[Link]”> le decimos
al navegador que cargue el archivo [Link] porque contiene todos los estilos necesitados para presentar
el documento en pantalla.
Esta práctica fue ampliamente adoptada por diseñadores que ya están trabajando con HTML5. La etiqueta
<link> referenciando el archivo
CSS será insertada en cada uno de los documentos que requieren de esos estilos:

1 <! DOCTYPE html >

2 < html lang = " es " >
3 < head >
4 < title > ... </ title >
5 < link rel = " stylesheet " href = " misestilos . css " >
6 </ head >
7

8 < body >

9 <p > Mi texto </ p >
10 </ body >
11 </ html >

Código 3: Aplicando estilos CSS desde un archivo externo.

Manos a la obra
De ahora en adelante agregaremos estilos CSS al archivo llamado [Link]. Debe crear este archivo
en el mismo directorio (carpeta) donde se encuentra el archivo HTML y copiar los estilos CSS en su
interior para comprobar cómo trabajan.

Conceptos básicos

Los archivos CSS son archivos de texto planos. Al igual que los archivos HTML, puede crearlos
utilizando cualquier editor de texto como el Bloc de Notas de Windows, por ejemplo.

3.4. Referencias
Almacenar todos nuestros estilos en un archivo externo e insertar este archivo dentro de cada documento
que lo necesite es muy conveniente, sin embargo no podremos hacerlo sin buenos mecanismos que nos ayuden
6
 a establecer una especı́fica relación entre estos estilos y los elementos del documento que van a ser afectados.
Cuando hablábamos sobre cómo incluir estilos en el documento, mostramos una de las técnicas utilizadas
a menudo en CSS para referenciar elementos HTML. En el código 2, el estilo para cambiar el tamaño de la
letra referenciaba cada elemento <p> usando la palabra clave p. De esta manera el estilo insertado entre las
etiquetas < style > referenciaba cada etiqueta <p> del documento y asignaba ese estilo particular a cada
una de ellas.
Existen varios métodos para seleccionar cuáles eleme ntos HTML serán afectados por las reglas CSS:

referencia por la palabra clave del elemento

referencia por el atributo id
referencia por el atributo class

Más tarde veremos que CSS3 es bastante flexible a es te respecto e incorpora nuevas y más especı́ficas
técnicas para referenciar elementos, pero por ahora aplicaremos solo estas tres.

3.4.1. 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. Por ejemplo, la siguiente regla cambiará los estilos de t odos los elementos ¡p¿:

1 p { font - size : 20 px }

Código 4: Referenciando por palabra clave.

Esta es la técnica presentada previamente en el código 2. Utilizando la palabra clave p al frente de la

regla le estamos diciendo al navegador que esta regla debe ser aplicada a cada elemento <p> encontrado en
el documento HTML. Todos los textos envueltos en etiquetas <p> tendrán el tamaño de 20 pixeles.
Por supuesto, lo mismo funcionará para cualquier otro elemento HTML. Si especificamos la palabra clave
span en lugar de p, por ejemplo, cada texto entre etiquetas ¡span¿tendrá un tamaño de 20 pixeles:

1 span { font - size : 20 px }

Código 5: Referenciando otra palabra clave.

¿Pero qué ocurre si solo necesitamos referenciar una etiqueta especı́fica? ¿Debemos usar nuevamente el
atributo style dentro de esta etiqueta? La respuesta es no. Como aprendimos anteriormente, el método de
Estilos en Lı́nea (usando el atributo style dentro de etiquetas HTML) es una técnica en desuso y deberı́a ser
evitada. Para seleccionar un elemento HTML especı́fico desde las reglas de nuestro archivo CSS, podemos
usar dos atributos diferentes: id y class.

3.4.2. Referenciando 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 sı́mbolo # al frente del valor que usamos para identificar el elemento:

1 # texto1 { font - size : 20 px }

Código 6: Referenciando a través del valor del atributo id.

La regla anterior será aplicada al elemento HTML identificado con el atributo id=”texto1” . Ahora nuestro
código HTML lucirá de esta manera:

1 <! DOCTYPE html >

2 < html lang = " es " >
3 < head >
7
4 < title > ... </ title >
5 < link rel = " stylesheet " href = " misestilos . css " >
6 </ head >
7

8 < body >

9 <p id = " texto1 " > Mi texto </ p >
10 </ body >
11 </ html >

Código 7: Identificando el elemento ¡p¿a través de su atributo id.

El resultado de este procedimiento es que cada vez que hacemos una referencia usando el identificador
texto1 en nuestro archivo CSS, el elemento con ese valor de id será modificado, pero el resto de los elementos
< p >, o cualquier otro elemento en el mismo documento, no serán afectados.
Esta es una forma extremadamente especı́fica de referenciar un elemento y es normalmente utilizada para
elementos más generales, como etiquetas estructurales. El atributo id y su especificidad es de hecho más
apropiado para refe rencias en Javascript, como veremos mas adelante.

3.4.3. Referenciando con el atributo class

La mayorı́a del tiempo, en lugar de utilizar el atributo id para propósitos de estilos es mejor utilizar class.
Este atributo es más flexible y puede ser asignado a cada elemento HTML en el documento que comparte un
diseño similar:

1 . texto1 { font - size : 20 px }

Código 8: Referenciando por el valor del atributo class.

Para trabajar con el atributo class, debemos declarar la regla CSS con un punto antes del nombre. La
ventaja de este método es que insertar el atributo class con el valor texto1 será suficiente para asignar estos
estilos a cualquier elemento que queramos:

1 <! DOCTYPE html >

2 < html lang = " es " >
3 < head >
4 < title > ... </ title >
5 < link rel = " stylesheet " href = " misestilos . css " >
6 </ head >
7

8 < body >

9 <p class = " texto1 " > Mi texto </ p >
10 <p class = " texto1 " > Mi texto </ p >
11 <p > Mi texto </ p >
12 </ body >
13 </ html >

Código 9: Asignando estilos a varios elementos a través del atributo class.

Los elementos <p> en las primeras dos lı́neas dentro del cuerpo del código 9 tienen el atributo class
con el valor texto1. Como dijimos previamente, la misma regla puede ser aplicada a diferentes elementos en
el mismo documento. Por lo tanto, estos dos primeros elementos comparten la misma regla y ambos serán
afectados por el estilo del código 8. El último elemento <p> conserva los estilos por defecto otorgados por el
navegador.
La razón por la que debemos utilizar un punto delante del nombre de la regla es que es posible construir
referencias más complejas. Por ejemplo, se puede utilizar el mismo valor para el atributo class en diferentes
elementos pero asignar diferentes estilos para cada tipo:

1 p . texto1 { font - size : 20 px }

8
 Código 10: Referenciando solo elementos < p > a través del valor del atributo class.

En el código 10 creamos una regla que referencia la clase llamada texto1 pero solo para los elementos de
tipo <p>. Si cualquier otro elemento tiene el mismo valor en su atributo class no será modificado por esta
regla en particular.

3.4.4. Referenciando con cualquier atributo

Aunque los métodos de referencia estudiados anteriormente cubren un variado espectro de situaciones, a
veces no son suficientes para encontrar el elemento exacto. La última versión de CSS ha incorporado nuevas
formas de referenciar elementos HTML. Uno de ellas es el Selector de Atributo. Ahora podemos referenciar
un elemento no solo por los atributos id y class sino también a través de cualquier otro atributo:

1 p [ name ] { font - size : 20 px }

Código 11: Referenciando solo elementos <p> que tienen el atributo name.

La regla del código 11 cambia solo elementos <p> que tienen un atributo llamado name. Para imitar lo
que hicimos previamente con los atributos id y class, podemos también especificar el valor del atributo:

1 p [ name = " mitexto " ] { font - size : 20 px }

Código 12: Referenciando elementos <p> que tienen un atributo name con el valor mitexto.

CSS3 permite combinar ”=” con otros para hacer una selección más especı́fica:

1 p [ name ^= " mi " ] { font - size : 20 px }

2 p [ name $ = " mi " ] { font - size : 20 px }
3 p [ name *= " mi " ] { font - size : 20 px }

Código 13: Nuevos selectores en CSS3.

Si usted conoce Expresiones Regulares desde otros lenguajes como Javascript o PHP, podrá reconocer los
selectores utilizados en el código 13. En CSS3 estos selectores producen similares resultados:

La regla con el selector = será asignada a todo elemento <p> que contiene un atributo name con un
valor comenzado en ”mi” (por ejemplo, ”mitexto”, ”micasa”).

La regla con el selector $= será asignada a todo elemento <p> que contiene un atributo name con un
valor finalizado en ”mi” (por ejemplo ”textomi”, ”casami”).
La regla con el selector ∗ = será asignada a todo elemento <p> que contiene un atributo name con un
valor que incluye el texto ”mi” (en este caso, el texto podrı́a también encontrarse en el medio, como
en ”textomicasa”).

En estos ejemplos usamos el elemento <p>, el atributo name, y una cadena de texto al azar como ”mi”,
pero la misma técnica puede ser utilizada con cualquier atributo y valor que necesitemos. Solo tiene que
escribir los corchetes e insertar entre ellos el nombre del atributo y el valor que necesita para referenciar el
elemento HTML correcto.

3.4.5. Referenciando con pseudo clases

CSS3 también incorpora nuevas pseudo clases que hacen la selección aún más especı́fica.
Las variantes son muchas y nos permiten referencias muy selectivas. Sin embargo dejaremos este tipo de
referenciación para un estudio más profundo, fuera del alcance de nuestra unidad.

9
 4. Aplicando CSS a nuestra plantilla
Como ya aprendimos, todo elemento estructural es considerado una caja y la estructura completa es
presentada como un grupo de cajas.
Las cajas agrupadas constituyen lo que es llamado un Modelo de Caja.
Siguiendo con los conceptos básicos de CSS, vamos a estudiar lo que es llamado el Modelo de Caja
Tradicional. Este modelo has sido implementado desde la primera versión de CSS y es actualmente soportado
por cada navegador en el mercado, lo que lo ha convertido en un estándar para el diseño web.
Todo modelo, incluso aquellos aún en fase experimental, pueden ser aplicados a la misma estructura
HTML, pero esta estructura debe ser preparada para ser afectada por estos estilos de forma adecuada.
Nuestros documentos HTML deberán ser adaptad os al modelo de caja seleccionado.

5. Modelo de caja tradicional

Todo comenzó con tablas. Las tablas fueron los elementos que sin intención se volvieron la herramienta
ideal utilizada por desarrolladores para crear y organizar cajas de contenido en la pantalla. Este puede ser
considerado el primer modelo de caja de la web. Las cajas eran creadas expandiendo 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 más y más complejos esta práctica comenzó a presentar seri os problemas
relacionados con el tamaño y el mantenimiento del código necesario para crearlos.
Estos problemas iniciales hicieron necesario lo que ahora vemos como una práctica natural: la división
entre estructura y presentación. Usando etiquetas <div> y estilos CSS fue posible reemplazar la función de
tablas y efectivamente separar la estructura HTML de la presentación. Con elementos <div> y CSS podemos
crear cajas en la pantalla, posicionar estas cajas a un lado o a otro y darles un tamaño, color o borde especı́fico
entre otras caracterı́sticas. CSS provee propiedades especı́ficas que nos permiten organizar las cajas acorde a
nuestros deseos. Estas propiedades son lo suficientemente poderosas como para crear un modelo de caja que
se transformó en lo que hoy conocemos como Modelo de Caja Tradicional.
Algunas deficiencias en este modelo mantuvieron a las tablas vivas por algún tiempo, pero los princi-
pales desarrolladores, influenciados por el suceso de las implementaciones Ajax y una cantidad enorme de
nuevas aplicaciones interactivas, gradualmente volvieron a las etiquetas <div> y estilos CSS en un estándar.
Finalmente el Modelo de Caja Tradicional fue adoptado a gran escala.

5.1. Plantilla
En la unidad anterior construimos una plantilla HTML5. Esta plantilla tiene todos los elementos necesarios
para proveer estructura a nuestro documento, pero algunos detalles deben ser agregados para aplicar los estilos
CSS y el Modelo de Caja Tradicional.
Este modelo necesita agrupar cajas juntas para ordenarlas horizontalmente. Debido a que el contenido
completo del cuerpo es creado a partir de cajas, debemos agregar un elemento <div> para agruparlas,
centrarlas y darles un tamaño especı́fico.
La nueva plantilla lucirá de este modo:

1 <! DOCTYPE html >

2 < html lang = " es " >
3 < head >
4 < title > ... </ title >
5 < meta charset = " iso -8859 -1 " >
6 < meta name = " description " content = " Ejemplo de HTML5 " >
7 < meta name = " keywords " content = " HTML5 , CSS3 , JavaScript " >
8 < link rel = " stylesheet " href = " misestilos . css " >
9 </ head >
10

11 < body >

12 < div id = " agrupar " >
13 < header id = " cabecera " >
14 < h1 > ... </ h1 >
10
15 </ header >
16

17 < nav id = " menu " >

18 < ul >
19 < li > principal </ li >
20 < li > fotos </ li >
21 < li > videos </ li >
22 < li > contacto </ li >
23 </ ul >
24 </ nav >
25

26 < section id = " seccion " >

27 < article >
28 < header >
29 < hgroup >
30 < h1 > Titulo del mensaje uno </ h1 >
31 < h2 > Subtitulo del mensaje uno </ h2 >
32 </ hgroup >
33 < time datetime = " 2014 -06 -20 " pubdate >
34 publicado 10 -12 -2011
35 </ time >
36 </ header >
37 Este es el texto de mi primer mensaje
38 < figure >
39 < img src = " http :// minkbooks . com / content / myimage . jpg " >
40 < figcaption >
41 Esta es la imagen del primer mensaje
42 </ figcaption >
43 </ figure >
44 < footer >
45 <p > comentarios (0) </ p >
46 </ footer >
47 </ article >
48 < article >
49 < header >
50 < hgroup >
51 < h1 > Titulo del mensaje dos </ h1 >
52 < h2 > Subtitulo del mensaje dos </ h2 >
53 </ hgroup >
54 < time datetime = " 2014 -06 -30 " pubdate >
55 publicado 15 -12 -2011
56 </ time >
57 </ header >
58 Este es el texto de mi segundo mensaje
59 < footer >
60 <p > comentarios (0) </ p >
61 </ footer >
62 </ article >
63 </ section >
64 < aside id = " columna " >
65 < blockquote > Mensaje nro uno </ blockquote >
66 < blockquote > Mensaje nro dos </ blockquote >
67 </ aside >
68 < footer id = " pie " >
69 Derechos Reservados & copy ; 2010 -2011
70 </ footer >
71 </ div >
72 </ body >
73 </ html >

11
 Código 14: Nueva plantilla HTML5 lista para estilos CSS
El código 14 provee una nueva plantilla lista para recibir los estilos CSS. Dos cambios importantes pueden
distinguirse al comparar este código con el del Listado 18 de [Link]. El primero es que ahora varias
etiquetas fueron identificadas con los atributos id y class. Esto significa que podemos referenciar un elemento
especı́fico desde las reglas CSS con el valor de su atributo id o podemos modificar varios elementos al mismo
tiempo usando el valor de su atributo class.
El segundo cambio realizado a la vieja plantilla es la adición del elemento <div> mencionado anteriormen-
te. Este <div> fue identificado con el atributo y el valor id=”agrupar” , y es cerrado al final del cuerpo con
la etiqueta de cierre </div>. Este elemento se encarga de agrupar todos los demás elementos permitiéndonos
aplicar el modelo de caja al cuerpo y designar su posición horizontal, como veremos más adelante.

Manos a la obra
Compare el código del Listado 18 de HTML5 con el código 14 anterior y ubique las etiquetas de
apertura y cierre del elemento <div> utilizado para agrupar al resto. También compruebe cuáles
elementos se encuentran ahora identificados con el atributo id y cuáles con el atributo class.

Confirme que los valores de los atributos id son únicos para cada etiqueta. También necesitará reemplazar
el código en el archivo HTML creado anteriormente por el del Listado 2-25 para aplicar los siguientes estilos
CSS.
Con el documento HTML finalizado es tiempo de trabajar en nuestro archivo de estilos.

5.2. Selector universal *

Comencemos con algunas reglas básicas que nos ayudarán a proveer consistencia al diseño:

1 * {
2 margin : 0 px ;
3 padding : 0 px ;
4 }

Código 15: Regla CSS general.

Normalmente, para la mayorı́a de los elementos, necesitamos personalizar los márgenes o simplemente
manten erlos al mı́nimo. Algunos elementos por defecto tienen márgenes que son diferen tes de cero y en
la mayorı́a de los casos demasiado amplios. A medida que avanzamos en la creación de nuestro diseño
encontraremos que la mayorı́a de los elementos utilizados deben tener un margen de 0 pixeles. Para evitar el
tener que repetir estilos constantemente, podemos utilizar el selector universal.
La primera regla en nuestro archivo CSS, presentada en el código 15, nos asegura que todo elemento tendrá
u n margen interno y externo de 0 pixeles. De ahora en más solo necesitaremos mo dificar los márgenes de
los elementos que queremos que sean mayores que cero.

Conceptos básicos

Recuerde que en HTML cada elemento es considerado como una caja. 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, por otro lado, es el espacio alrededor del contenido del elemento pero dentro de sus
bordes, como el espacio entre el tı́tulo y el borde de la caja virtual formada por el elemento <h1>
que contiene ese tı́tulo). El tamaño del margen puede ser definido por lados especı́ficos del elemento
o todos sus lados a la vez. El estilo margin: 0px en nuestro ejemplo establece un margen 0 o nulo
para cada elemento de la caja. Si el tamaño hubiese sido especificado en 5 pixeles, por ejemplo, la
caja tendrı́a un espacio de 5 pixeles de ancho en todo su contorno. Esto significa que la caja estarı́a
separada de sus vecinas por 5 pixeles.
12
 Manos a la obra
Debemos escribir todas las reglas necesarias para otorgar estilo a nuestra plantilla en un archivo CSS.
El archivo ya fue incluido dentro del código HTML por medio de la etiqueta <link>, por lo que lo
único que tenemos que hacer es crear u n archivo de texto vacı́o con nuestro editor de textos preferido,
grabarlo con el nombre [Link] y luego copiar en su interior la regla del código 15 y todas las
presentadas a continuación.

5.3. Nueva jerarquı́a para cabeceras

En nuestra plantilla usamos elementos <h1> y <h2> para declarar tı́tulos y subtı́tulos de diferentes
secciones del documento. Los estilos por defecto de estos elementos se encuentran siempre muy lejos de lo que
queremos y además en HTML5 pode mos reconstruir la jerarquı́a H varias veces en cada sección. El elemento
<h1>, por ejemplo, será usado varias veces en el documento, no solo para el tı́tulo principal de la página
web como pasaba anteriormente sino también para secciones internas, por lo que tenemos que otorgarle los
estilos apropiados:

1 h1 {
2 font : bold 20 px verdana , sans - serif ;
3 }
4 h2 {
5 font : bold 14 px verdana , sans - serif ;
6 }

Código 16: Agregando estilos para los elementos <h1> y <h2>.

La propiedad font, asignada a los elementos <h1> y <h2> en el código 16, nos permite declarar todos
los estilos para el texto en una sola lı́nea. Las propiedades que pueden ser declaradas usando font son: font-
style, font-variant, font-weight, font-size/line-height, y font-family en este orden. Con estas reglas estamos
cambiando el grosor, tamaño y tipo de letra del texto dentro de los elementos <h1> y <h2> a los valores
que deseamos.

5.4. Declarando nuevos elementos HTML5

Otra regla básica que debemos declarar desde el comienzo es la definición por defecto de elementos
estructurales de HTML5. Algunos navegadores aún no reconocen estos elementos o los tratan como elementos
inline (en lı́nea). Necesitamos declarar los nuevos elementos HTML5 como elementos block para asegurarnos
de que serán tratados como regularmente se hace con elementos <div> y de este modo construir nuestro
modelo de caja:

1 header , section , footer , aside , nav , article , figure , figcaption , hgroup {

2 display : block ;
3 }

Código 17: Regla por defecto para elementos estructurales de HTML5.

A partir de ahora, los elementos afectados por la regla del código 17 serán posicionados uno sobre otro a
menos que especifiquemos algo diferente más adelante.

5.5. Centrando el cuerpo

El primer elemento que es parte del modelo de caja es siempre <body>. Normalmente, por diferentes
razones de diseño, el contenido de este elemento debe ser posicionado horizontalmente. Siempre deberemos
especificar el tamaño de este contenido, o un tamaño máximo, para obtener un diseño consistente a través
de diferentes configuraciones de pantalla.

1 body {
13
2 text - align : center ;
3 }

Código 18: Centrando el cuerpo.

Por defecto, la etiqueta <body> (como cualquier otro elemento block) 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 página en la pantalla necesitamos centrar el contenido dentro del cuerpo. Con la regla agregada
en el código 18, todo lo que se encuentra dentro de <body> será centrado en la ventana, centrando de este
modo toda la página web.

5.6. Creando la caja principal

Siguiendo con el diseño de nuestra plantilla, debemos especificar una tamaño o tamaño máximo para el
contenido del cuerpo. Como seguramente recuerda, en el código 14 en este mismo capı́tulo agregamos un
elemento <div> a la plantilla para agrupar todas las cajas dentro del cuerpo. Este <div> será considerado la
caja principal para la construcci ón de nuestro modelo de caja (este es el propósito porel que lo agregamos).
De este modo, modificando el tamaño de este elemento lo hacemos al mismo tiempo para todos los demás:

1 # agrupar {
2 width : 960 px ;
3 margin : 15 px auto ;
4 text - align : left ;
5 }

Código 19: Definiendo las propiedades de la caja principal.

La regla del código 19 está referenciando por primera vez un elemento a través del valor de su atributo
id. El carácter # 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 común para un sitio web estos
dı́as (los valores se encuentran entre 960 y 980 pixeles de ancho, sin embargo estos parámetros cambian
constante mente a través del tiempo, por supuesto).
El segundo estilo es parte de lo que llamamos el Modelo de Caja Tradicional. En la regla previa (código 18),
especificamos que el contenido del cuerpo serı́a centrado horizontalmente con el estilo text-align: center. Pero
esto solo afecta contenido inline, como textos o imágenes. Para elementos block, como un <div>, necesitamos
establecer un valor especı́fico para sus márgenes que los adapta automáticamente al tamaño de su elemento
padre. La propiedad margin usada para este propósito puede tener cuatro valores: superior, derecho, inferior,
izquierdo, en este 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 parámetros, el resto tomará los mismos valores. En nuestro ejemplo estamos
usando esta técnica.
En el código 19, el estilo margin: 15px auto asigna 15 pixeles al margen superior e inferior del elemento
<div> que está afectando y declara como automático el tamaño de los márgenes de izquierda y derecha (los
dos valores declarados son usados para definir los cuatro márgenes). De esta manera, habremos generado un
espacio de 15 pixeles en la parte superior e inferior del cuerpo y los espacios a los laterales (margen izquierdo
y derecho) serán calculados automáticamente de acuerdo al tamaño del cuerpo del documento y el elemento
<div>, efectivamente centrando el contenido en pantalla.
La página web ya está centrada y tiene un tamaño fijo de 960 pixeles. Lo próximo que necesitamos hacer
es prevenir un problema que ocurre en algunos navegadores. La propiedad text-align es hereditaria. Esto
significa que todos los elementos dentro del cuerpo y su contenido serán centrados, no solo la caja principal.
El estilo asignado a < body > en el código 18 será asignado a cada uno de sus hijos. Debemos retornar este
estilo a su valor por defecto para el resto del documento. El tercer y último estilo incorporado en la regla del
código 19 (text-align: left) logra este propósito. El resultado final es que el contenido del cuerpo es centrado
pero el contenido de la caja principal (el <div> identificado como agrupar) es alineado nuevamente hacia la
izquierda, por lo tanto todo el resto del código HTML dentro de esta caja hereda este estilo.
14
 Manos a la obra
Si aún no lo ha hecho, copie cada una de las reglas listadas hasta este punto dentro de un archivo de
texto vacı́o llamado [Link]. Este archivo debe estar ubicado en el mismo directorio (carpeta)
que el archivo HTML con el código 14. Al terminar, deberá contar con dos archivos, uno con el código
HTML y otro llamado [Link] con todos los estilos CSS estudiados desde el código 15. Abra el
archivo HTML en su navegador y en la pantalla podrá notar la caja creada.

5.7. La cabecera
Continuemos con el resto de los elementos estructurales. Siguiendo la etiqueta de apertura del <div>
principal se encuentra el primer elemento estructural de HTML5: <header>. Este elemento contiene el tı́tulo
principal de nuestra página 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.
Como ya mencionamos, cada elemento block, ası́ como el cuerpo, por defecto tiene 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 (la ventana del navegador), pero en el resto de los elementos
el espacio máximo disponible estará determinado por el ancho de su elemento padre. En nuestro ejemplo,
el espacio máximo disponible para los elementos dentro de la caja principal será de 960 pixeles, porque su
padre es la caja principal la cual fue previamente configurada con este tamaño.

1 # cabecera {
2 background : # FFFBB9 ;
3 border : 1 px solid #999999;
4 padding : 20 px ;
5 }

Código 20: Agregando estilos para < header >.

Debido a que <header> ocupará todo el espacio horizontal disponible en la caja principal y será tratado
como un elemento block (y por esto posicionada en la parte superior de la página), lo único que resta por
hacer es asignar estilos que nos permitirán reconocer el elemento cuando es presentado en pantalla. En la
regla mostrada en el código 20 le otorgamos a <header> un fondo amarillo, un borde sólido de 1 pixel y un
margen interior de 20 pixeles usando la propiedad padding.

5.8. Barra de navegación

Siguiendo al elemento ¡header¿se encuentra el elemento <nav>, el cual tiene el propósito de proporcionar
ayuda para la navegación. Los enlaces agrupados dentro de este elemento representarán el menú de nuestro
sitio web. Este menú será una simple barra ubicada debajo de la cabecera. Por este motivo, del mismo modo
que el elemento ¡header¿, la mayorı́a de los estilos que necesitamos para posicionar el elemento <nav> ya
fueron asignados: <nav> es un elemento b lock 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 (también por defecto)
será tan alto como su contenido y los márgenes predeterminados. Por lo tanto, lo único q ue nos queda por
hacer es mejorar su aspecto en pantalla. Esto último lo logramos agregando un fondo gris y un pequeño
margen interno para separar las opciones del menú del borde del elemento:

1 # menu {
2 background : # CCCCCC ;
3 padding : 5 px 15 px ;
4 }
5

6 # menu li {
7 display : inline - block ;
8 list - style : none ;
9 padding : 5 px ;
10 font : bold 14 px verdana , sans - serif ;
15
11 }

Código 21: Agregando estilos para < nav >.

En el código 21, la primera regla referencia al elemento <nav> por su atributo id, cambia su color de
fondo y agrega márgenes internos de 5px y 15px con la propiedad padding.

Conceptos básicos:

La propiedad padding trabaja exactamente como margin. Cuatro valores pueden ser especificados:
superior, derecho, inferior, izquierdo, en este orden. Si solo declaramos un valor, el mismo será asignado
para todos los espacios alrededor del contenido del elemento. Si en cambio especificamos dos valores,
entonces el primero será asignado como margen interno de la parte superior e inferior del contenido y
el segundo valor será asignado al margen interno de los lados, izquierdo y derecho.

Dentro de la barra de navegación hay una lista creada con las etiquetas <ul> y <li>. Por defecto, los
ı́tems de una lista son posicionados unos sobre otros. Para cambiar este comportamiento y colocar cada
opción 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 asignamos a todos ellos el estilo display: inline-block para
convertirlos en lo que se llama cajas inline. A diferencia de los elementos block, los elementos afectados por el
parámetro inline-block estandarizado en CSS3 no generan ningún salto de lı́ne a pero nos permiten tratarlos
como elementos block y ası́ declarar un valor de ancho determinado. Este parámetro también a justa el
tamaño del elemento de acuerdo con su contenido cuando el valor del ancho no fue especificado.
En esta última regla también eliminamos el pequeño gráfico generado por defecto por los navegadores
delante de cada opción del listado utilizando la propiedad list-style.

5.9. Section y aside

Los siguientes elementos estructurales en nuestro código son dos cajas ordenadas horizontalmente. El Mo-
delo de Caja Tradicional es construido sobre estilos CSS que nos permiten especificar la posición 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 seccion y columna respectivamente.

1 # seccion {
2 float : left ;
3 width : 660 px ;
4 margin : 20 px ;
5 }
6

7 # columna {
8 float : left ;
9 width : 220 px ;
10 margin : 20 px 0 px ;
11 padding : 20 px ;
12 background : # CCCCCC ;
13 }

Código 22: Creando dos columnas con la propiedad float.

La propiedad de CSS float es una de las propiedades más 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 actúan como elementos block (con la diferencia de que son ubicados de acuerdo al valor
de esta propiedad y no el flujo normal del documento). Los elementos son movidos a izquierda o derecha en
el área disponible, tanto como sea posible, respondiendo al valor de float.
Con las reglas del código 22 declaramos la posición de ambas cajas y sus respectivos tamaños, generando
ası́ las columnas visibles en la pantalla. La propiedad float mueve la caja al espacio disponible del lado
16
 especificado por su valor, width asigna un tamaño 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 tamaño de 660 pixeles, más 40 pixeles de margen, ocupando un espacio total de 700 pixeles de ancho.
La propiedad float del elemento <aside> también tiene el valor left (izquierda). Esto significa que la caja
generada será movida al espacio disponible a su izquierda. Debido a que la caja previa creada por el elemento
<section> fue también movida a la izquierda de la pantalla, ahora el espacio disponible será solo el que esta
caja dejó libre. La nueva caja quedará ubicada en la misma lı́nea que la primera pero a su derecha, ocupando
el espacio restante en la lı́nea, creando la segunda columna de nuestro diseño.
El tamaño declarado para esta segunda caja fue de 220 pixeles. También agregamos un fondo gris y con-
figuramos un margen interno de 20 pixeles. Como resultado final, el ancho de esta caja será de 220 pixeles
más 40 pixeles agregados por la propiedad padding (los márgenes de los lados fueron declarados a 0px).

Conceptos básicos

El tamaño de un elemento y sus márgenes son agregados para obtener el valor real ocupado en pantalla.
Si tenemos un elemento de 200 pixeles de ancho y un margen de 10 pixeles a cada lado, el área real
ocupada por el e lemento será de 220 pixeles. El total de 20 pixeles del margen es agregado a los 200
pixeles del elemento y el valor final es representado en la pantalla. Lo mismo pasa con las propiedades
padding y border. Cada vez que agregamos un borde a un elemento o creamos un espacio entre el
contenido y el borde usando padding esos valores serán agregados al ancho del elemento para obtener
el valor real cuando el elemento es mostrado en pantalla. Este valor real es calculado con la fórmula:
valor real = tamaño + márgenes + márgenes internos + bordes.

Manos a la obra
Lea el código 14. Controle cada regla CSS creada hasta el momento y busque en la plantilla los
elementos HTML correspondientes a cada una de ellas. Siga las referencias, por ejemplo las claves
de los elementos (como h1) y los atributos id (como cabecera), para entender cómo trabajan las
referencias y cómo los estilos son asignados a cada elemento.

5.10. Footer
Para finalizar la aplicación 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 último elemento en lugar de a su lado:

1 # pie {
2 clear : both ;
3 text - align : center ;
4 padding : 20 px ;
5 border - top : 2 px solid #999999;
6 }

Código 23: Otorgando estilos a <footer> y recuperando el normal flujo del documento.
La regla del código 23 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 sı́ 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 permitiéndole posicionarse adyacente a una caja flotante. El valor usualmente
utilizado es both, el cual significa que ambos lados del elemento serán restaurados y el elemento seguirá el
flujo normal (este elemento ya no es flotante como los anteriores). Esto, para un elemento block, quiere decir
que será posicionado debajo del último elemento, en una nueva lı́nea. La propiedad clear también empuja
los elementos verticalmente, haciendo que las cajas flotantes ocupen un área real en la pantalla. Sin esta
propiedad, el navegador presenta el documento en pantalla como si los elementos flotantes no existieran y las
cajas se superponen.
17
 Figura 2: Representación visual del modelo de caja tradicional.

Cuando tenemos cajas posicionadas una al lado de la otra en el Modelo de Caja Tradicional siempre
necesitamos crear un elemento con el estilo clear: both para poder seguir agregando otras cajas debajo de
un modo natural. La Figura 2 muestra una representación visual de este modelo con los estilos básicos para
lograr la co rrecta disposición en pantalla.
Los valores left (izquierda) y right (derecha) de la propiedad float no significan que las cajas deben estar
necesariamente posicionadas del lado izquierdo o derecho de la ventana. Lo que los valores hacen es volver
flotante ese lado del elemento, rompiendo el flujo normal del documento. Si el valor es left, por ejemplo,
el navegador tratará de posicionar el elemento del lado izquierdo en el espacio disponible. Si hay espacio
disponible luego de otro elemento, este nuevo elemento será situado a su derecha, porque su lado izquierdo
fue configurado como flotante. El elemento flota hacia la izquierda hasta que encuentra algo que lo bloquea,
como otro elemento o el borde de su elemento padre. Esto es importante cuando queremos crear varias
columnas en la pantalla. En este caso cada columna tendrá el valor left en la propiedad float para asegurar
que cada columna estará continua a la otra en el orden correcto. De este modo, cada columna flotará hacia
la izquierda hasta que es bloqueada por otra columna o el borde del elemento padre.

5.11. Últimos toques

Lo único que nos queda por hacer es trabajar en el diseño del contenido. Para esto, solo necesitamos
configurar los pocos elementos HTML5 restantes:

1 article {
2 background : # FFFBCC ;
3 border : 1 px solid #999999;
4 padding : 20 px ;
5 margin - bottom : 15 px ;
6 }
7

8 article footer {
9 text - align : right ;
10 }
11

12 time {
18
13 color : #999999;
14 }
15

16 figcaption {
17 font : italic 14 px verdana , sans - serif ;
18 }

Código 24: Agregando los últimos toques a nuestro diseño básico.

La primera regla del código 24 referencia todos los elementos <article> y les otorga algunos estilos básicos
(color de fondo , un borde sólido de 1 pixel, margen interno y margen inferior). El margen inferior de 15
pixeles tiene el propósito de separar un elemento <article> del siguiente verticalmente.
Cada elemento <article> cuenta también con un elemento <footer> que muestra el número de comentarios
recibidos. Par a 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
técnic a de referencia fue aplicada aquı́ para alinear a la derecha el texto dentro de los elementos <footer>
de cada <article>.
Al final del código 24 cambiamos el color de cada elemento <time> y diferenciamos la descripción de la
imagen (insertada con el elemento <figcaption>) del resto del texto usando una tipo de letra diferente.

Manos a la obra
Si aún no lo ha hecho, copie cada regla CSS listada en este capı́tulo desde el código 15, una debajo
de otra, dentro del archivo [Link], y luego abra el archivo HTML con la plantilla creada en
código 14 en su navegador. Esto le mostrará cómo funciona el Modelo de Caja Tradicional y cómo los
elementos estructurales son organizados en pantalla.

5.12. Box-sizing
Existe una propiedad adicional incorporada en CSS3 relacionada con la estructura y el Modelo de Caja
Tradicional. La propiedad box-sizing nos permite cambiar cómo el espacio total ocupado por un elemento en
pantalla será calculado forzando a l os navegadores a incluir en el ancho original los valores de las propiedades
padding y border.
Como explicamos anteriormente, cada vez que el área total ocupada por un elemento es calculada, el
navegador obtiene el valor final por medio de la siguiente fórmula: tamaño + márgenes + márgenes internos
+ bordes. Por este motivo, si declaramos la propiedad width igual a 100 pixeles, margin en 20 pixeles, padding
en 10 pixeles y border en 1 pixel, el área horizontal total ocupada por el elemento será: 100+40+20+2=
162 pixeles (note que tuvimos que duplicar los valores de margin, padding y border en la fórmula porque
consideramos que los mismos fueron asignados tanto para el lado derecho como el izquierdo).
Esto significa que cada vez que declare el ancho de un elemento con la propiedad width, deberá recordar
que el área real para ubicar el elemento en pantalla será seguramente más grande. Dependiendo de sus
costumbres, a veces podrı́a resultar útil forzar al navegador a incluir los valores de padding y border en el
tamaño del elemento. En este caso la nueva fórmula serı́a simplemente: tamaño + márgenes.

1 div {
2 width : 100 px ;
3 margin : 20 px ;
4 padding : 10 px ;
5 border : 1 px solid #000000;
6 -moz - box - sizing : border - box ;
7 - webkit - box - sizing : border - box ;
8 box - sizing : border - box ;
9 }

Código 25: Incluyendo padding y border en el tamaño del elemento.

La propiedad box-sizing puede tomar dos valores. Por defecto es configurada como content-box, lo que
significa que los navegadores agregarán los valores de padding y border al tamaño especificado por width y
19
height. Usando el valor border-box en su lugar, este comportamiento es cambiado de modo que padding y
border son incluidos dentro del elemento.
El código 25 muestra la aplicación de esta propiedad en un elemento <div>. Este es solo un ejemplo y
no vamos a usarlo en nuestra plantilla, pero puede ser útil para algunos diseñadores dependiendo de qué tan
familiarizados se encuentran con los métodos tradicionales propuestos por versiones previas de CSS.

IMPORTANTE
La propiedad box-sizing, al igual que otras importantes propiedades CSS3 estudiadas más adelante,
pueden encontrarse en estado experimental en algunos navegadores. Para aplicarla efectivamente a
sus documentos, debe declararla con los correspondientes prefijos, como hicimos en el código 25.

Los prefijos para los navegadores más comunes son los siguientes:

-moz- para Firefox.

-webkit- para Safari y Chrome.
-o- para Opera.
-khtml- para Konqueror.

-ms- para Internet Explorer.

-chrome- especı́fico para Google Chrome.

6. Propiedades CSS3
6.1. Las nuevas reglas
La web cambió para siempre cuando unos años atrás nuevas aplicaciones desarrolladas sobre implemen-
taciones Ajax mejoraron el diseño y la experiencia de los usuarios. La versión 2.0, asignada a la web para
describir un nuevo nivel de desarrollo, representó un cambio no solo en la forma en que la información era
transmitida sino también en cómo los sitios web y nuevas aplicaciones eran diseñados y construidos.
Los códigos implementados en esta nueva generación de sitios web pronto se volvieron estándar. La innova
ción se volvió tan importante para el éxito de cualquier proyecto en Internet que programadores desarrollaron
librerı́as completas para superar las limitaciones y satisfacer los nuevos requerimientos de los diseñadores.
La falta de soporte por parte de los navegadores era evidente, pero la organización responsable de los
estándares web no tomó las tendencias muy seriamente e intentó seguir su propio camino. Afortunadamente,
algunas mentes brillantes siguieron desarrollando nuevos estándares en paralelo y pronto HTML5 nació. Luego
del retorno de la calma (y algunos acuerdos de por medio), la integración entre HTML, CSS y Javascript bajo
la tutela de HTML5 fue como el caballero bravo y victorioso que dirige las tropas hacia el palacio enemigo.
A pesar de la reciente agitación, esta batalla comenzó mucho tiempo atrás, con la primera especificación
de la tercera versión de CSS. Cuando finalmente, alrededor del año 2005, esta tecnologı́a fue oficialmente
considerada estándar, CSS est aba listo para proveer las funciones requeridas por desarrolladores (aquellas
que programadores habı́an creado desde años atrás usando códigos Javascript complicados de implementar y
no siempre compatibles).
Ahora vamos a estudiar las contribuciones hechas por CSS3 a HTML5 y todas las propiedades que
simplifican la vida de diseñadores y programadores.

6.2. 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 comenza-
remos por crear un documento HTML sencillo con algunos estilos básicos:

20
1 <! DOCTYPE html >
2 < html lang = " es " >
3 < head >
4 < title > Nuevos Estilos CSS3 </ title >
5 < link rel = " stylesheet " href = " nuevocss3 . css " >
6 </ head >
7

8 < body >

9 < header id = " principal " >
10 < span id = " titulo " > Estilos CSS Web 2.0 </ span >
11 </ header >
12 </ body >
13 </ html >

Código 26: Una plantilla simple para probar nuevas propiedades.

Nuestro documento solo tiene una sección con un texto breve en su interior. El elemento <header> usado
en la plantilla podrı́a ser reemplazado por <div>, <nav>, <section> o cualquier otro elemento estructural
de acuerdo a la ubicación en el diseño y a su función. Luego de aplicar los estilos, la caja generada con el
código 26 lucirá como una cabecera, por consiguiente decidimos usar <header> en este caso.
Debido a que el elemento <font> se encuentra en desuso en HTML5, los elementos usados para mostrar
texto son normalmente <span> para lı́neas cortas y <p> para párrafos, entre otros. Por esta razón el texto
en nuestra plantilla fue insertado usando etiquetas <span>.

Manos a la obra
Use el código provisto en el código 26 como la plantilla para este capı́tulo. Necesitará además crear un
nuevo archivo CSS llamado [Link] para almacenar los estilos estudiados de aquı́ en adelante.

Los siguientes son los estilos básicos requeridos por nuestro documento HTML:

1 body {
2 text - align : center ;
3 }
4

5 # principal {
6 display : block ;
7 width : 500 px ;
8 margin : 50 px auto ;
9 padding : 15 px ;
10 text - align : center ;
11 border : 1 px solid #999999;
12 background : # DDDDDD ;
13 }
14

15 # titulo {
16 font : bold 36 px verdana , sans - serif ;
17 }

Código 27: Reglas básicas CSS con las que comenzar.

No hay nada nuevo en las reglas del código 27, solo los estilos necesarios para dar forma a la plantilla y
crear una caja ancha, posicionada en el centro de la ventana, con un fondo gris, un borde y un texto grande
en su interior que dice “Estilos CSS Web 2.0”.
Una de las cosas que notará sobre esta caja cuando sea mostrada en pantalla es que sus esquinas son
rectas. Puede ser un factor psicológico o no, lo cierto es que a casi nadie en este negocio le agradan las
esquinas rectas. Por lo tanto, lo primero que haremos será cambiar este aspecto.
21
 6.3. Border-radius
Por muchos años diseñadores han sufrido intentando lograr el efecto de esquinas redondeadas en las cajas
de sus páginas web. El proceso era casi siempre frustrante y extenuante. Todos lo padecieron alguna vez.
Si mira cualquier presentación en video de las nuevas caracterı́sticas incorporadas en HTML5, cada vez que
alguien habla sobre las propiedades de CSS3 que hacen posible generar fácilmente esquinas redondeadas, la
audiencia enloquece. Esquinas redondeadas eran esa clase de cosas que nos hacı́an pensar: “deberı́a ser fácil
hacerlo”. Sin embargo nunca lo fue.
Esta es la razón por la que, entre todas las nuevas posibilidades e increı́bles propiedades incorporadas en
CSS3, la que exploraremos en primera instancia es border-radius:

1 body {
2 text - align : center ;
3 }
4 # principal {
5 display : block ;
6 width : 500 px ;
7 margin : 50 px auto ;
8 padding : 15 px ;
9 text - align : center ;
10 border : 1 px solid #999999;
11

12 -moz - border - radius : 20 px / 10 px ;

13 - webkit - border - radius : 20 px / 10 px ;
14 border - radius : 20 px / 10 px ;
15 }
16 # titulo {
17 font : bold 36 px verdana , sans - serif ;
18 }

Código 28: Esquinas elı́pticas.

Manos a la obra
Copie dentro del archivo CSS llamado [Link] los estilos que quiera probar y abra el archivo
HTML generado con el código 26 en su navegador para comprobar los resultados.

6.4. Box-shadow
Ahora que finalmente contamos con la posibilidad de generar bonitas esquinas para nuestras cajas podemos
arriesgarnos con algo más. Otro muy buen efecto, que habı́a sido extremadamente complicado de lograr hasta
este momento, es sombras. Por años diseñadores han combinado imágenes, elementos y algunas propiedades
CSS para generar sombras.
Gracias a CSS3 y a la nueva propiedad box-shadow podremos aplicar sombras a nuestras cajas con solo
una simple lı́nea de código:

1 body {
2 text - align : center ;
3 }
4

5 # principal {
6 display : block ;
7 width : 500 px ;
8 margin : 50 px auto ;
9 padding : 15 px ;
10 text - align : center ;
11 border : 1 px solid #999999;
12 background : # DDDDDD ;
22
13 -moz - border - radius : 20 px ;
14 - webkit - border - radius : 20 px ;
15 border - radius : 20 px ;
16 -moz - box - shadow : rgb (150 ,150 ,150) 5 px 5 px ;
17 - webkit - box - shadow : rgb (150 ,150 ,150) 5 px 5 px ;
18 box - shadow : rgb (150 ,150 ,150) 5 px 5 px ;
19 }
20

21 # titulo {
22 font : bold 36 px verdana , sans - serif ;
23 }

Código 29: Aplicando sombra a nuestra caja.

La propiedad box-shadow necesita al menos tres valores. El primero, que puede ver en la regla del código
29, es el color. Este valor fue construido aquı́ utilizando la función rgb() y números decimales, pero podemos
escribirlo en números hexadecimales también, como hicimos previamente para otros parámetros.
Los siguientes dos valores, expresados en pixeles, establecen el desplazamiento de la sombra. Este des-
plazamiento puede ser positivo o negativo. Los valores indican, respectivamente, la distancia horizontal y
vertical desde la sombra al elemento. Valores negativos posicionarán la sombra a la izquierda y arriba del el
emento, mientras que valores positivos crearán la sombra a la derecha y debajo del elemento. Valores de 0 o
nulos posicionarán la sombra exactamente detrás del elemento, permitiendo la posibilidad de crear un efecto
difuminado a todo su alrededor.

Manos a la obra
Para probar los diferentes parámetros y posibilidades con los que contamos para asignar una sombra
a una caja, copie el código 29 dentro del archivo CSS y abra el archivo HTML con la plantilla 26 en
su navegador. Puede experimentar cambiando los valores de la propiedad box-shadow y puede usar el
mismo código para experimentar también con los nuevos parámetros estudiados a continuación.

La sombra que obtuvimos hasta el momento es sólida, sin gradientes o transparencias (no realmente
como una sombrasuele aparecer). Existen algunos parámetros más 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 difuminación. Con
este efecto ahora la sombra lucirá real. Puede intentar utilizar este nuevo parámetro decla rando un valor de
10 pixeles a la regla del código 29, como en el siguiente ejemplo:

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

Código 30: Agregando el valor de difuminación a box-shadow.

Agregando otro valor más en pixeles al final de la propiedad desparramará la sombra. Este efecto cambia
un poco la naturaleza de la sombra expandiendo el área que cubre. A pesar de que no recomendamos utilizar
este efecto, puede ser aplicable en algunos diseños.

Manos a la obra
Intente agregar un valor de 20 pixeles al final del estilo del código 30 y combine éste con el código 29
para probarlo.

El último valor posible para box-shadow no es un número sino más bien una palabra clave: inset. Esta
palabra clave convierte a la sombra externa en una sombra interna, lo cual provee un efecto de profundidad
al elemento afectado.

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

23
 Código 31: Sombra interna.

El estilo en el ćodigo 31 mostrará una sombra interna alejada del borde de la caja por unos 5 pixeles y
con un efecto de difuminación de 10 pixeles.

Manos a la obra
Los estilos de los ćodigos 30 y 31 son solo ejemplos. Para comprobar los efectos en su navegador debe
aplicar estos cambios al grupo completo de reglas presentado en el Listado 29.

IMPORTANTE
Las sombras no expanden el elemento o incrementan su tamaño, por lo que tendrá que controlar
cuidadosamente que el espacio disponible es suficiente para que la sombra sea expuesta y correctamente
dibujada en la pantalla.

6.5. Text-shadow
Ahora que conoce todo acerca de sombras probablemente estará pensando en generar una para cada
elemento de su documento. La propiedad box-shadow fue diseñada 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 conteni do del elemento. Para crear sombras para figuras
irregulares como textos, existe una propiedad especial llamada text-shadow :

1 body {
2 text - align : center ;
3 }
4

5 # principal {
6 display : block ;
7 width : 500 px ;
8 margin : 50 px auto ;
9 padding : 15 px ;
10 text - align : center ;
11 border : 1 px solid #999999;
12 background : # DDDDDD ;
13 -moz - border - radius : 20 px ;
14 - webkit - border - radius : 20 px ;
15 border - radius : 20 px ;
16 -moz - box - shadow : rgb (150 ,150 ,150) 5 px 5 px 10 px ;
17 - webkit - box - shadow : rgb (150 ,150 ,150) 5 px 5 px 10 px ;
18 box - shadow : rgb (150 ,150 ,150) 5 px 5 px 10 px ;
19 }
20

21 # titulo {
22 font : bold 36 px verdana , sans - serif ;
23 text - shadow : rgb (0 ,0 ,150) 3 px 3 px 5 px ;
24 }

Código 32: Generando una sombra para el tı́tulo.

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 difuminación.
En el código 32 una sombra azul fue aplicada al tı́tulo de nuestra plantilla con una distancia de 3 pixeles
y un radio de difuminación de 5.

24
 6.6. @font-face
Obtener un texto con sombra es realmente un muy buen truco de diseño, imposible de lograr con métodos
previos, pero más que cambiar el texto en sı́ mismo solo provee un efecto tridimensional. Una sombra, en este
caso, es como pintar un viejo coche, al final será el mismo coche. En este caso, será el mismo tipo de letra.
El problema con las fuentes o tipos de letra es tan viejo como la web. Usuarios regulares de la web a
menudo tienen un número limitado de fuentes instaladas en sus ordenadores, usualmente estas fuentes son
diferentes de un usuario a otro, y la mayorı́a de las veces muchos usuarios tendrán fuentes que otros no.
Por años, los sitios webs solo pudieron utilizar un limitado grupo de fuentes confiables (un grupo básico que
prácticamente todos los usuarios tienen i nstalados) y ası́ presentar la información en pantalla.
La propiedad @font-face permite a los diseñadores proveer un archivo conteniendo una fuente especı́fica
para mostrar sus textos en la página. Ahora podemos incluir cualquier fuente que nec esitemos con solo
proveer el archivo adecuado:

1 body {
2 text - align : center ;
3 }
4

5 # principal {
6 display : block ;
7 width : 500 px ;
8 margin : 50 px auto ;
9 padding : 15 px ;
10 text - align : center ;
11 border : 1 px solid #999999;
12 background : # DDDDDD ;
13 -moz - border - radius : 20 px ;
14 - webkit - border - radius : 20 px ;
15 border - radius : 20 px ;
16 -moz - box - shadow : rgb (150 ,150 ,150) 5 px 5 px 10 px ;
17 - webkit - box - shadow : rgb (150 ,150 ,150) 5 px 5 px 10 px ;
18 box - shadow : rgb (150 ,150 ,150) 5 px 5 px 10 px ;
19 }
20

21 # titulo {
22 font : bold 36 px MiNuevaFuente , verdana , sans - serif ;
23 text - shadow : rgb (0 ,0 ,150) 3 px 3 px 5 px ;
24 }
25

26 font - family : ’ MiNuevaFuente ’;

27 src : url ( ’ font . ttf ’) ;
28 }

Código 33: Nueva fuente para el tı́tulo.

Manos a la obra

Descargue un archivo .ttf (al que en el código llamamos [Link]) desde la web o use uno que ya posea
y cópielo en el mismo directorio (carpeta) de su archivo CSS.

Puede obtener más fuentes similares de forma gratuita en:

[Link]/typoasis/designers/steffmann/

25
 IMPORTANTE

El archivo conteniendo la fuente debe encontrarse en el mismo dominio que la página web (o en el
mismo ordenador, en este caso). Esta es una restricción de algunos navegadores como Firefox, por
ejemplo.

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 código correspondiente a esa fuente. En el código 33, el
nombre MiNuevaFuente fue asignado a nuestro nuevo tipo de letra y el archivo [Link] fue indicado como el
archivo correspondiente a esta fuente.
Una vez que la fuente es cargada, podemos comenzar a usarla en cualquier elemento del documento
simplemente escribiendo su nombre (MiNuevaFuente). En el estilo font en la regla del código 33, especificamos
que el tı́tulo será mostrado con la nueva fuente o las alternativas verdana y sans-serif en caso de que la fuente
incorporada no sea cargada apropiadamente.

6.7. Gradiente lineal

Los gradientes son uno de los efectos más atractivos entre aquellos incorporados en CSS3. Este efecto
era prácticamente imposible de implementar usando técnicas anteriores pero ahora es realmente fácil de
hacer usando CSS. Una propiedad background con algunos pocos parámetros es suficiente para convertir su
documen to en una página web con aspecto profesional:

1 body {
2 text - align : center ;
3 }
4

5 # principal {
6 display : block ;
7 width : 500 px ;
8 margin : 50 px auto ;
9 padding : 15 px ;
10 text - align : center ;
11 border : 1 px solid #999999;
12 background : # DDDDDD ;
13 -moz - border - radius : 20 px ;
14 - webkit - border - radius : 20 px ;
15 border - radius : 20 px ;
16 -moz - box - shadow : rgb (150 ,150 ,150) 5 px 5 px 10 px ;
17 - webkit - box - shadow : rgb (150 ,150 ,150) 5 px 5 px 10 px ;
18 box - shadow : rgb (150 ,150 ,150) 5 px 5 px 10 px ;
19 background : - webkit - linear - gradient ( top , # FFFFFF , #006699) ;
20 background : -moz - linear - gradient ( top , # FFFFFF , #006699) ;
21 }
22

23 # titulo {
24 font : bold 36 px MiNuevaFuente , verdana , sans - serif ;
25 text - shadow : rgb (0 ,0 ,150) 3 px 3 px 5 px ;
26 }
27

28 @font - face {
29 font - family : ’ MiNuevaFuente ’;
30 src : url ( ’ font . ttf ’) ;
31 }

Código 34: Agregando un gradiente de fondo a nuestra caja.

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-
26
 gradient(posición inicio, color inicial, color final). Los atributos de la función linear-gradient() indican el
punto de comienzo y los colores usados para crear el gradiente. El primer valor puede ser especificado en
pixeles, porcentaje o usando las palabras clave top, bottom, left y right (como hicimos en nuestro ejemplo). El
punto de comienzo puede ser reemplazado por un ángulo para declarar una dirección especı́fica del gradiente:

1 background : linear - gradient (30 deg , # FFFFFF , #006699) ;

Código 35: Gradiente con un ángulo de dirección de 30 grados.

También podemos declarar los puntos de terminación para cada color:

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

Código 36: Declarando puntos de terminación.

6.8. Gradiente radial

La sintaxis estándar para los gradientes radiales sol o difiere en unos pocos aspectos con respecto a la
anterior. Debemos usar la función radial-gradient() y un nuevo atributo para la forma:

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

Código 37: Gradiente radial.

La posición de comienzo es el origen y puede ser declarada en pixeles, porcentaje o una combinación de
las palabras clave center, top, bottom, left y right. Existen dos posibles valores para la forma (circle y ellipse)
y la terminación para el color indica el color y la posición donde las transiciones comienzan.

Manos a la obra
Reemplace la linea correspondiente del código 34 por la linea del código 37 para probar el efecto en
su navegador (no olvide agregar los prefijos –moz- o -webkit- dependiendo del navegador que esté
usando).

IMPORTANTE
Pruebe sus códigos en cada navegador disponible en el mercado para comprobar el estado actual de
las diferentes implementaciones.

6.9. RGBA
Hasta este momento los colores fueron declarados como sólidos utilizando valores hexadecimales o la
función rgb() para decimales. CSS3 ha agregado una nueva función llamada rgba() que simplifica la asignación
de colores y transparencias. Esta función además resuelve un problema previo provocado por la propiedad
opacity.
La función rgba() tiene cuatro atributos. Los primeros tres son similares a los usados en rgb() y simplemente
declaran los valores para los colores rojo, verde y azul en números decimales del 0 al 255. El último, en cambio,
corresponde a la 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.

1 # titulo {
2 font : bold 36 px MiNuevaFuente , verdana , sans - serif ;
3 text - shadow : rgba (0 ,0 ,0 ,0.5) 3 px 3 px 5 px ;
4 }

Código 38: Mejorando la sombra del texto con transparencia.

27
 El código 38 ofrece un simple ejemplo que demuestra cómo los efectos son mejorados aplicando transpa-
rencia. Reemplazamos la función rgb() por rgba() en la sombra del tı́tulo y agregamos un valor de opacida-
d/transparencia de 0.5. Ahora la sombra de nuestro tı́tulo se mezclará con el fondo, creando un efecto mucho
más na tural.
En previas versiones de CSS tenı́amos que usar diferentes técnicas en diferentes navegadores para hacer
un elemento transparente. Todas presentaban el mismo problema: el valor de opacidad de un elemento era
heredado por sus hijos. Ese problema fue resuelto por rgba() y ahora podemos asignar un valor de opacidad
al fondo de una caja sin afectar su contenido.

Manos a la obra
Reemplace la linea correspondiente del código 34 por la linea del código 38 para probar el efecto en
su navegador.

6.10. HSLA
Del mismo modo que la función rgba() agrega un valor de opacidad a rgb( ), la función hsla() hace lo
mismo para la función hsl().
La función hsla() es simplemente un función diferente para generar colores, pero es más intuitiva que
rgba(). Algunos diseñadores encontrarán más fácil generar un set de colores persona lizado utilizando hsla().
La sintaxis de esta función es: hsla(tono, saturación, luminosidad, opacidad).

1 # titulo {
2 font : bold 36 px MiNuevaFuente , verdana , sans - serif ;
3 text - shadow : rgba (0 ,0 ,0 ,0.5) 3 px 3 px 5 px ;
4 color : hsla (120 , 100 % , 50 %, 0.5) ;
5 }

Código 39: Nuevo color para el tı́tulo usando hsla().

Siguiendo la sintaxis, tono representa el color extraı́do de una rueda imaginaria y es expresado en grados
desde 0 a 360. Cerca de 0 y 360 están los colores rojos, cerca de 120 los verdes y cerca de 240 los azules. El
valor saturación es representado en porcentaje, desde 0 % (escala de grises) a 100 % (todo color o comple-
tamente saturado). La luminosidad es también un valor en porcentaje desde 0 % (completamente oscuro) a
100 % (completamente iluminado). El valor 50 % representa luminosidad normal o promedio. El último valor,
ası́ como en rgba(), representa la opacidad.

Manos a la obra
Reemplace la linea correspondiente del código 34 por la linea del código 39 para probar el efecto en
su navegador.

6.11. Outline
La propiedad outline es una vieja propiedad CSS que ha sido expandida en CSS3 para incluir un valor
de desplazamiento. Esta propiedad era usada para crear un segundo borde, y ahora ese borde puede ser
mostrado alejado del borde real del elemento.

1 # principal {
2 display : block ;
3 width : 500 px ;
4 margin : 50 px auto ;
5 padding : 15 px ;
6 text - align : center ;
7 border : 1 px solid #999999;
28
8 background : # DDDDDD ;
9 outline : 2 px dashed #000099;
10 outline - offset : 15 px ;
11 }

Código 40: Agregando un segundo borde a la cabecera.

En el código 40 agregamos a los estilos originalmente aplicados a la caja de nuestra plantilla un segundo
borde de 2 pixeles con un desplazamiento de 15 pixeles. La propiedad outline tiene similares caracterı́sticas
y usa los mismos pará metros que border. La propiedad outline-offset solo necesita un valor en pixeles.

Manos a la obra
Reemplace la linea correspondiente del código 34 por la linea del código 40 para probar el efecto en
su navegador.

6.12. Border-image
Los posibles efectos logrados por las propiedades border y outline están limitados a lı́neas simples y solo
algunas opciones de configuración. La nueva propiedad border-image fue incorporada para superar estas limi-
taciones y dejar en manos del diseñador la calidad y variedad de bordes disponibles ofreciendo la alternativa
de utilizar imágenes propias.
La propiedad border-image toma una imagen y la utiliza como patrón. De acuerdo a los valores otorgados,
la imagen es cortada como un pastel, las partes obtenidas son luego ubicadas alrededor del objeto para
construir el borde.

Figura 3: Este es el patrón desde el cual vamos a construir nuestro borde. Cada pieza es de 29 pixeles de
ancho, como indica la figura.

Para hacer el trabajo, necesitamos especificar tres atributos: el nombre del archivo de la imagen, el tamaño
de las piezas que queremos obtener del patrón y algunas palabras clave para declarar cómo las piezas serán
distribuidas alrededor del objeto.

1 # principal {
2 display : block ;
3 width : 500 px ;
4 margin : 50 px auto ;
5 padding : 15 px ;
6 text - align : center ;
7 border : 29 px ;
8 -moz - border - image : url ( " diamonds . png " ) 29 stretch ;
29
9 - webkit - border - image : url ( " diamonds . png " ) 29 stretch ;
10 border - image : url ( " diamonds . png " ) 29 stretch ;
11 }

Código 41: Un borde personalizado para la cabecera.

Con las modificaciones realizadas en el código 41 estamos definiendo un borde de 29 pixeles para la caja
de nuestra cabecera y luego cargando la imagen [Link] para construir ese borde. El valor 29 en la
propiedad border-image declara el tamaño de las piezas y stretch es uno de los métodos disponibles para
distribuir estas piezas alrededor de la caja.
Existen tres valores posibles para el último atributo. La palabra clave repeat repetirá las piezas tomadas
de la imagen todas las veces que sea necesario para cubrir el lado del elemento. En este caso, el tamaño de
las piezas es preservado y la imagen será cortada si no existe más espacio para ubicarla. La palabra clave
round considerará qué tan largo es el lado a ser cubierto y ajustará el tamaño de las piezas para asegurarse
que cubren todo el lado y ninguna pieza es cortada.
Finalmente, la palabra clave stretch (usada en el código 41) estira solo una pieza para cubrir el lado
completo. En nuestro ejemplo utilizamos la propiedad border para definir el tamaño del borde, pero se puede
también usar border-with para especificar diferentes tamaños para cada lado del elemento (la propiedad
border-with usa cuatro parámetros, con una sintaxis similar a margin y padding). Lo mismo ocurre con
el tamaño de cada pieza, hasta cuatro valores pueden ser declarados para obtener diferentes imágenes de
diferentes tamaños desde el patrón.

6.13. Transform y transition

Los elementos HTML, cuando son creados, son como bloques sólidos e inamovibles. Pueden ser movidos
usando código Javascript o aprovechando librerı́as populares como jQuery ([Link]), por ejemplo,
pero no existı́a un procedimiento estándar para este propósito hasta que CSS3 presentó las propiedades
transform y transition.
Ahora ya no tenemos que pensar en cómo hacerlo. En su lugar, solo tenemos que conocer cómo ajustar
unos pocos parámetros y nuestro sitio web puede ser tan flexible y dinámico como lo imaginamos.
La propiedad transform puede operar cuatro transformaciones básicas en un elemento: scale (escalar),
rotate (rotar), skew (inclinar) y translate (trasladar o mover). Veamos cómo funcionan:

6.13.1. Transform: scale

1 # principal {
2 display : block ;
3 width : 500 px ;
4 margin : 50 px auto ;
5 padding : 15 px ;
6 text - align : center ;
7 border : 1 px solid #999999;
8 background : # DDDDDD ;
9 -moz - transform : scale (2) ;
10 - webkit - transform : scale (2) ;
11 }

Código 42: Cambiando la escala de la caja de la cabecera.

En el ejemplo del código 42 partimos de los estilos básicos utilizados para la cabecera generada en el código
27 y aplicamos transformación duplicando la escala del elemento. La función scale recibe dos parámetros: el
valor X para la escala horizontal y el valor Y para la escala vertical. Si solo un valor es provisto el mismo
valor es aplicado a ambos parámetros.
Números enteros y decimales pueden ser declarados para la escala. Esta escala es calculada por medio de
una matriz. Los valores entre 0 y 1 reducirán el elemento, un valor de 1 mantendrá las proporciones originales
y valores mayores que 1 aumentarán las dimensiones del elemento de manera incremental.
Un efecto atractivo puede ser logrado con esta función otorgando valores negativos:
30
1 # principal {
2 display : block ;
3 width : 500 px ;
4 margin : 50 px auto ;
5 padding : 15 px ;
6 text - align : center ;
7 border : 1 px solid #999999;
8 background : # DDDDDD ;
9 -moz - transform : scale (1 , -1) ;
10 - webkit - transform : scale (1 , -1) ;
11 }

Código 43: Creando una imagen espejo con scale.

En el código 43, dos parámetros han sido declarados para cambiar la escala de la caja principal. El primer
valor, 1, mantiene la proporción original para la dimensión horizontal de la caja. El segundo valor también
mantiene la proporción original, pero invierte el elemento verticalmente para producir el efecto espejo.
Existen también otras dos funciones similares a scale pero restringidas a la dimensión horizontal o vertical:
scaleX y scaleY. Estas funciones, por supuesto, utilizan un solo parámetro.

Manos a la obra
Reemplace la linea correspondiente del código 34 por la linea del código 42 o 43 para probar el efecto
en su navegador.

6.13.2. Transform: rotate

La función rotate rota el elemento en la dirección de las agujas de un reloj. El valor debe ser especificado
en grados usando la unidad “deg”:

1 # principal {
2 display : block ;
3 width : 500 px ;
4 margin : 50 px auto ;
5 padding : 15 px ;
6 text - align : center ;
7 border : 1 px solid #999999;
8 background : # DDDDDD ;
9 -moz - transform : rotate (30 deg ) ;
10 - webkit - transform : rotate (30 deg ) ;
11 }

Código 44: Rotando la caja.

Si un valor negativo es declarado, solo cambiará la dirección en la cual el elemento es rotado.

Manos a la obra
Reemplace la linea correspondiente del código 34 por la linea del código 44 para probar el efecto en
su navegador.

6.13.3. Transform: skew

Esta función cambia la simetrı́a del elemento en grados y en ambas dimensiones.

1 # principal {
31
2 display : block ;
3 width : 500 px ;
4 margin : 50 px auto ;
5 padding : 15 px ;
6 text - align : center ;
7 border : 1 px solid #999999;
8 background : # DDDDDD ;
9 -moz - transform : skew (20 deg ) ;
10 - webkit - transform : skew (20 deg ) ;
11 }

Código 45: Inclinar horizontalmente.

La función skew usa dos parámetros, pero a diferencia de otras funciones, cada parámetro de esta función
solo afecta una dimensión (los parámetros actúan de forma independiente). En el código 45, realizamos una
operación transform a la caja de la cabecera para inclinarla. Solo declaramos el primer parámetro, por lo que
solo la dimensión horizontal de la caja será modificada. Si usáramos los dos parámetros, podrı́amos alterar
ambas dimensiones del objeto. Como alternativa podemos utilizar funciones diferentes para cada una de ellas:
skewX y skewY.

Manos a la obra
Reemplace la linea correspondiente del código 34 por la linea del código 45 para probar el efecto en
su navegador.

6.13.4. Transform: translate

Similar a las viejas propiedades top y left, la función translate mueve o desplaza el elemento en la pantalla
a una nueva posición.

1 # principal {
2 display : block ;
3 width : 500 px ;
4 margin : 50 px auto ;
5 padding : 15 px ;
6 text - align : center ;
7 border : 1 px solid #999999;
8 background : # DDDDDD ;
9 -moz - transform : translate (100 px ) ;
10 - webkit - transform : translate (100 px ) ;
11 }

Código 46: Moviendo la caja de la cabecera hacia la derecha.

La función translate considera la pantalla como una grilla de pixeles, con la posición original del elemento
usada como un punto de referencia. La esquina superior izquierda del elemento es la posición 0,0, por lo
que valores negativos moverán al objeto hac ia la izquierda o hacia arriba de la posición original, y valores
positivos lo harán hacia la derecha o hacia abajo.
En el código 46, movimos la caja de la cabecera hacia la derecha unos 100 pixeles desde su posición
original. Dos valores pueden ser declarados en esta función si queremos mover el elemento horizontal y ver-
ticalmente, o podemos usar funciones independientes llamadas translateX y translateY.

Manos a la obra
Reemplace la linea correspondiente del código 34 por la linea del código 46 para probar el efecto en
su navegador.

32
 6.14. Transformando todo al mismo tiempo
A veces podrı́a resultar útil realizar sobre un elemento varias transformaciones al mismo tiempo. Para
obtener una propiedad transform combinada, solo tenemos que separar cada función a aplicar con un espacio:

1 # principal {
2 display : block ;
3 width : 500 px ;
4 margin : 50 px auto ;
5 padding : 15 px ;
6 text - align : center ;
7 border : 1 px solid #999999;
8 background : # DDDDDD ;
9 -moz - transform : translateY (100 px ) rotate (45 deg ) scaleX (0.3) ;
10 - webkit - transform : translateY (100 px ) rotate (45 deg ) scaleX (0.3) ;
11 }

Código 47: Moviendo, escalando y rotando el elemento con solo una lı́nea de código.

Una de las cosas que debe recordar en este caso es que el orden es importante. Esto es debido a que
algunas funciones mueven el punto original y el centro del objeto, cambiando de este modo los parámetros
que el resto de las funciones utiliz arán para operar.

Manos a la obra
Reemplace la linea correspondiente del código 34 por la linea del código 47 para probar el efecto en
su navegador.

6.15. Transformaciones dinámicas

Lo que hemos aprendido hasta el momento en este capı́tulo cambiará la forma de la web, pero la mantendrá
tan estática como siempre. Sin embargo, podemos aprovecharnos de la combinación de transformaciones y
pseudo clases para convertir nuestra página en una aplicación dinámica

1 # principal {
2 display : block ;
3 width : 500 px ;
4 margin : 50 px auto ;
5 padding : 15 px ;
6 text - align : center ;
7 border : 1 px solid #999999;
8 background : # DDDDDD ;
9 }
10

11 # principal : hover {
12 -moz - transform : rotate (5 deg ) ;
13 - webkit - transform : rotate (5 deg ) ;
14 }

Código 48: Respondiendo a la actividad del usuario.

En el código 48, la regla original del código 27 para la caja de la cabecera fue conservada intacta, pero
una nueva regla fue agregada para aplicar efectos de transformación usando la vieja pseudo clase :hover. El
resultado obtenido es que cada vez que el puntero del ratón pasa sobre esta caja, la propiedad transform rota
la caja en 5 grados, y cuando el puntero se aleja la caja vuelve a rotar de regreso a su posición original. Este
efecto produce una animaciónbásica pero útil con nada más que propiedades CSS.

33
 Manos a la obra
Reemplace la linea correspondiente del código 34 por la linea del código 48 para probar el efecto en
su navegador.

6.16. Transiciones
De ahora en más, hermosos efectos usando transformacio nes dinámicas son accesibles y fáciles de imple-
ment ar. Sin embargo, una animación real requiere de un proceso de más de dos pasos.
La propiedad transition fue incluida para suavizar los cambios, creando mágic amente el resto de los pasos
que se encuentran implı́citos en el movimiento. Solo agregando esta propiedad forzamos al navegador a tomar
cartas en el asunto, crear para nosotros todos esos pasos invisibles, y generar una transición suave desde un
estado al otro.

1 # principal {
2 display : block ;
3 width : 500 px ;
4 margin : 50 px auto ;
5 padding : 15 px ;
6 text - align : center ;
7 border : 1 px solid #999999;
8 background : # DDDDDD ;
9 -moz - transition : -moz - transform 1 s ease - in - out 0.5 s ;
10 - webkit - transition : - webkit - transform 1 s ease - in - out 0.5 s ;
11 }
12

13 # principal : hover {
14 -moz - transform : rotate (5 deg ) ;
15 - webkit - transform : rotate (5 deg ) ;
16 }

Código 49: Una rotación usando transiciones

Como puede ver en el código 49, la propiedad transition puede tomar hasta cuatro parámetros separados
por un espacio. El primer valor es la propiedad que será considerada para hacer la transición (en nuestro
ejemplo elegimos transform). Esto es necesario debido a que varias propiedades pueden cambiar al mismo
tiempo y probablemente necesitemos crear los pasos del proceso de transición solo para una de ellas. El
segundo parámetro especifica el tiempo que la transición se tomará para ir de la posición inicial a la final.
El tercer parámetro puede ser cualquiera de las siguientes palabras clave: ease, linear, ease-in, ease-out o
ease-in-out. Estas palabras clave determinan cómo se realizará el proceso de transición basado en una curva
Bézier. Cada una de ellas representa diferentes tipos de curva Bézier, y la mejor forma de saber cómo trabajan
es viéndolas funcionar en pantalla. El último parámetro para la propiedad transition es el retardo. Éste indica
cuánto tiempo tardará la transición en comenzar.
Para producir una transición para todas las propiedades que están cambiando en un objeto, la palabra
clave all debe ser especificada.
También podemos declarar varias propiedades a la vez listándolas separadas por coma.

Manos a la obra
Reemplace la linea correspondiente del código 34 por la linea del código 49 para probar el efecto en
su navegador.

34
IMPORTANTE
En el código 49 realizamos una transición con la propiedad transform. No todas las propiedades CSS
son soportadas por la propiedad transition en este momento y probablemente la lista cambie con
el tiempo. Deberá probar cada una de ellas por usted mismo o visitar el sitio web oficial de cada
navegador para encontrar más información al respecto.

35