En nuestra cabeza puede parecer muy sencillo darle un formato vertical al texto, y lo es, solo que generalmente no es con la primera idea que se nos viene a la mente. Muchos pensamos que utilizar el salto de línea o hacer una imagen con texto representa una solución, pero es todo lo contrario, esta clase de contenido solo entorpecerá nuestro sitio y hará que perdamos estilo.

Para evitarnos darle muchas vueltas al asunto, en este artículo presentamos una serie de métodos para lograr estructurar verticalmente un texto.

Saltos de línea con HTML: br

Sí, lo sé, hace apenas unas líneas atrás acabo de mencionar que los saltos de línea son junto con las imágenes la peor opción que podemos elegir, aún así siguen siendo una alternativa, la cual tenemos que evitar, pero una alternativa al fin.

A este método se le podría asignar el título de “clásico” para realizar esta tarea, más de uno hemos recurrido a la famosa etiqueta ”
“ para colocarla después de cada letra de nuestra palabra y así tener un texto vertical.

<h1>
    W<br />E <br />B <br />E <br />R <br />A
</h1>

Si bien logra su objetivo. por favor no lo uses, es un método que representa flojera y al mismo tiempo falta de estilo, tenemos que pensar más allá de un simple salto de línea y para ello vienen los siguientes métodos

Uso de elementos span de HTML

Una alternativa no muy correcta pero efectiva, con excepción de los casos donde usamos contenido dinámico, es utilizar elementos de tipo “span” para envolver cada letra de la palabra y después darle un formato mediante una sentencia CSS que muestre cada elemento del encabezado en forma de bloque. Es decir, a una estructura HTML como esta:

<h1>
    <span> W </span>
    <span> E </span>
    <span> B </span>
    <span> E </span>
    <span> R </span>
    <span> A </span>
</h1>

Le aplicamos el siguiente estilo:

h1 span { display: block; }

Y listo, tenemos un texto vertical, con un código muy poco estético y con el riesgo de que falle con contenido dinámico, pero una alternativa al fin.

Uso de JavaScript para crear texto vertical

El fiel aliado JavaScript sale al rescate una vez más, esta vez para trabajar en combinación con CSS y darnos una alternativa un poco menos inestable y sin duda con mejor código de marcado.

Para evitar agregar cada etiqueta “span” manualmente a las letras, podemos utilizar una función de JavaScript, de esta manera evitamos los problemas que mencionamos en la alternativa anterior y ahorramos unas cuantas líneas de código.

Su uso es bastante similar al ejemplo anterior, utilizamos el mismo estilo pero el código HTML cambiará a este:

<h1> WEBERA </h1>
<script>
    var encabezado = document.getElementsByTagName('h1')[0];
    encabezado.innerHTML = '<span>' + encabezado.innerHTML.split('').join('</span><span>') + '</span>';
</script>

Como se puede ver el encabezado es la palabra completa sin nada entre las letras, después mandamos llamar un código de script que se encargará de envolver en una variable el elemento “h1″ para después cambiarle su contenido por cada letra que compone la palabra precedida y seguida por una etiqueta “span”.

Uso de un ancho fijo para crear texto vertical

Otra opción a utilizar, es aplicar una propiedad “width” fija al elemento que actúa como contenedor de nuestra palabra, en este caso el encabezado de tipo “h1″. Para ello recurriremos únicamente a utilizar CSS y lo haremos de la siguiente manera:

h1 {
   width: 50px;
   font-size: 50px;
   word-wrap: break-word;
}

Como se puede ver, con este código asignamos un ancho muy pequeño que es exactamente igual al tamaño de la letra, para finalmente utilizar la propiedad “word-wrap” con valor de “break-word” y con esto forzar a que cada letra permanezca en su propia línea.

Sin embargo este método tiene un par de desventajas, la propiedad “word-wrap” es parte de la versión 3 de CSS por lo que no es totalmente reconocida por todos los navegadores, además si utilizamos minúsculas puede que no surja efecto. Como opción para solucionar este último problema se puede utilizar la propiedad “letter-spacing” y así de esa manera asegurarnos de que no se pondrán más de 2 letras por renglón.

Uso de ems para crear texto vertical

Un “em” es una medida de tipografía, alternativa a los píxeles, y se utiliza para proporcionar la distancia y espacio que tendrá una letra en base al punto donde se encuentra, en pocas palabras utilizar un “em” es como utilizar la propiedad “x-height” pero con más flexibilidad.

Basta con darle un ancho de “1em” al encabezado y colocar las letras separadas por un espacio para obtener resultados.

h1 {
   width: 1em;
   font-size: 50px;
   letter-spacing: 50px; /* solo por precaución */
}

<h1> W e b e r a </h1>

Uso de la propiedad “white-space” de CSS

Si utilizamos la propiedad “white-space” con un valor de “pre”, entonces CSS interpretará cada espacio de nuestro texto literalmente, por lo que si agregamos los espacios suficientes en el código, el texto lucirá de igual manera en la página.

h1 { white-space: pre; }

<h1>
   W
   E
   B
   E
   R
   A
</h1>

El reciente enfoque que se ha dado a esta temática quizás se ha producido por la flexibilidad de estos elementos y la capacidad de creación que nos ofrecen.

Si bien el uso de pseudo elementos, no es algo recien inventado, su potencial no había sido totalmente exprimido hasta hace poco, y esta experimentación con ellos ha hecho que su exposición sea mayor en estos días.

A lo largo de este artículo trataremos de dar a conocer y enseñar los aspectos generales sobre como utilizar dichos pseudo elementos, para que con esta información y conocimiento tengan una mejor idea de como se lograron todas esas cosas geniales que se muestran en los tutoriales.

Función de un pseudo elemento CSS

Primero que nada tenemos que aclarar que “:before” y “:after” no son los únicos pseudo elementos que existen, la lista completa abarca a “:first-letter”, “:first-line”, “:before”, “:after” y “::selection”, pero como en esta ocasión nos estamos enfocado únicamente a los dos ya mencionados, cada vez que nos refiramos con el termino “pseudo elemento” nos enfocaremos a “:after” y “:before”.

La función de un pseudo elemento es sencilla, básicamente es hacer lo que su nombre indica, crear un elemento falso para insertarlo antes o después del contenido del elemento al que se ha orientado.

La creación de estos elementos no cambia nada en el documento, sólo se incluyen para obtener cambios que sean visibles para el usuario. Dichos elementos nuevos son capaces de recibir un estilo CSS por lo que fueron aprovechados para hacer trazos sobre los elementos del sitio.

Codificación de los pseudo elementos CSS

La codificación de los pseudo elementos es bastante sencilla de realizar, basta con recordar dos sencillos aspectos para crearlos de manera correcta.

Primero debemos crear un selector que indique a que elemento le vamos a crear pseudo elementos, es decir tenemos que definir en que parte del documento se añadirán los elementos falsos que utilizaremos. Por ejemplo si quisieramos crear un pseudo elemento que se encuentre antes de un div identificado como “icono” entonces la sintaxis de mi selector quedaría así “#icono:before”.

Si omitimos darle un elemento antes de llamar a “:after” o “:before”, la sentencia funcionará pero no nos servirá de mucho, al menos de que desees que se inserte algún tipo de contenido antes o después de cada elemento que compone el DOM de tu sitio.

