CSS primeros pasos

Índice

Estilos embebidos

Una de las técnicas más simples para incorporar estilos CSS a un documento HTML es la de asignar los estilos dentro de las etiquetas por medio del atributo style. El Listado nos 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 píxeles.

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 píxeles el tamaño de cada uno de los elementos <p> debería ser de 24 píxeles. Tendría que modificar cada estilo en cada etiqueta <p> en el documento completo.

Una mejor alternativa es insertar los estilos en la cabecera del documento y luego usar referencias para afectar a los elementos HTML que correspondan:

El elemento <style> (mostrado en el listado de arriba) 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>.

Escoger las fuentes

La propiedad font-family se pueden asignar una serie de fuentes como valores de una lista separada por comas, ejemplo:

El navegador intentará utilizar la primera fuente de la lista, Arial. Si no encontrara esta fuente en el sistema del usuario, probará con la segunda fuente, Helvética. En caso de que tampoco esté en el sistema el tipo de fuente, el texto se mostrará con la fuente sans-serif. El listado de arriba y en arras de una mejor comprensión, colocaremos cada atributo en una línea separado de un “;” para separar cada comando.

Al declarar una propiedad font-family, incluya siempre como última entrada de la lista una de las fuentes genéricas de CSS: serif, sans-serif, monotype, fantasy o cursive. Estas dos últimas fuentes raramente son utilizadas.

El elemento <style> (mostrado en el listado de arriba) 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>.

Estructura global

Ahora que nos hemos metido brevemente en los entresijos de las hojas de estilo CSS veamos paso a paso como comenzar nuestra página web:

Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas. En esta parte del capítulo vamos a ver cómo construir la estructura global de un documento HTML y los nuevos elementos semánticos incorporados en HTML5.

En primer lugar indicamos el tipo de documento que estamos creando. Esto en HTML5 es extremadamente sencillo:

Esta línea debe ser la primera línea del archivo, sin espacios o líneas que la precedan. De esta forma, el modo estándar del navegador es activado y las incorporaciones de HTML5 son interpretadas siempre que sea posible, o ignoradas en caso contrario.

  • Copie el código en un archivo de texto que llamaremos paso_a_paso.html y agregar las próximas líneas a medida que las vayamos estudiando.

Después de declarar el tipo de documento, debemos comenzar a construir la estructura HTML. Con la estructura tipo árbol de este lenguaje tiene su raíz en el elemento <html>. Este elemento envolverá al resto del código:

El atributo lang en la etiqueta de apertura <html> es el único atributo que necesitamos especificar en HTML5. Este atributo define el idioma del contenido del documento que estamos creando, en este caso el contenido será en  español.

El código HTML insertado entre las etiquetas <html> tiene que ser dividido entre dos secciones principales. Al igual que en versiones previas de HTML, la primera sección es la cabecera y la segunda el cuerpo. El siguiente paso, por lo tanto, será crear estas dos secciones en el código usando los elementos <head> y <body> que ya conocimos anteriormente. El elemento <head> va primero, por supuesto, y al igual que el resto de los elementos estructurales tiene una etiqueta de apertura y una de cierre:

Dentro de las etiquetas <head> definiremos el título de nuestra página web, declararemos el set de caracteres correspondiente, proveeremos información general acerca del documento e incorporaremos los archivos externos con estilos, códigos Javascript o incluso imágenes necesarias para generar la página en la pantalla. Excepto por el título y algunos iconos, el resto de la información incorporada en el documento entre estas etiquetas es invisible para el usuario.

La siguiente Sección que es parte principal de la organización de un documento HTML es el cuerpo. El cuerpo representa la parte visible de todo documento y es especificado entre etiquetas <body>. Estas etiquetas tampoco han cambiado en relación con versiones previas de HTML:

El código HTML no está formado por un conjunto de instrucciones secuenciales. HTML es un lenguaje de etiquetas, un listado de elementos que usualmente se utilizan en pares (etiquetas de apertura y de cierre), que pueden ser anidados (etiquetas dentro de otras).

Es momento de construir la cabecera del documento. En HTML 5 se incorporaron cambios e innovaciones dentro de la cabecera, y uno de ellos es la etiqueta que define el juego de caracteres a utilizar para mostrar el documento. Ésta es una etiqueta <meta> que especifica cómo se presentará en pantalla el texto:

La innovación de este elemento en HTML5, como en la mayoría de los casos, es solo simplificación. La nueva etiqueta <meta> para la definición del tipo de caracteres es más corta y simple. Por supuesto, podemos cambiar el tipo iso-8859-1 por el necesario para nuestros documentos y agregar otras etiquetas <meta> como description o keywords para definir otros aspectos de la página web, como es mostrado en el siguiente ejemplo:

Hay varios tipos de etiqueta <meta> que pueden ser incluidas para declarar información general sobre el documento, pero esta información no es mostrada en la ventana del navegador, es solo importante para motores de búsqueda y dispositivos que necesitan hacer una vista previa del documento u obtener un sumario de la información que contiene.

La mayoría de la información insertada entre las etiquetas <head> no es visible para los usuarios. el atributo name dentro de la etiqueta <meta> especifica su tipo y content declara su valor, pero ninguno de estos valores es mostrado en pantalla.

En HTML5 no es necesario cerrar etiquetas simples con una barra al final, pero es aconsejable utilizarlas por razones de compatibilidad. El anterior código se podría escribir de la siguiente manera:

La etiqueta <title>, simplemente especifica el título del documento.

El texto entre las etiquetas <title> es el título del documento que estamos creando. Normalmente este texto es mostrado en la barra superior de la ventana del navegador.

Otro importante elemento que va dentro de la cabecera del documento es <link>. Este elemento es usado para incorporar estilos, códigos Javascript, imágenes o iconos desde archivos externos. Uno de los usos más comunes para <link> es la incorporación de archivos con estilos CSS:

Utilizando la línea <link rel=”stylesheet” href=”mi_estilo.css”> le decimos al navegador que cargue el archivo mi_estilo.css porque contiene todos los estilos necesitados para presentar el documento en pantalla.

En HTML5 ya no se necesita especificar qué tipo de estilos estamos insertando, por lo que el atributo type fue eliminado. Solo necesitamos dos atributos para incorporar nuestro archivo de estilos: rel y href. El atributo rel significa “relación” y es acerca de la relación entre el documento y el archivo que estamos incorporando por medio de href. En este caso, el atributo rel tiene el valor stylesheet que le dice al navegador que el archivo mi_estilo.css es un archivo CSS con estilos requeridos para presentar la página en pantalla.

Un archivo de estilos es un grupo de reglas de formato que ayudarán a cambiar la apariencia de nuestra página web (por ejemplo, el tamaño y color del texto). Sin estas reglas, el texto y cualquier otro elemento HTML sería mostrado en pantalla utilizando los estilos estándar provistos por el navegador. Los estilos son reglas simples que normalmente requieren solo unas pocas líneas de código y pueden ser declarados en el mismo documento.

Cargar las reglas CSS desde un documento externo (otro archivo) nos permitirá organizar el documento principal, incrementar la velocidad de carga y aprovechar las nuevas características de HTML5.

Archivos externos

Declarar los estilos en la cabecera del documento ahorra espacio y vuelve al código más consistente y fácil de actualizar, 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.

Los archivos CSS son archivos de texto comunes. Al igual que los archivos HTML, puede crearlos utilizando cualquier editor de texto, tanto de Linux como de Windows.

  • De ahora en adelante agregaremos estilos CSS al archivo llamado mi_estilo.css. 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.

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

El estilo para cambiar el tamaño de la letra era una referencia a cada elemento <p> usando la palabra clave p. De esta manera el estilo insertado entre las etiquetas <style> hacia referencia a cada etiqueta <p> del documento y asignaba ese estilo particular a cada una de ellas. Existen varios métodos para seleccionar qué elementos HTML serán afectados por las reglas CSS:

  • referencia con la palabra clave del elemento.
  • referencia con el atributo id.
  • referencia con el atributo class.

Referencia 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 todos los elementos <p>:

Esta es la técnica presentada previamente arriba. 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 píxeles.

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 píxeles:

¿Podemos hacer referencia a una etiqueta específica? Si, seleccionando un elemento HTML específico desde las reglas de nuestro archivo CSS, podemos usar dos atributos diferentes: id y class.

Referencia 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:

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