El segundo aspecto a considerar es la propiedad “content”, toda declaración de pseudo elemento debe tener dicha propiedad CSS si quiere que su creación surja efecto, ya que sin ella no podremos insertar nada en los pseudo elementos que se crearon. En pocas palabras “content”, como su nombre lo indica, es la encargada de portar el nuevo contenido.

Se puede presentar el caso en que no se necesite contenido, en estas ocasiones puedes utilizar la propiedad “content” vacía, pero por ningún motivo la debes de quitar. Este caso se puede presentar cuando utilizamos cajas vacías a las que únicamente agregamos estilos.

Una vez analizados estos dos aspectos, podemos definir que nuestra sintaxis básica quedará de esta manera:

#icono:before {
   content: "Hola";
}

#icono:after {
   content: "Mundo";
}

Con este código insertaremos un “Hola” antes del div “icono” y un “Mundo” después.

Contenido insertido

El contenido que se inserta mediante pseudo elementos únicamente será visible en el código CSS y por defecto este se inserta con un estilo “inline”, es por ello que si queremos mostrar el contenido de manera correcta muchas veces tenemos que recurrir a propiedades CSS.

El uso de la propiedad “display” con un valor de “block” es muy común al momento de manejar pseudo elementos, esta propiedad nos permite mostrar al elemento con un bloque y darle una altura y anchura personalizada.

Colocación del contenido

Quizás si tomamos un concepto muy literal de lo que significa cada pseudo elemento, nuestra mente imagine que el contenido agregado se colocará arriba y abajo del elemento definido por el selector, esto es común de pensar pues nosotros examinamos a una página web como algo plano bidimensional donde el antes significa arriba y el después significa abajo.

Pero en esta ocasión, con el manejo de pseudo elementos, tenemos que imaginar a estas nuevas partes como hijos del elemento que se indico en el selector. Hijos cuyo contenido será insertado antes o después del contenido propio del elemento padre.

Tipos de Contenido

Como ya se pudo apreciar en el ejemplo que se dio anteriormente el contenido puede ser de tipo texto, pero qué hay de otros tipos, qué tenemos que hacer para insertar por ejemplo una imagen, es básicamente lo mismo sólo con pequeñas diferencias.

Si queremos plasmar una imagen en un pseudo elemento creado antes de un párrafo haríamos algo como esto:

p:before {
 content: url(imagen.jpg);
}

Como se puede apreciar únicamente cambiamos el valor de la propiedad content por una URL de imagen y removimos las comillas para que no se piense que es una cadena de texto.

Soporte en navegadores

Como punto final para este artículo quiero mencionar que los pseudo elementos son soportados en la actualidad por casi todos los navegadores, Chrome a partir de sus versión 2, Firefox a partir de su versión 3, Safari desde la 1.3, Opera 9.2 en adelante e Internet Explorer desde su versión 8 aunque con algunos bugs.

Uno de estos temas considerados por varios como elementales al momento de empezar a diseñar mediante CSS, es la elaboración y estilización de elementos de un formulario, como lo es el caso de los botones los cuales siempre hacen resaltar o en otros casos deslucir el ambiente de una página.

¿Cómo se hacían botones antes de CSS3?

En el pasado era de lo más común tener que recurrir a programas de edición de imágenes para poder lograr un buen efecto en nuestros botones. El sombreado, las fuentes estilizadas y el aspecto tridimensional tenía que ser aplicado mediante las herramientas que nos proporcionaba Photoshop, Corel Draw o algún otro programa de diseño que teníamos a la mano, y una vez concluida la imagen debíamos complementar con trabajo en HTML y CSS.

Para el caso de CSS se tenía que hacer uso de pseudo selectores, particularmente para captar los eventos de colocación del mouse y activación del botón lo que permitía cambiar la imagen de fondo o modificar su posición, para así dar un efecto de “aplastado” al botón.

Al principio puede parecer fácil crear tres o cuatro imágenes distintas para un sólo botón pero cuando cuentas con varios elementos del mismo tipo que tienen distintos estilos, la cosa se complica, por lo que se empezó a optar por tener una sola imagen para cada botón y en esa misma imagen tener representado cada uno de los eventos.

El tener una sola imagen de fondo representaba un menor tiempo de descarga de la página y agilizaba el desempeño del sitio, es por ello que era muy común encontrar en nuestras hojas de estilos sentencias como:

a.btnAzul{
background: url("botonazul.png");
}
a.btnAzul:hover, a.btnAzul:focus{
background-position: 0 -124px;
}

a.btnAzul:active{
background-position: 0 -248px;
}

Las cuales mediante la propiedad “background-position” y con valores negativos se encargaban de mover la imagen que se mostraba como fondo de nuestro botón.

Si bien esto vino a simplificar y reducir el tiempo de carga de la página, aún así teníamos que crear de una a tres imágenes por cada botón o por cada estilo con el que contaba la página, esto representaba tiempo y la necesidad de tener conocimiento en algún programa de diseño para poder utilizarlo.

Pero todo esto quedo en el olvido al momento de que CSS3 implementó todos los efectos necesarios para llevar a cabo esta clase de ediciones, y ahora el diseño de botones CSS3 se puede hacer directamente en nuestro código.

Diseño de botones con CSS3

El uso de gradientes, sombras, bordes redondeados y transiciones de manera combinada mediante CSS nos permite crear botones con estilos a granel. La poca dependencia de esta manera de desarrollo hace que el diseñador se sienta más libre y pueda experimentar con distintos colores en el mismo código fuente de la página.

En este artículo realizaremos un ejemplo de botón basado en los típicos estilos que vamos a encontrar en casi cualquier sitio web. Utilizaremos un div contenedor con un elemento de tipo link que funcionará como “tablet”, a dicho elemento le aplicaremos bordes, gradientes y sombreado para dar un aspecto tridimensional.

El texto del botón también será editado mediante CSS y lucirá con sombras para dar un efecto de profundidad.

Estructura HTML del boton

Nuestra estructura HTML tal y como fue descrita anteriormente, quedaría de la siguiente manera:

<div id="contenedor">
    <a href="#" class="btnAzul">Da Click</a>
</div>

Como se puede apreciar es una estructura bastante simple y lo fundamental de ella es elemento de anclaje, el cual recibe una clase a la que hemos llamado “btnAzul” y será la encargada de recibir todos los efectos mediante CSS.

Estilos CSS3 para el botón

Nuestro código CSS comenzará con algunos estilos básicos de configuración lo que nos permitirá apreciar mejor el elemento.

a.btnAzul {
    display: block;
    width: 250px;
    height: 60px;
    padding: 25px 0 0 0;
    margin: 0 auto;
}

Un elemento de anclaje es por defecto de tipo “inline” ya que son utilizados para mostrar y representar links, en nuestro caso queremos un “tablet” por lo que se vuelve necesario cambiar el tipo de display a tipo bloque y para ello declaramos la sentencia “display: block”. Esto permitirá que especifiquemos un ancho y una altura para el elemento, para finalmente agregar un “padding” en la parte superior para separar el texto del borde y el margen “auto” se encargará de centrar dicho texto.

Después de establecer el elemento base, pasamos a darle formato y edición.

a.btnAzul {
    display: block;
    width: 250px;
    height: 60px;
    padding: 25px 0 0 0;
    margin: 0 auto;

    background: #4682B4;
    background: -moz-linear-gradient(top, #87CEEB 0%, #4682B4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87CEEB), color-stop(100%,#4682B4));

    box-shadow: inset 0px 0px 6px #fff;
    -webkit-box-shadow: inset 0px 0px 6px #fff;
    border: 1px solid #62C2F9;
    border-radius: 10px;
}

La propiedad “box-shadow” nos servirá para darle un efecto de resplandor interno, muy parecido al que se puede dar con Photoshop. Al agregar la propiedad “inset” hace que la sombra se coloque al interior del elemento, contrario al comportamiento natural de la propiedad que agrega el efecto en el exterior.

En esta ocasión no vamos a utilizar los parámetros de “offset” en ninguno de los ejes de la sombra, pero si utilizaremos la propiedad “blur” para agregar un tipo de borrando y suavizar el efecto de flujo. A esto adicionamos un borde simple de 1 píxel de ancho y las esquinas se redondean mediante la propiedad border-radius.

Después de tener establecido el estilo para el fondo de nuestro botón, pasamos a establecer el estilo del texto.

a.btnAzul {
    display: block;
    width: 250px;
    height: 60px;
    padding: 25px 0 0 0;
    margin: 0 auto;

    background: #4682B4;
    background: -moz-linear-gradient(top, #87CEEB 0%, #4682B4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87CEEB), color-stop(100%,#4682B4));

    box-shadow: inset 0px 0px 6px #fff;
    -webkit-box-shadow: inset 0px 0px 6px #fff;
    border: 1px solid #62C2F9;
    border-radius: 10px;

    font: bold 25px Helvetica, Sans-Serif;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: #3090C7;
    text-shadow: 0px 1px 2px #62C2F9;
}

Establecemos el tipo de fuente, su tamaño, lo alineamos al centro del elemento, transformamos todas las letras a mayúsculas para darle uniformidad, quitamos todo tipo de decoración, definimos su color y finalmente establecemos un sombreado para darle un efecto de inserción. Lo que hacemos con la propiedad “text-shadow” es básicamente darle 1 píxel de offset en el eje Y y crear un blur de 2 píxeles.

El resultado final:

Y aquí el ejemplo funcionando: Botones con CSS3

Con esto se logra obtener un botón de diseño sencillo pero que atrae, a partir de aquí podemos utilizar pseudo selectores si queremos y hacer uso de estos mismos efectos para diseñar el botón cuando el mouse se posicione sobre él o le de click.

Su inestabilidad y falta de estándares han hecho que de él no se tengan buenos conceptos, y razones no faltan para hablar mal. Desde hechos tan sencillos como el despliegue incorrecto de una imagen hasta casos extremos donde el estilo completo de una página se ve afectado, transparencias, capas flotantes, efectos de sombreado, estilizaciones, todo esto puede verse alterado en alguna de sus versiones.

Si bien es cierto que este en su última versión ha presentado grandes mejoras y el soporte a nuevas tecnologías se ha puesto como prioridad, el uso de sus versiones anteriores y la poca estandarización de estas producen dolores de cabeza a por mayor, pues tenemos que afrontar la verdad y darnos cuenta de que aún existen millones de personas utilizando alguna versión vieja de este navegador por lo que tenemos que seguir brindado soporte.

Algunas de estas versiones, como es el caso de Internet Explorer 6, han sido oficialmente declaradas como muertas, pero en países como China este explorador sigue siendo el más utilizado y el simple hecho de dar formato a un disco duro e instalar de nueva cuenta el sistema operativo Windows XP hace que Internet Explorer 6 tome la riendas de la navegación web de nuevo, por lo que no lo podemos pasar por alto.

Que la innovación es importante lo sabemos, que la estandarización y las nuevas tecnologías es lo que se debe practicar sin duda, pero hay que recordar que no vivimos en un mundo de desarrolladores, allá afuera existen personas que saben poco o nada de estándares o de navegadores actualizados, ellos solo quieren entrar a Internet buscar algún producto o información y obtenerlo.

Esta clase de personas también serán nuestros clientes o los clientes potenciales de los sitios para los que trabajamos, no podemos llegar con la persona que nos contrató y decirle algo como “El sitio quedó muy bien, pero sólo se verá bien en Firefox y Google Chrome, en IE fallará pero no importa el 40% de los visitantes la verán bien”.

Por esta razón principalmente tenemos que buscar “hacks” y manera de adaptar nuestro sitio para que Internet Explorer pueda por lo menos simular lo que queremos lograr. En esta ocasión tratamos el tema de como detectar el uso de alguno de estos navegadores mediante caracteres en nuestro código CSS, son 3 simples expresiones que nos ayudan a determinar que un estilo para cada versión del navegador ya sea Internet Explorer 8 o inferior.

Antes de empezar con el desarrollo debemos aclarar que esta no es la mejor práctica y se debe utilizar sólo en casos donde sabemos que existirán pocos cambios en el estilo, la mayor parte del tiempo debemos utilizar el condicionamiento en comentarios como este:

<!--[if IE 6]>
Instrucciones especiales para IE 6 aquí
<![endif]-->

Si deseamos un comportamiento especial en cada versión, pero estos caracteres se pueden tomar como un atajo o algo sencillo a realizar cuando no exista mucha diferencia de un estilo a otro, y al final del día es un conocimiento extra que nos puede ayudar en el futuro.

IE8 y anteriores

La clave para rastrear Internet Explorer 8 y versiones anteriores esta conformada por dos caracteres, una diagonal invertida y el número nueve al final de la sentencia de estilo. Por ejemplo:

    body {
     color : blue; /* Todos los navegadores */
     color : red\9; /* IE8 y anteriores */
    }

Desafortunadamente este hack únicamente puede ser utilizado para rastrear la versión 8 y anteriores, no podemos implementar algo como “\IE” para saber si el navegador es Internet Explorer en general.

IE 7 y anteriores

Para identificar al navegador IE 7 o alguna versión anterior utilizamos el caracter asterisco “*”. En este caso el caracter lo usaremos al principio de la sentencia y no al final como en el ejemplo anterior, es entonces que el código nos quedaría de la siguiente manera:

body {
     color : blue; /* Todos los navegadores */
     color : red\9; /* IE8 */
     *color: green; /* IE7 y anteriores */
    }

IE6

Por su parte Internet Explorer 6 es representado por un guión bajo “_”, o underscore, el cual también se coloca al inicio de la declaración de estilo y en este caso únicamente servirá para rastrear la versión 6.

body {
     color : blue; /* Todos los navegadores */
     color : red\9; /* IE8 */
     *color: green; /* IE7 */
     _color: purple: /* IE6 */
    }

Conclusión

De esta manera podemos incluso personalizar el sitio en base a la versión del cliente, mostrar alguna capa o ocultar algunas otras, incluso desplegarle algún mensaje que le recomiende bajar otro navegador. Como ya explique el uso de estos caracteres selectores debe hacerse con cuidado y no exagerar en su implementación, puesto que no sabemos si en un futuro estos hacks seguirán siendo utilizados o representarán lo mismo.

Con la variedad de dispositivos que actualmente existen en el mercado,  la web móvil, etc. el manejo adecuado del tamaño de pantalla y la manera en que se despliega el sitio es un factor determinante para que el usuario frecuente y utilice un sitio, ya que si este no puede ser observado correctamente su potencial se ve reducido.

Para lograr este soporte, en el pasado, era común recurrir a efectos y trucos que nos ofrecía JavaScript, para que de esa manera el sitio se ajustará a la medida de la ventana donde el usuario había abierto el sitio, o pero aún se modificaba arbitrariamente el ancho del navegador donde se desplegaba el sitio, actuando en contra de lo que el usuario realmente deseaba.

Afortunadamente en la actualidad este proceso se ha simplificado en gran manera, a tal grado que con un par de líneas podemos dar soporte a los tamaños de pantalla más utilizados por los usuarios, ya sea el tamaño de un monitor de escritorio, una tablet o un smartphone. Todo esto se ha conseguido gracias al uso de CSS y sus nuevas estandarizaciones, entre las cuales nos encontramos a los “media queries” quienes serán los que nos ayuden a llevar a cabo esta tarea.

Soporte de CSS media queries en navegadores

Antes de empezar con el desarrollo, debemos establecer que los métodos que vamos a explicar en este artículo sólo tendrán efecto en ciertos navegadores, si tu deseas dar soporte a todos los navegadores que aún están en uso por parte de los usuarios, entonces puedes tomar algún otro tutorial o conseguir un truco por Internet que te permita conseguir el mismo efecto mediante “hacks”, sólo recuerda que no hay que maritizarse mucho con esto pues es muy poco probable que un smartphone o una tablet venga con Internet Explorer 7 como navegador, puesto que son instrumentos relativamente recientes.

Los navegadores que soportan los Media Queries de CSS son Firefox en su versión 3.5 y posteriores, Google Chrome en todas sus versiones, Safari en su versión 3 y posteriores, Opera en la versión 9.5 y posteriores y finalmente Internet Explorer que los incorporó a partir de su versión 9.

Ahora que ya sabemos los navegadores donde se pueden utilizar hay que identificar en que partes del código podemos colocar los media queries.

Donde colocar los media queries

El método más común a utilizar es incluir nuestros media queries dentro de la hoja de estilo principal. Para llamarlos basta con incluir la etiqueta “@media” en nuestra sentencia.

Veamos la estructura:

@media screen and (min-width : 1024px){
      /* Aquí iría el estilo para este tamaño de pantalla */
}

Como se puede observar en la sentencia utilizamos la palabra “screen” después de la etiqueta “@media”, esto sirve para indicar el formato al cual aplicaremos el estilo, este puede tener distintos valores como all, screen o print, en nuestro caso nos enfocaremos únicamente a “screen” ya que nos estamos refiriendo al tamaño de pantalla.

Después de establecer el formato damos la siguiente parte “min-width: 1024px”, con esto especificamos cual será el tamaño mínimo que deba tener la pantalla para que el estilo pueda ser aplicado, en este caso yo le di el valor de 1024 píxeles ya que es un estándar de tamaño de monitor para las computadoras de escritorio.

Si definimos una hoja de estilo como la siguiente:

<style>
#contenedor{
background: crimson;
width:200px;
height: 200px;
}

@media screen and (min-width : 1024px){
    #contenedor{
      background: blue;
    }
}
</style>