El resultado de este procedimiento es que cada vez que hacemos una referencia usando el identificador texto 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.

Referencia 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:

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 texto será suficiente para asignar estos estilos a cualquier elemento que queramos:

El elemento <p> de la  línea dentro del cuerpo del código en el listado de arriba tienen el atributo class con el valor texto. 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 listado:

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:

Hacemos una referencia al nuevo código creado:

Visto desde nuestro navegador:

Referencia 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:

La regla de arriba 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:

Miremos por un momento el nuevo código HTML de arriba. Contiene cuatro elementos <p> que, según la estructura HTML, son hermanos entre sí e hijos del elemento <div>. Usando pseudo clases podemos aprovechar esta organización y referenciar un elemento específico sin importar cuánto conocemos sobre sus atributos y el valor de los mismos:

La pseudo clase nth-child() nos permite encontrar un hijo específico. Como ya explicamos, el documento HTML tiene cuatro elementos <p> que son hermanos. Esto significa que todos ellos tienen el mismo padre que es el elemento <div>. Lo que esta pseudo clase está realmente indicando es algo como: “el hijo en la posición…” por lo que el número entre paréntesis será el número de la posición del hijo, o índice. La regla del de encima hace referencia a cada segundo elemento <p> encontrado en el documento.

Visto en tu navegador favorito:

Esta regla puede incluir otras referencias. Por ejemplo, podríamos escribirla como .miclase:nthchild(2) para referenciar todo elemento que es hijo de otro elemento y tiene el valor de su atributo class igual a miclase. La pseudo clase puede ser aplicada a cualquier tipo de referencia estudiada previamente.

Usando este método de referencia podemos, por supuesto, seleccionar cualquier hijo que necesitemos cambiando el número de índice. Por ejemplo, la siguiente regla tendrá impacto sólo sobre el último elemento <p> de nuestra plantilla.

  • Cambia el valor que hay entre paréntesis en el atributo nth-child() para cambiar la línea remarcada (edita el archivo miestilo.css).
  • En el archivo CSS prueba distintos tamaños de letras.

Es posible asignar estilos a todos los elementos creando una regla para cada uno de ellos:

Vamos a añadir al archivo CSS miestilo.css un código que dejara los márgenes a 0 píxeles, el listado quedaría:

Vemos ahora la diferencia en la presentación de la página:

La regla {margin: 0px} usa el selector universal * para asignar el mismo estilo a cada elemento del documento. Este nuevo selector representa cada uno de los elementos en el cuerpo del documento y es útil cuando necesitamos establecer ciertas reglas básicas. En este caso, configuramos el margen de todos los elementos en cero píxeles para evitar espacios en blanco o líneas vacías como las creadas por el elemento <p> por defecto.

En el resto del código del listado usa la pseudo clase nth-child() para generar un menú o lista de opciones que son diferenciadas claramente en la pantalla por el color de fondo.

Podemos agregar más opciones al menú, incorporando nuevos elementos <p> en el código HTML y nuevas reglas con la pseudo clase nth-child() usando el número de índice adecuado. Sin embargo, esta aproximación genera mucho código y resulta imposible de aplicar en sitios webs con contenido dinámico. Una alternativa para obtener el mismo resultado es aprovechar las palabras clave odd y even disponibles para esta pseudo clase:

Ahora solo necesitamos dos reglas para crear la lista completa. Incluso si más adelante agregamos otras opciones, los estilos serán asignados automáticamente a cada una de ellas de acuerdo a su posición. La palabra clave odd para la pseudo clase nth-child() afecta los elementos <p> que son hijos de otro elemento y tienen un índice impar. La palabra clave even, por otro lado, afecta a aquellos que tienen un índice par.

Existen otras importantes pseudo clases relacionadas con esta última, como firstchild, last-child y only-child, algunas de ellas recientemente incorporadas. La pseudo clase first-child referencia solo el primer hijo, last-child referencia solo el último hijo, y only-child afecta un elemento siempre y cuando sea el único hijo disponible. Estas pseudo clases en particular no requieren palabras clave o parámetros, y son implementadas como en el siguiente ejemplo:

Este ejemplo modifica el último elemento <p> de la lista. Otra importante pseudo clase llamada not() es utilizada realizar una negación:

Esta regla asignará un margen de cero píxeles a cada elemento del documento excepto los elementos <p>. A diferencia del selector universal utilizado previamente, la pseudo clase not() nos permite declarar una excepción. Los estilos en la regla creada con esta pseudo clase serán asignados a todo elemento excepto aquellos incluidos en la referencia entre paréntesis.

En lugar de la palabra clave de un elemento podemos usar cualquier otra referencia que deseemos.

Todos los elementos serán afectados excepto aquellos con el valor texto2 en el atributo class.

En la primera línea del listado vemos aplicado un ejemplo que excluye a la clase .texto1 de tener el margen a cero píxeles.

:not(.texto1) {margin:0px}

:not(.texto2) {margin:0px}

:not(.texto3) {margin:0px}

:not(.texto4) {margin:0px}

  • Ensaya con lo aprendido cambia los márgenes haciendo pruebas de diferentes margenes.

Nuevos selectores

Algunos selectores fueron agregados o considerados parte de CSS3 consiguiendo ser útiles para nuestros diseños. Estos selectores usan los símbolos >, + y ~ para especificar la relación entre elementos.

El selector > indica que el elemento afectado por la regla es el elemento de la derecha cuando tiene al de la izquierda como su padre. La regla del ejemplo de arriba modifica los elementos <p> que son hijos de un elemento <div>. En este caso, fuimos bien específicos y referenciamos solamente el elemento <p> con el valor texto2 en su atributo class.

El próximo ejemplo construye un selector utilizando el símbolo +. Este selector referencia al elemento de la derecha cuando es inmediatamente precedido por el de la izquierda. Ambos elementos deben compartir el mismo padre:

La regla del arriba afecta al elemento <p> que se encuentra ubicado después del elemento <p> identificado con el valor texto1 en su atributo class.

El texto en el tercer segundo <p> aparecerá en la pantalla en color rojo debido a que este elemento <p> en particular está posicionado inmediatamente después del elemento <p> identificado con el valor texto1 en su atributo class.

El último selector se construye con el símbolo ~. Este selector es similar al anterior pero el elemento afectado no necesita estar precediendo de inmediato al elemento de la izquierda siendo afectado más de un elemento:

Esta  regla afecta al segundo, tercero y cuarto elemento <p> de nuestra plantilla de ejemplo. El estilo será aplicado a todos los elementos <p> que son hermanos y se encuentran después del elemento <p> identificado con el valor texto1 en su atributo class.

Para conseguir el símbolo ~, solo tienes que pulsar las teclas AltGr+4.

No importa si otros elementos se encuentran intercalados, los elementos <p> en la tercera y cuarta posición aún serán afectados.

Aplicando CSS a nuestra plantilla

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 adaptados al modelo de caja seleccionado.

Plantilla

Vamos a crear una plantilla HTML para ir probando los cambios de un archivo externo CSS. Abre tu editor de texto favorito con el nombre plantilla.html y copia el siguiente contenido.

El navegador debería mostrarlo algo así:

Con el documento HTML finalizado comenzaremos a trabajar en nuestro archivo de estilos CSS (en este caso usaremos el mismo archivo de los ejemplos miestilo.css).

Selector universal *

Normalmente, la mayoría de los elementos, necesitamos personalizar los márgenes o simplemente mantenerlos al mínimo. Algunos elementos por defecto tienen márgenes que son diferentes 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 cero píxeles. Para evitar el tener que repetir estilos constantemente, podemos utilizar el selector universal.

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 un archivo de texto vacío con nuestro editor de textos preferido, grabarlo con el nombre miestilo.css y luego copiar en su interior la regla que vayan apareciendo a continuación. Comenzamos.

Esta primera regla en nuestro archivo CSS, nos asegura que todo elemento tendrá un margen interno y externo de cero píxeles. A partir de ahora solo necesitaremos modificar los márgenes de los elementos que queremos que sean mayores que cero.

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 píxeles, por ejemplo, la caja tendría un espacio de 5 píxeles de ancho en todo su contorno. Esto significa que la caja estaría separada de sus vecinas por 5 píxeles.

Guardamos y actualizamos nuestro navegador para ver el resultado:

Observamos que se han suprimido los márgenes entre párrafos y títulos.

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. Por defecto los estilos de estos elementos se encuentran siempre muy lejos de lo que queremos y además en HTML5 podemos reconstruir la jerarquía H varias veces en cada sección (como aprendimos anteriormente). 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:

La propiedad font, que hemos asignado a los elementos <h1> y <h2>, 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.

Declarando nuevos elementos HTML

Otra regla básica que debemos declarar al principio es la definición por defecto de elementos que compone la estructura del archivo 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:

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

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.

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 que hemos agregado, todo lo que se encuentra dentro de <body> será centrado en la ventana, centrando de este modo toda la página web.

Creando la caja principal

Continuamos el diseño de nuestra plantilla, especificaremos un tamaño o tamaño máximo para el contenido del cuerpo. Como seguramente recuerda, se añadió un elemento <div> a la plantilla HTML 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 por el que lo agregamos). De este modo, modificando el tamaño de este elemento lo hacemos al mismo tiempo para todos los demás:

La regla hace referencia por primera vez a 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 píxeles. Esta caja tendrá siempre un ancho de 960 píxeles, lo que representa un valor común para un sitio web estos días (los valores se encuentran entre 960 y 980 píxeles de ancho, sin embargo estos parámetros cambian constantemente a través del tiempo, por supuesto).

El segundo estilo es parte de lo que llamamos el Modelo de Caja Tradicional. En la regla que insertamos previamente…,

…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 los 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 y cada valor separado por un espacio.

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 esta regla, margin: 15px auto asigna 15 píxeles 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 píxeles 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 píxeles. 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, incluido la caja principal. El estilo asignado a <body>.

Esta regla será asignada 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 listado 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.

  • Si aún no lo ha hecho, copie cada una de las reglas listadas hasta ahora dentro de un archivo de texto vacío llamado miestilo.css. Este archivo debe estar ubicado en el mismo directorio (carpeta) que el archivo HTML que hemos creado (plantilla.html).
  • Prueba tu creación en tu navegador favorito.

La 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. Esto significa que el elemento ocupará todo el espacio horizontal disponible. En el caso del cuerpo (body), 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 será 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 píxeles, porque su padre es la caja principal la cual fue previamente configurada con este tamaño.