Al momento de abrir nuestra página veremos un bloque contenedor de fondo carmesí, pero al momento en que disminuyamos el tamaño el browser a una cantidad menor de 1024 píxeles de ancho el contenedor cambiará de color y ahora será azul.

Podemos lograr el mismo efecto llevando a cabo otras manera de llamado, como por ejemplo la importación de hojas de estilo específicas para cada tamaño.

Importando desde la hoja de estilo

Mediante la etiqueta “@import” podemos mandar llamar a un archivo CSS externo que contenga todas las características deseadas para un tamaño de pantalla específico. Supongamos que tenemos un css definido para los monitores de de computadoras de escritorio pequeñas, cuya anchura es de 600 px en adelante, si quisiéramos llamar a esa hoja de estilo bastaría con realizar la siguiente sentencia:

<style>
@import url( escritorioPequeno.css ) screen and ( min-width: 600px );
</style>

Hay que tener en cuenta que también podemos agregar reglas mediante la aplicación de una coma, al igual que se hace al utilizar varios selectores.

Enlace a una hoja de estilo

Si no queremos importar en la hoja de estilo podemos incluir la hoja directamente en el código HTML para eso hacemos el llamado mediante la etiqueta “link” estableciendo el atributo “media” para especificar el formato y la anchura.

<link rel="stylesheet" media="screen and (min-width: 600px)" href="escritorioPequeno.css" />

Rastreando un dispositivo específico

Finalmente si lo que deseas es rastrear por dispositivo puedes usar la propiedad “max-device-width“. Esto te permite llamar hojas de estilo que hayan sido hechas con la única finalidad de que la página se despliegue bien en otra clase de dispositivo.

Por ejemplo, si quisieramos mandar llamar una hoja de estilo para desplegar correctamente la página en un iPhone haríamos una llamada como la siguiente:

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="dispositivoMovil.css" />

Con el paso de los años la aplicación de las tablas en sitios se fue limitando de tal manera que en la actualidad la mayoría de los sitios únicamente las utilizan para mostrar datos tabulares, lo que fue y siempre será su único motivo de existencia. Gracias a esta adecuación, dichas estructuras han caído en desuso para dar formato a contenido, por lo que varios métodos para alinear y mostrar información han tenido que surgir para cumplir con esta función.

La respuesta inmediata a esta clase de problemas la podemos encontrar en el lenguaje de estilo CSS. Si bien CSS3 nos ha sorprendido con el uso de columnas múltiples en nuestros documentos, en esta ocasión nos centraremos en el uso de capas con propiedades flotantes para poder explicar nuestro ejemplo de “Overflow”.

Como es de saberse el uso de capas mediante elementos “div” se ha convertido en la forma más común y adecuada de mostrar información en nuestro sitio. A cada una de estas capas se le puede dar valores que permitan editar su tamaño, posición y estilo, por ejemplo si quisiéramos colocar dos capas con bloques de contenido en un mismo nivel de manera paralela verticalmente utilizaríamos la propiedades “float” para mandar una al lado izquierdo y otra al lado derecho.

Las capas flotantes con CSS

El problema que vamos a abarcar en el estudio de este artículo se produce precisamente al manejar dichas propiedades de flotación. Hay que aclarar que no por ello debemos discriminar a la propiedad “float”, pues es una de las maneras más adecuadas para colocar “divs” a lo largo y ancho de la página y su implementación vino a revolucionar lo que anteriormente era la maquetación y estructuración de un sitio.

Básicamente lo que ocurre al crear capas en un sitio es que un elemento “div” siempre se colocaba debajo del anterior elemento del mismo tipo, lo que hace que la información se muestre en una sola columna aunque modifiquemos el tamaño y estilo de la capa. Esto se puede evitar gracias a la propiedad “float” la cual crea el efecto necesario para que las capas estén “flotando” en la página y podamos moverlas y colocarlas a disposición.

La estructura

Por ejemplo, si suponemos que se desea tener una estructura de sitio con tres capas de presentación, una de ellas que sirva para contener toda la información y las otras dos para representar las columnas, se debe optar por manejar tres elementos de tipo div los cuales después serán adecuados mediante CSS.

<div id="contenedor">
    <div id="columnaIzq">
        <p>Soy la columna izquierda de esta página y muestro contenido</p>
    </div>
    <div id="columnaDer">
        <p>Soy la columna derecha de esta página y también muestro contenido</p>
    </div>
</div>

Como es de suponerse queremos que una de las columnas se muestre al lado izquierdo del contenedor y la otra al lado derecho, para ello debemos usar la propiedad flotadora ya mencionada y el código quedaría de la siguiente manera:

#contenedor{
    background-color: SteelBlue;
    padding:5px;
}
#columnaIzq{
    width:300px;
    float:left;
}
#columnaDer{
    width:300px;
    float:right;
}

El único problema de esta estructura es que el “div” contenedor no tiene idea de que las otras dos capas existen, puesto que las dos están flotando por encima de él, por lo que actua como un contenedor vacío y simplemente no se muestra. Si pegamos el código que acabamos de realizar en nuestra página web podremos ver que apenas se alcanza a distinguir una línea con el color “SteelBlue” de fondo, ese es nuestro “div” contenedor, por su parte las columnas se muestran pero no de la manera en que queremos.

La solución momentánea

Muchos de nosotros improvisamos y a la carrera sacamos proyectos por cuestiones de tiempo o desesperación, existen soluciones poco prácticas o incluso momentáneas que nos pueden ayudar. El uso de algún elemento al final del “div” contenedor puede ayudar a que la capa se extienda y abarque los dos elementos de columnas.

Por ejemplo podemos añadir una cierta cantidad de espacios en blanco mediante el código “ ” al final del div o de saltos de línea mediante la etiqueta ”
” hasta que el contenedor abarque lo suficiente como para obtener el resultado que queremos. O incluso vernos un poco más sofisticados y utilizar esta misma etiqueta de salto de línea pero con un atributo “clear” cuyo valor sea “all”, lo que forzará al contenedor a extenderse para mostrar el contenido, por lo que si cambiamos el código HTML a este:

<div id="contenedor">
    <div id="columnaIzq">
        <p>Soy la columna izquierda de esta página y muestro contenido</p>
    </div>
    <div id="columnaDer">
        <p>Soy la columna derecha de esta página y también muestro contenido</p>
    </div>
<br clear="all" />
</div>

El resultado puede parecer el indicado, pero quizás no sea la forma más adecuada de obtenerlo.

Overflow de CSS y capas flotantes

Si bien con el salto de línea se pudo desplegar correctamente nuestro “div” contenedor, estamos utilizando una etiqueta de contenido que no tiene más propósito que mostrar bien la estructura, por ello es mejor pensar en una solución que venga desde el diseño y no desde el contenido.

Para esta situación es cuando podemos utilizar la propiedad “overflow” que nos ofrece CSS. La principal función de dicha propiedad es permitirnos modelar las capas de tal manera que el navegador sepa cómo mostrar el contenido cuando este no puede ser colocado de manera completa, pero en esta ocasión toma una función complementaría y permite que los elementos flotantes sean reconocidos por el elemento contenedor.

Para esta función se puede utilizar cualquier valor de los permitidos para la propiedad “Overflow”, ya sea “hidden”, “scroll” o “auto”, todas funcionan, pero por cuestiones de estética optaremos en esta ocasión por el valor “hidden” que simplemente no muestra nada. Habiendo dicho esto, modificamos el código de nuestro CSS y las propiedades del div contenedor quedan de la siguiente manera:

#contenedor{
    background-color: SteelBlue;
    padding:5px;
    overflow: hidden;
}

En cuanto al código HTML, ya no será necesario usar el salto de línea por lo que podemos volver al código original mostrado en el primer ejemplo.

Finalmente debemos aclarar que este truco funciona en todos los navegadores que soportan CSS aunque en algunos casos debemos utilizar un “width” o un “height” específico.

En la actualidad ya no es requerido el llevar un tutorial completo sobre edición de imágenes para poder aplicar esta clase de efectos, ya que CSS nos permite utilizarlos aún sin tener conocimientos previos de diseño, facilitando las cosas a los programadores que nos hemos enfocado más en el funcionamiento de los sitios y que ahora podemos tener un mejor trato del entorno visual.

Box-shadow de CSS3

Box-shadow es una propiedad CSS3 que permite a los diseñadores y desarrolladores implementar fácilmente sombras sobre cualquier elemento de tipo capa. Con esta propiedad podemos especificar las propiedades de la sombra que queremos desplegar proporcionando valores de tamaño, color, offset, y el desenfoque deseado.

Al agregar una sombra creamos un efecto de dimensión y cambia la perspectiva de la imagen, al realizar esto con CSS nos ahorramos el hecho de tener una imagen con cada efecto ya aplicado, simplemente basta con tener la imagen base a la cual podemos añadirle y quitarle efectos mediante propiedades como la ya mencionada.

En este artículo nos enfocaremos a dar un efecto de sombra base para después crear una sombra que de dimensión para darle vida a nuestra imagen plana.

Aplicando la propiedad CSS3 box-shadow

La imagen

Lo primero que necesitamos para llevar a cabo esta práctica es una imagen plana que no tenga ningún tipo de borde ni efecto añadido, de tal manera que podamos aplicar nuestros propios bordes con CSS sin que haya conflicto con la imagen base.

Dicha imagen será colocada dentro de un elemento div, al cual posteriormente le vamos a aplicar los estilos CSS necesarios para lograr el efecto.

<div id="contenedorImg">
    <img src="imagenPlana.png" />
</div>

Añadiendo el borde

Después de definir la imagen pasamos a añadir la clase base “box-shadow”, la cual nos proporcionará un tipo de borde difuminado alrededor de la imagen que produce el efecto tridimensional que buscamos. Como buena propiedad CSS, el efecto producido por “box-shadow” puede ser modificado y alterado, podemos ajustar su tamaño añadiendo píxeles en las propiedades de los elementos.

Nuestro CSS quedaría definido de la siguiente manera:

.sombra-borde {
    width: 600px;
    -webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
    -moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
    box-shadow: 1px 2px 4px rgba(0,0,0,.5);
}

Y al aplicarlo a nuestro HTML obtendríamos una imagen así:

Sombra profunda

Después de tener listo la aplicación de la sombra a la caja contenedora, continuamos con la creación de una clase de estilo que agregue un efecto sombra profunda para nuestra imagen. Esta sombra nos dará una sensación de mayor profundidad y para ello definimos un código CSS como el siguiente, entorno al elemento “div” que contiene la imagen:

.sombra-profunda:after {
    -moz-transform: skew(-40deg);
    -webkit-transform: skew(-40deg);
    -moz-box-shadow:  70px 0 10px 40px rgba(0,0,0,.2);
    -webkit-box-shadow:  70px 0 10px 40px rgba(0,0,0,.2);
    box-shadow: 70px 0 10px 40px rgba(0, 0, 0, 0.2);
    content: "";
    height: 40px;
    left: 0;
    position: absolute;
    top: 360px;
    width: 550px;
}

Con este código la sombra queda sobre la imagen, pero esto lo vamos a corregir en el siguiente paso.

Ajustar el orden del índice Z (z-index)

Por último, cambiamos el orden del índice Z de nuestra sombra, dicho índice indica el orden en que se mostrarán los elementos en el sitio, con ello se evita el empalmar elementos sobre otros más importantes, en este caso lo utilizamos para lograr el efecto de profundidad necesario y evitar que la sombra quede en el primer marco del sitio.

Al darle un valor de “-1″ a la propiedad “z-index” logramos pasar la sombra al fondo y con esto completar el marco visual que estamos buscando.

z-index: -1;

Como se puede apreciar en la imagen final, hemos logrado transformar lo plano en algo tridimensional y sólo con unos cuantos pasos sencillos. Basta con aplicar al “div” contenedor de la imagen las clases que creamos en este artículo, para así poder observar los resultados.