Como <header> ocupa todo el espacio horizontal disponible de la caja principal, será tratado como un elemento block (por eso está 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 que acabamos de mostrar le otorgamos a <header> un fondo amarillo, un borde sólido de 1 píxel y un margen interior de 20 píxeles usando la propiedad padding. El resultado de esta última regla sería:

Barra de navegación

El elemento <nav>, 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 block 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. Para mejorar el aspecto en pantalla agregaremos un fondo gris y un pequeño margen interno para separar las opciones del menú del borde del elemento:

La primera regla…

…cambia el color del fondo y agrega márgenes internos de 5px y 15px con la propiedad padding. Hace referencia al elemento <nav> del listado HTML (plantilla.html) por su atributo id.

La propiedad padding trabaja exactamente como margin. Debemos especificar cuatro valores: 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ínea pero nos permiten tratarlos como elementos block y así declarar un valor de ancho determinado. Este parámetro también ajusta 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.

Section y aside

Los siguientes elementos estructurales en nuestro código son dos cajas ordenadas horizontalmente. 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 sección y columna respectivamente.

La propiedad de CSS float es una de las propiedades más ampliamente utilizadas para aplicar sobre los modelos de cajas. 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 que acabamos de escribir 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 especificado por su valor,…

width asigna un tamaño horizontal y,…

…y margin, 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 píxeles, más 40 píxeles de margen, ocupando un espacio total de 700 píxeles 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 píxeles…,

…agregamos un fondo gris…,

…y configuramos un margen interno de 20 píxeles.

Como resultado final, el ancho de esta caja será de 220 píxeles más 40 píxeles agregados por la propiedad padding (los márgenes de los lados fueron declarados a 0px).

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 píxeles de ancho y un margen de 10 pixeles a cada lado, el área real ocupada por el elemento será de 220 píxeles. 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: tamaño + márgenes + márgenes internos + bordes.

Para finalizar con las cajas, aplicaremos otra propiedad CSS <footer>.

Esta propiedad devuelve al documento su flujo normal y nos permite posicionar <footer> debajo del último elemento en lugar de a su lado veamos la regla:

Esta regla declara a continuación un borde de 2 pixeles en la parte superior de <footer> y centra el texto dentro del elemento.

La propiedad clear restaura el flujo normal del documento. Esta propiedad simplemente restaura las condiciones normales del área ocupada por el elemento, no permitiéndole posicionarse  a una caja flotante adyacente.

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.

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 tras 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.

Últimos retoques

Una última cosa por hacer es trabajar en el diseño del contenido. Para esto, solo necesitamos configurar los pocos elementos HTML5 restantes:

La primera regla hace referencia todos los elementos <article> y les otorga algunos estilos básicos (color de fondo, un borde sólido de 1 píxel, 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.

Para referenciar un elemento <footer> dentro de un elemento <article>, usamos el selector articlefooter que significa “cada <footer> dentro de un <article> será afectado por los siguientes estilos”.

Esta técnica 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  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 un tipo de letra diferente.

  • Completa el listado CSS de esta última regla, el resultado en el navegador sería como la pantalla de arriba.
  • Haz pruebas con todo lo aprendido.

Efectos sombras

Para este ejemplo crearemos dos nuevos archivos que llamaremos novedades.html y css3.css donde veremos paso a paso la creación de sombras en las cajas y en el texto. Estas nuevas propiedades CSS3 son extremadamente poderosas y deben ser estudiadas una por una, pero para facilitar el aprendizaje vamos a aplicar todas ellas sobre la misma plantilla. Por este motivo comenzaremos por el código HTML siguiente en el archivo que hemos creado llamado novedades.html:

Gráfico 1 .- Listado del archivo novedades.html.

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. Después de aplicar los estilos, la caja generada con el código del ejemplo del listado aparecerá como una cabecera, en este caso decidimos usar <header> para este ejemplo.

Debido a que el elemento <font> dejó de usarse en HTML5, los elementos que usaremos  para mostrar texto serán <span> para líneas cortas y <p> para los párrafos. Por esta razón el texto en nuestra plantilla fue insertado usando etiquetas <span>.

  • Use el código Gráfico 1 como la plantilla para este capítulo. Necesitará además crear un nuevo archivo CSS llamado css3.css para almacenar los estilos que estudiaremos de aquí en adelante.

Resultado del listado en nuestro navegador.

Los siguientes estilos básicos los escribiremos en el nuevo archivo creado anteriormente llamado css3.css:

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 “Nuevos estilos con CSS 3”.

Notará sobre esta caja cuando se muestre en pantalla es que sus esquinas son rectas. Esto no agrada mucho, ¿no? La verdad es que a casi nadie le agradan las esquinas rectas. Por lo tanto, lo primero que haremos será cambiar este aspecto.

Border-radius

Durante años los diseñadores han sufrido intentando lograr el efecto de esquinas redondeadas en las cajas de sus páginas web, rellenando cuadros con gráficos de esquinas redondeadas siendo este proceso la mayoría de las veces extenuante acabando en frustración. Esquinas redondeadas eran esa clase de cosas que nos hacían pensar: “lo fácil que sería”. 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:

La propiedad border-radius cuando era experimental había que usar los prefijos –moz- y -webkit- para que funcionen en navegadores basados en motores Gecko y WebKit, como Firefox, Safari y Google Chrome. Hoy en día no es necesario colocar dichos prefijos. Si todas las esquinas tienen la misma curvatura podemos utilizar un solo valor.

Sin embargo, como ocurre con las propiedades margin y padding, podemos también declarar un valor diferente por cada una:

Gráfico 2 .- Declaración de las esquinas con border-radius.

Resultando una caja con los bordes redondeados con diferentes esquinas:

Como puede ver en el Gráfico 2, los cuatro valores asignados a la propiedad border-radius representan diferentes ubicaciones. Recorriendo la caja en dirección de las agujas del reloj, los valores se aplicarán en el siguiente orden: esquina superior izquierda, esquina superior derecha, esquina inferior derecha y esquina inferior izquierda. Los valores son siempre dados en dirección de las agujas del reloj, comenzando por la esquina superior izquierda.

Al igual que con margin o padding, border-radius puede también trabajar solo con dos valores. El primer valor será asignado a la primera y tercera equina (superior izquierda, inferior derecha), y el segundo valor a la segunda y cuarta esquina (superior derecha, inferior izquierda).

También podemos dar forma a las esquinas declarando un segundo grupo de valores separados por una barra. Los valores a la izquierda de la barra representarán el radio horizontal mientras que los valores a la derecha representan el radio vertical. La combinación de estos valores genera una elipse:

  • Copie dentro del archivo CSS llamado css3.css los estilos que quiera probar y abra el archivo HTML generado en el listado del Gráfico 1 en su navegador para comprobar los resultados.

Box-shadow

Ahora que contamos con la posibilidad de generar vistosas esquinas para nuestras cajas podemos arriesgarnos con algo más. Otro muy buen efecto, que había sido complicado de lograr hasta este momento, son las sombras. Durante años se combinaban 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:

La propiedad box-shadow necesita al menos tres valores. El primero, que puede ver, es el color. Este valor fue construido aquí utilizando la función rgb() y números decimales, pero podemos escribirlo también en números hexadecimales.

Los siguientes dos valores, expresados en pixeles, establecen el desplazamiento de la sombra. Este desplazamiento puede ser positivo o negativo. Los valores indican, respectivamente, la distancia horizontal y vertical desde la sombra al elemento. Los valores negativos posicionarán la sombra a la izquierda y arriba del elemento,…

…mientras que valores positivos crearán la sombra a la derecha y debajo del elemento. Los valores 0 o nulos posicionarán la sombra exactamente detrás del elemento, permitiendo la posibilidad de crear un efecto difuminado a todo su alrededor.

  • Prueba con las diferentes sombras cambiando los valores para generar diferentes tamaños de esquinas.
  • Lo mismo, prueba el tamaño de la sombras y su proyección, arriba o abajo.
  • Cambia los colores de las cajas y sombras.

La propiedad box-shadow necesita al menos tres valores. El primero, es el color, este valor fue construido aquí utilizando la función rgb() y números decimales, pero podemos escribirlo también en números hexadecimales.

Los siguientes dos valores, expresados en pixeles, establecen el desplazamiento de la sombra.

Este desplazamiento puede ser positivo o negativo. Los valores indican, respectivamente, la distancia horizontal y vertical desde la sombra al elemento. Valores negativos posicionarán la sombra a la izquierda y arriba del elemento,…

…mientras que valores positivos crearán la sombra a la derecha y debajo del elemento.

Los valores 0 o nulos posicionarán la sombra exactamente detrás del elemento, permitiendo la posibilidad de crear un efecto difuminado a todo su alrededor.

La sombra que obtuvimos hasta el momento es sólida, sin gradientes o transparencias (realmente no es una sombra como suele 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 del difuminado. Con este efecto ahora la sombra lucirá real. Puede intentar utilizar este nuevo parámetro declarando un valor de 10 pixeles en la regla, como en el siguiente ejemplo:

El resultado de la sombra con degradado sería:

Al 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.

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.

El estilo mostrará una sombra interna alejada del borde de la caja por unos 5 pixeles y con un efecto difuminado de 5 pixeles.

Text-Shadow

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 contenido del elemento. Para crear sombras para figuras irregulares como textos, existe una propiedad especial llamada text-shadow:

Los valores para text-shadow son similares a los usados para box-shadow. Podemos declarar el color de la sombra, la distancia horizontal y vertical de la sombra con respecto
al objeto y el radio de difuminado. En este caso se aplicó una sombra azul título de nuestra plantilla con una distancia de 3 pixeles y un radio de difuminado de 5.

@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. El problema con las fuentes o tipos de letra es tan viejo como la web. Los asiduos usuarios de la web a menudo tienen un número limitado de fuentes instaladas en sus ordenadores, casi siempre estas fuentes son diferentes de un usuario a otro, y la mayoría de las veces muchos usuarios tendrán fuentes distintas a las de otros usuarios, en este ejemplo hemos descargado la fuente “Lovely Home.ttf” desde la página web DaFont y en Ubuntu Guía está el tutorial para instalar  paso a paso las nuevas fuentes que se ha descargado.

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.

Una vez que la fuente es cargada, podemos comenzar a usarla en cualquier elemento del documento simplemente escribiendo su nombre. En el estilo font desde la regla …

… recientemente instalada donde 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.

La nueva fuente ha sido instalada se verá reflejada en nuestro navegador.

Gradiente lineal

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

Los gradientes son configurados como fondos, por lo que podemos usar las propiedades background o background-image para declararlos. La sintaxis para los valores declarados en estas propiedades es linear-gradient (posición inicio, color inicial, color final). Los atributos de la función linear-gradient() indica el punto de comienzo y los colores usados para crear el gradiente. El primer valor puede ser especificado en píxeles, porcentaje o usando las palabras clave top, bottom, left y right. El punto de comienzo puede ser reemplazado por un ángulo para declarar una dirección específica del gradiente:

 

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

Gradiente radial

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

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.

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.

HSLA

Del mismo modo que la función gba() 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 una función diferente para generar colores, pero es más intuitiva que rgba(). Algunos diseñadores generan fácilmente un set de colores personalizado utilizando hsla(). La sintaxis de esta función es: hsla(tono, saturación, luminosidad, opacidad).

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 de saturación se representa en porcentaje, desde 0% (escala de grises) a 100% (colores completos o completamente 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.

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.

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.

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 limitaciones y dejar en manos del diseñador la calidad y variedad de bordes disponibles ofreciendo la alternativa de utilizar imágenes propias.

Vamos a utilizar la imagen de la izquierda para probar esta propiedad. Haz click derecho en la imagen con el ratón y elije la opción “Guardar imagen como…” y guárdala con el nombre narrador.png  en el mismo directorio (carpeta) donde se encuentra su archivo CSS:

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.

También modificaremos el listado HTML “novedades.html” para probar estos efectos con la imagen:

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.

En el ejemplo partimos de los estilos básicos utilizados para la cabecera generada  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 ponemos solo un valor este valor se aplicara a ambos parámetros. Pueden declararse los números enteros y decimales para escalar la imagen. El sistema calcula el escalado por medio de una matriz. Los valores entre 0 y 1 reducirán el elemento, un valor de 1 mantendrá las proporciones originales…

…los valores mayores de 1 aumentarán las dimensiones del elemento de manera incremental.

La imagen aparecería con el doble de su tamaño; con el valor 3 con el triple…, y así sucesivamente:

Podemos lograr un buen efecto poniendo valores negativos a esta función:

Otro ejemplo con la mitad menos de tamaño:

En el siguiente ejemplo, declaramos dos parámetros que cambiara la escala de la caja principal.

El primer valor, 1, mantiene la proporción original de la dimensión horizontal en 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.

Transform: rotate

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

Si el valor declarado es negativo, cambiará la dirección del elemento que será girado.

Transform: skew

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

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). Según las instrucciones de arriba, realizamos una operación transform a la caja de la cabecera para inclinarla. Al declarar sólo un parámetro, la dimensión horizontal de la caja se modificara.

Si usamos los dos parámetros, alteramos ambas dimensiones del objeto. Como alternativa podemos utilizar funciones diferentes para cada una de ellas: skewX y skewY.

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.

La función translate considera la pantalla como una gradilla 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 hacia la izquierda o hacia arriba de la posición original, y valores positivos lo harán hacia la derecha o hacia abajo.

En este ejemplo, la caja de la cabecera se ha desplazado 100 píxeles hacia la derecha desde su posición original. Podemos declarar dos valores en esta función si queremos mover el elemento horizontal y verticalmente, o podemos usar funciones independientes llamadas translateX y translateY.

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:

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 utilizarán para operar.

Transformaciones dinámicas

Con lo que llevamos aprendido hasta el momento cambiaremos 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:

En este listado hemos creado una nueva regla para aplicar los efectos de transformación usando la 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 a su posición original. Este efecto produce una animación básica pero útil solamente con las propiedades CSS.

Transiciones

Hemos obtenido, hermosos efectos usando transformaciones dinámicas que son bastante accesibles y fácil de implementar. Sin embargo, una animación real requiere de un proceso con más de dos pasos. La propiedad transition fue incluida para suavizar los cambios, creando mágicamente 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 de un estado a otro.

Como puede ver en el listado, 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. Un segundo en este caso.

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.

 

Anuncios