<div id="contenedorImg" class="sombra-borde sombra-profunda">
    <img src="imagenPlana.png" />
</div>

Código CSS para cambiar los estilos dinámicamente

 * {
  margin: 0;
  padding: 0;
  }

  body {
  height: 100%;
  background: #DEB887;
  font-size: 14px;
  background: -moz-radial-gradient(center 45deg, circle closest-corner, #FFFFFF 0%, #FFCC66 100%);
  background: -webkit-gradient(radial, center center, 0, center center, 770, from(#FFFFFF), to(#FFCC66));
}

#contenedor {
  width: 922px;
  margin: 0px auto;
  padding: 0px;
  border: 1px solid #dfdfdf;
  background: #FFF8DC;
  color: #DEB887;
  font: 1.0em/150% 'arial', sans-serif;
  }
  #cabecera {
  float: left;
  width: 100%;
  height: 95px;
  margin: 0px;
  padding: 0px;
  background: #FFEBCD;
  }
#cabecera #titulo {
  margin: 20px 0px 0px 30px;
  padding: 0px;
  color: #DEB887;
  font: bold 2.5em 'arial black', sans-serif;
  text-align: left;
  }
#cabecera div#descripcion {
  margin: 5px 0px 0px 30px;
  padding: 0px;
  color: #DEB887;
  font-size: 1.2em;
  text-align: left;
  }

#navegacion {
  float: left;
  width: 93%;
  margin: 0px;
  padding: 10px 2% 0px 5%;
  background: #FFDEAD;
  }
#contenido {
  float: left;
  width: 450px;
  margin: 20px 0px 0px;
  padding: 0px;
  background: #FFEBCD;
  font-size: 1.0em;
  text-align: left;
  }
#contenido p {
  margin: 15px 25px;
  padding: 0px;
  }
#contenido h3 {
  margin: 20px 25px 10px;
  font: bold 1.0em 'arial', sans-serif;
  text-align: left;
  }

.lateral {
  width: 200px;
  float: left;
  margin: 20px 5px 10px 0px;
  padding: 0px 0px 0px 20px;
  background: #F5DEB3;
  font-size: 1.0em;
  text-align: left;
  }
#pie {
  clear:both;
  width: 100%;
  height: 35px;
  margin: 0px;
  padding: 20px 0px 0px;
  background: #FFDEAD;
  font-size: 0.8em;
  text-align: right;
  }
  

En la definición de este estilo CSS podemos identificar los puntos claves para trabajar con el resto. Los elementos background, color y border, son los responsables de adaptar los colores al fondo, letra y borde de cada div, estos serán los elementos que cambiaremos para agregar la particularidad de cada etapa del día.

Estilo CSS para la tarde:

 * {
  margin: 0;
  padding: 0;
  }
body {
  height: 100%;
  background: #FF8C00;
  font-size: 14px;
  background: -moz-radial-gradient(center 45deg, circle closest-corner, #D2B48C 0%, #FF8C00 100%);
  background: -webkit-gradient(radial, center center, 0, center center, 770, from(#D2B48C), to(#FF8C00));
}
#contenedor {
  width: 922px;
  margin: 0px auto;
  padding: 0px;
  border: 1px solid #FFAD04;
  background: #FFCC66;
  color: #FF8C00;
  font: 1.0em/150% 'arial', sans-serif;
  }
#cabecera {
  float: left;
  width: 100%;
  height: 95px;
  margin: 0px;
  padding: 0px;
  background: #F0A300;
  }
#cabecera #titulo {
  margin: 20px 0px 0px 30px;
  padding: 0px;
  color: #FFDB91;
  font: bold 2.5em 'arial black', sans-serif;
  text-align: left;
  }
#cabecera div#descripcion {
  margin: 5px 0px 0px 30px;
  padding: 0px;
  color: #FFDB91;
  font-size: 1.2em;
  text-align: left;
  }

#navegacion {
  float: left;
  width: 93%;
  margin: 0px;
  padding: 10px 2% 0px 5%;
  background: #FFAD04;
  }
#contenido {
  float: left;
  width: 450px;
  margin: 20px 0px 0px;
  padding: 0px;
  background: #FFDB91;
  font-size: 1.0em;
  text-align: left;
  }
#contenido p {
  margin: 15px 25px;
  padding: 0px;
  }
#contenido h3 {
  margin: 20px 25px 10px;
  font: bold 1.0em 'arial', sans-serif;
  text-align: left;
  }

.lateral {
  width: 200px;
  float: left;
  margin: 20px 5px 10px 0px;
  padding: 0px 0px 0px 20px;
  background: #FFC753;
  font-size: 1.0em;
  text-align: left;
  }
#pie {
  clear:both;
  width: 100%;
  height: 35px;
  margin: 0px;
  padding: 20px 0px 0px;
  background: #FFAD04;
  font-size: 0.8em;
  text-align: right;
  }
  

Estilo CSS para la noche:

 * {
  margin: 0;
  padding: 0;
  }
body {
  height: 100%;
  background: #dfdfdf;
  font-size: 14px;
  background: -moz-radial-gradient(center 45deg, circle closest-corner, #333333 0%, #000000 100%);
  background: -webkit-gradient(radial, center center, 0, center center, 770, from(#333333), to(#000000));
}
#contenedor {
  width: 922px;
  margin: 0px auto;
  padding: 0px;
  border: 1px solid #000000;
  background: #555555;
  color: #333333;
  font: 1.0em/150% 'arial', sans-serif;
  }
#cabecera {
  float: left;
  width: 100%;
  height: 95px;
  margin: 0px;
  padding: 0px;
  background: #333333;
  }
#cabecera #titulo {
  margin: 20px 0px 0px 30px;
  padding: 0px;
  color: #666666;
  font: bold 2.5em 'arial black', sans-serif;
  text-align: left;
  }
#cabecera div#descripcion {
  margin: 5px 0px 0px 30px;
  padding: 0px;
  color: #666666;
  font-size: 1.2em;
  text-align: left;
  }

#navegacion {
  float: left;
  width: 93%;
  margin: 0px;
  padding: 10px 2% 0px 5%;
  background: #000000;
  }
#contenido {
  float: left;
  width: 450px;
  margin: 20px 0px 0px;
  padding: 0px;
  background: #999999;
  font-size: 1.0em;
  text-align: left;
  }
#contenido p {
  margin: 15px 25px;
  padding: 0px;
  }
#contenido h3 {
  margin: 20px 25px 10px;
  font: bold 1.0em 'arial', sans-serif;
  text-align: left;
  }

.lateral {
  width: 200px;
  float: left;
  margin: 20px 5px 10px 0px;
  padding: 0px 0px 0px 20px;
  background: #666666;
  font-size: 1.0em;
  text-align: left;
  }
#pie {
  clear:both;
  width: 100%;
  height: 35px;
  margin: 0px;
  padding: 20px 0px 0px;
  background: #000000;
  font-size: 0.8em;
  text-align: right;
  }
  

Una vez concluidos los estilos CSS, empezaremos a idear un sistema de condicionamiento basado en horas, si definimos que mostraremos un "layout" distinto cada ocho horas entonces debemos estructurarlo en base a este período.

JavaScript como la mayoría de los lenguajes de programación, cuenta con un número de funciones y atributos predefinidos que nos ayudan a obtener valores específicos para realizar operaciones con ellos.

En cuestión de Tiempo, existen funciones como getTime y getHours que podemos utilizar para obtener los valores necesarios para estructurar el condicionamiento mencionado, con datos directamente extraídos de nuestro cliente.

Tomando los valores obtenidos como base, podemos iniciar la codificación de condiciones necesarias para desplegar el estilo que diseñamos para ese valor específico, algo como lo siguiente:

Código JavaScript para cambiar el CSS dinámicamente

function obtenerCSS()
{
fechadehoy = new Date();
tiempoactual=fechadehoy.getTime();
fechadehoy.setTime(tiempoactual);
horaactual = fechadehoy.getHours(); 

if (horaactual > 20)
colores = "noche.css";
else if (horaactual > 12)
colores  = "tarde.css";
else if (horaactual > 4)
colores  = "manana.css";
else if (horaactual > 1)
colores  = "noche.css";
else
colores  = "tarde.css"; 

var css = '<';  css+='link rel="stylesheet" href="' + colores  + '" \/';  css+='>'; 

document.write(css);
}

Básicamente lo que realizamos es obtener el tiempo en base a la fecha actual y extraerle la hora para poder utilizar el valor en las condiciones que determinan que combinación de colores utilizar. Una vez definida la combinación formamos la etiqueta "link" para agregar el css y lo escribimos en el documento.

Dicho código lo guardamos en un archivo con extensión .js, el cual agregaremos en nuestro código HTML principal, para mandar llamar a dicha función, esto lo haremos dentro del campo de la siguiente manera:

<script type="text/javascript">obtenerCSS();</script>

Hay que recordar que este código funcionará en base al reloj de la computadora del usuario por lo que funcionará correctamente si este se encuentra bien ajustado; es decir, si el usuario por alguna razón tiene su reloj adelantado o atrasado recibirá un estilo que no corresponde a la verdadera etapa del día.

A pesar de este problema, por razones de personalización es preferente usar el tiempo obtenido del lado cliente en vez del servidor, para que el usuario reciba el CSS correspondiente a la hora actual de su ciudad.

El utilizar estilos de CSS dinámicos se puede llevar a un nivel más avanzado, utilizar aplicaciones externas y web services para obtener información relevante y utilizarla para llevar a cabo cambios de estilo, en el siguiente artículo de esta serie veremos como poder utilizar esta clase de información.

Antes de la incorporación de las hojas de estilo a nuestros desarrollos, era bastante complicado lograr esta adaptación de imágenes, se tenía que recurrir a varios trucos para lograr el efecto deseado, e incluso se tenía que personalizar de navegador en navegador, teniendo que recurrir muchas veces al uso de JavaScript.

En la actualidad CSS, y sobre todo CSS3, nos han extendido la mano para llevarnos por un camino de simplicidad y estandarización al realizar esta clase de funciones, permitiéndonos utilizar un mismo código para cada navegador obteniendo resultados exactos o muy similares, con las claras excepciones de los navegadores antiguos que no soportan la tecnología.

Desgraciadamente, debido a estas excepciones mencionadas, CSS3 sigue siendo un tema tabú para muchos desarrolladores, temiendo que usuarios que tengan una versión instalada de Internet Explorer que sea anterior a la 9, no puedan ver correctamente el sitio. Es por esto, que en consideración a los gustos de cada programador, hemos agregado dos métodos distintos para lograr el mismo resultado, explicando en que navegadores funcionará cada uno de ellos.

El objetivo es sencillo, queremos lograr que la imagen de fondo del sitio cubra toda la ventana del navegador, en todo momento, sin que existan espacios en blanco y logrando que la imagen este correctamente escalada, respete su proporción de altura y anchura, no genere barras de desplazamiento y que se encuentre centrada, todo esto utilizando código sencillo sin recurrir a herramientas elegantes, y tratando de que sea visible en la mayoría de los navegadores.

Método con CSS3

La maravilla del uso de CSS3 es que no solo nos convierte en desarrolladores progresivos y vanguardistas, cosa de la que muchos presumen, si no que nos hace ser más pragmáticos y resolver problemas de manera mucho más sencilla.

Gracias al uso de la propiedad “background-size”, el efecto de fondo extendido puede hacerse posible utilizando exclusivamente CSS. Para definirlo, utilizaremos el elemento “html” y dentro de su sentencia de estilo definiremos las propiedades para el ajuste del tamaño de la imagen:

html {
        background: url(imagenes/fondo.png) no-repeat center center fixed;
        background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
}

En dicha sentencia, con la propiedad “background” establecemos un fondo fijo que llevara la imagen cuyo nombre es “fondo.png”, dicha imagen es centrada y arreglada para que no sea repetida. Finalmente mediante la propiedad “background-size”, ya mencionada, ajustamos el tamaño para que cubra la ventana del navegador.

Como se puede observar se utilizaron 3 variaciones de la propiedad, esto es para que la sentencia pueda funcionar en tres distintos navegadores, “moz” para firefox y los derivados del proyecto Mozilla, “webkit” para safari y chrome, y finalmente “o” para Opera.

Esta medida es únicamente de prevención, y con ello nuestro efecto se podrá observar perfectamente en cualquier navegador Firefox que sea igual o superior a la version 3.6, en Safari 3 o superior, Opera 9.5 en adelante, Google Chrome y en la más reciente versión de Internet Explorer, la número 9.

Método con CSS básico

En caso de que CSS3 te resulte complicado, o simplemente quieras tener un mayor rango de navegadores a abarcar podemos utilizar este método que utiliza únicamente CSS básico. Si bien es un poco más de código por programar, resulta más digerible para las versiones antiguas de navegadores, incluidos los famosos Internet Explorer 6 y 7.

En este método utilizamos el elemento “img”, al cual le establecemos una altura mínima con “min-height”, lo que permite llenar la ventana del navegador de manera vertical, después establecemos una anchura (width) de 100% para realizar el llenado horizontal. De igual manera establecemos una anchura mínima (min-width) para que la imagen no se haga más pequeña que su tamaño original.

El truco aquí consiste en verificar si la ventana del navegador es menor que el tamaño verdadero de la imagen, al saberlo podemos utilizar porcentajes y margenes negativos para mantener centrada la imagen sin importar el tamaño de la ventana. Para ello utilizamos una búsqueda de tamaño mediante la sentencia “@media”, esto podemos observarlo en el siguiente código:

img#imagen_de_fondo {
        /* Rellenamos el fondo */
        min-height: 100%;
        min-width: 800px;

        /* Escalamiento proporcional */
        width: 100%;
        height: auto;

        /* Posicionamiento */
        position: fixed;
        top: 0;
        left: 0;
}

@media screen and (max-width: 800px) { /* Hacemos la búsqueda y si coincide modificamos las propiedades de la imagen */
        img#imagen_de_fondo {
                left: 50%;
                margin-left: -400px;   /* Agregamos un margen negativo que represente el 50% */
        }
}

Este método funcionará de manera correcta en cualquier versión de los navegadores Firefox, Chrome, Opera y Safari, por su parte también funcionará a la perfección en Internet Explorer 9, mientras que en las versiones 7 y 8 puede fallar con imágenes muy pequeñas.

El uso de tablas para estructurar un sitio resulta únicamente cómodo para quienes se reusan a aprender los nuevos estándares que ofrecen varias y mejores alternativas, el simple hecho de seguir utilizándolas para presentar información que no es propiamente tabular resulta abrumador.

La culpable de todo esto es la maldita costumbre, muchos crecimos como diseñadores web utilizando las tablas como un elemento omnipresente que tenía cabida en cada parte de nuestros sitios, para casi todo lo que necesitaba presentar información existía una celda o una tabla completa que entraba al rescate.

Con ellas matábamos la accesibilidad y la flexibilidad del sitio pero en aquel entonces no nos importaba, era preferible complicarnos la vida utilizando gifs como separadores dentro de las celdas para que el sitio funcionará y se viera bonito, a adaptarlo para utilizar tecnologías emergentes como el CSS, limitadamente utilizado en aquellos años.

Gracias a nosotros que crecimos con ese estilo y propagamos el código por la red, hoy existen muchos desarrolladores principiantes confundidos que se preguntan ¿Cuándo y cómo debo utilizar tablas?, es fácil detectar que en Internet aún existen sitios que utilizan estos elementos para maquetación web, existen ejemplos por la red y métodos de solución que aún recomiendan el uso de tablas incorrectamente, y por otro lado se encuentran con la nueva era de la estandarización donde van surgiendo cada vez más nuevos estándares y mejores maneras de estructurar el código.

La nueva era, divs para crear estructuras

Si tú haz llegado hasta aquí con esa encrucijada de utilizarlas o no, te tengo una respuesta muy sencilla, utiliza las tablas únicamente para presentar datos que lo ameriten, ya sea un conjunto de listas compuestas por varios datos, información estructurada de manera tabular, y aquella que es obtenida mediante una consulta a una base de datos. Por nada del mundo las utilices para maquetación, para crear headers, o footers, si lo que deseas es estructurar las partes de tu sitio web debes utilizar las capas, representadas por la etiqueta “div”, y verás que con ello reduces el tiempo de carga de tu sitio, así como muchas otras ventajas relacionadas tanto con el hosting, semántica y con el ahorro de tiempo tanto para ti como para el usuario.

Una vez definido esto, reconoceremos a las capas “div” como las auténticas salvadoras que han venido a aclarar el panorama de la estructuración de nuestros sitios, pero ¿Podemos manejarlas de una mejor manera para optimizar aún más dicha estructura?, por supuesto para ello existen lenguajes como CSS3 que nos vienen a ambientar aún más la fiesta.

CSS3 o cómo flexibilizar nuestras maquetas

Desde 2005, año en que vio la luz por primera vez el proyecto de CSS3, se empezaron a desarrollar especificaciones con distintas funciones y tareas adaptables para la estructuración de nuestro sitio web, estilos aplicables a nuestras capas para hacer de estás más flexibles y adaptables al medio donde se desplegará la información.

Una de estás funcionalidades son las columnas múltiples, las cuales son generadas única y exclusivamente por estilos, sin necesidad de agregar separadores ni mucho menos celdas para desplegar la información en forma de tabloide.

En la actualidad son poco conocidas y raramente utilizadas, todo esto producido por la falta de soporte en Internet Explorer, ya que sólo son admitidas y desplegadas en los navegadores basados en WebKit y en Mozilla, por lo que si tienen pensado desarrollar un proyecto para todos los navegadores deben considerar crear una versión alterna para aquellos que usen IE8 o inferior.

Básicamente lo que produciremos al agregar esta propiedad a los elementos de nuestro sitio, es convertir una línea continua o un párrafo grande en varias columnas, tomando como base los atributos “column-count”, “column-gap”, “column-rule” y “column width” para darle la forma deseada.

Lo primero que debemos hacer es crear nuestra estructura del sitio de la siguiente manera:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Columnas Múltiples con CSS3</title>
</head>
<body> 

<div id="contenedor">
	<h1>Diario "El Amarillista"</h1>
	<img src="http://www.dirjournal.com/info/images/roswell-crash.jpg" alt="Cae Nave en Kuala Lumpur" />
	<h2>Cae nave espacial en Kuala Lumpur</h2>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a lectus nec felis bibendum bibendum quis nec dolor. Etiam dignissim elit quis leo posuere et viverra mauris tristique. Vestibulum lacinia sapien a purus bibendum iaculis nec vitae sapien. Quisque hendrerit, leo quis pellentesque scelerisque, ipsum ligula luctus purus, ut viverra dolor mi et orci. Donec feugiat cursus consectetur. Nunc scelerisque, nisl sed feugiat faucibus, sem augue dapibus erat, congue lobortis diam dolor ac ligula. Suspendisse fringilla lacus ut mi accumsan quis commodo sapien aliquam. Donec sapien nulla, placerat quis ullamcorper sed, rhoncus non lectus. Ut a dui in magna lacinia mattis ut et leo. Nullam malesuada pellentesque est et dictum. Vivamus ac erat vel augue facilisis rhoncus. Cras quis augue ut purus ullamcorper mollis.
	</p>
</div> 

</body>
</html>
  

Agregamos un gran párrafo con el famoso “Lorem ipsum” para ver como funciona la propiedad, dicho párrafo está dentro de una capa llamada “contenedor” y en base a esto aplicaremos el siguiente estilo a la relación:

#contenedor p {
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  -moz-column-count: 3;
  -moz-column-gap: 10px;
  column-count: 3;
  column-gap: 10px;
  }
  

Como se puede apreciar escribimos las mismas dos líneas de atributos en tres ocasiones pero con diferentes prefijos, esto lo hacemos para que la función sea compatible con la mayoría de los navegadores, el prefijo “webkit” es para Safari y Chrome, “moz” para Mozilla y los atributos sin prefijo son para aquellos navegadores que así lo requieran.

El atributo “column-count” sirve para especificar en cuantas columnas queremos que se despliegue la información, en nuestro caso son tres. Por su parte el atributo “column-gap” sirve para establecer el espacio que existirá como separador entre cada columna, a lo que nosotros le damos el valor de 10 píxeles.

Si deseamos agregar más control sobre el funcionamiento de las columnas podemos utilizar otros dos atributos, “column-width” que nos permite determinar cuanto medirá cada columna y “column-rule” que permite agregar especificaciones a las divisiones entre cada columna, comúnmente usado para establecer un borde (column-rule: solid #000000 1px;).

Podemos detallar más el estilo de los diferentes elementos del sitio agregando más gama de colores y creando efectos como el difuminado sobre el encabezado; todo lo que creamos necesario para que nuestro sitio luzca de la mejor manera. A nuestra página de ejemplo he decidido agregar lo siguiente:

body{
  background: #282828;
  }
  #contenedor {
  width: 500px;
  margin: auto;
  background: #F0F0F0;
  padding: 10px;
  font: 12px helvetica, arial, sans-serif;
  }

  img {
  width: 100%;
  }
  h1{
  color: #303030;
  font-size: 48px;
  text-shadow: 2px 2px 5px #505050;
  }
  #contenedor p {
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;

  -moz-column-count: 3;
  -moz-column-gap: 10px;

  column-count: 3;
  column-gap: 10px;
  }
  

Dicho estilo deberá añadirse a nuestro código con alguno de los dos métodos conocidos, ya sea escribiéndolo directamente dentro de las etiquetas “head” o agregándolo como un archivo externo con extensión “.css”. Cualquiera que sea la manera de hacerlo obtendremos como resultado una página en forma de tabloide en colores grises lista para ser publicada.

Como pudimos observar es un método bastante sencillo, fácil de aplicar y sobre todo de aprender, no hay necesidad de complicarnos la vida con tablas, ni de utilizar métodos aún más arcaicos como el salto de línea ni los gifs transparentes para separar, con esto nuestro código quedará limpio y claro.