Diseñamos

El CSS permite una infinidad de opciones para estilizar de la manera que deseamos nuestras páginas web. Además de poder definir colores de fuentes y fondos, bordes y posición de los elementos con los que trabajemos, una de las prestaciones que nos será muy útil a la hora de darle un estilo gráfico a nuestro proyecto, es la de insertar imágenes y fondos usando hojas de estilo.

A pesar de ser un "iniciado" en esto de las hojas de estilo, he preparado una pequeña guía para que puedas usar esta técnica en sencillos pasos.

Antes de pasar al código, es recomendable tener previamente un gráfico de la web o del elemento que estemos trabajando, lo puedes hacer en Photoshop, Illustrator, o tu software de gráficos predilecto.

Vamos a detallar cada paso con un pequeño ejemplo: supongamos que queremos mostrar un bloque en cualquier parte de nuestra web, en el que irá un texto y de fondo una imágen, además reemplazar el título con una imágen y colocar una imagen bajo el texto, como este:

Necesitamos para el efecto 3 imágenes a utilizar: el fondo del recuadro (para darle el efecto "shadow" o "sombra"), el título y el mosquito que va en la parte inferior.

El código html iría así (si tenemos conocimiento HTML reconoceremos los elementos fácilmente):

<div class="mosquito">
<h2>La Malaria</h2>
<p>También llamada Paludismo. Es una peligrosa enfermedad tropical, transmitida por el mosquito anófeles...</p>
</div>

A simple vista el código es más que sencillo, solo contiene una capa div que encierra a los demás elementos, una cabecera de texto h2 (puede ser h1, h2, h3, o según la relevancia del elemento) y un contenedor de parrafos p (donde va el texto).

Ahora procedemos, como primer paso, a definir el fondo de todo el bloque, en este caso una sombra sencilla en los bordes laterales. Podemos hacerlo en Photoshop, aplicando el efecto shadow en un cuadro, que deberá ser del mismo tamaño de ancho a utilizar en nuestro bloque. El alto no es importante, pues repetiremos la imagen de fondo a lo largo del bloque, por lo que mientras menos píxeles de alto ocupe, mejor. Podría quedar una imagen final como esta:

Para aplicar este fondo en nuestro bloque, definimos en la hoja de estilo las siguientes líneas:

div.mosquito {
  width: 250px;
  background-color: #FFFFFF;
  background-image: url('/directorio/de/la/imagen/fondo-bloque.jpg');
}

En la primera línea abrimos la definición del div de clase "mosquito". En la segunda definimos el ancho de nuestro bloque, en este caso de 250px. En la tercera, definimos el color de fondo del bloque, en este caso es el #FFFFFF o "white" (este fondo se muestra si la imagen no carga). La cuarta línea es para definir la ubicación de la imagen dentro de nuestro servidor. Finalizamos cerrando la definición de la clase.

También podemos resumir los atributos del background en una sola línea, donde podemos además darle otros atributos que veremos más abajo.

background: #FFFFFF url('/directorio/de/la/imagen/fondo-bloque.jpg');

Al actualizar nuestra página de ejemplo, nos daremos cuenta que ahora el bloque tiene este aspecto:

Ahora reemplazaremos el título dentro del h2 por una imágen que tenga el mismo texto.

Esto es útil para usar, por ejemplo, fuentes que no sean comunes para web, pero que queremos usar en los títulos de nuestro proyecto. Hay varias técnicas para lograr este efecto, las que analizaremos en posteriores entregas, pero para nuestro ejemplo usaremos la más difundida, el Phark Method. Colocamos estas líneas en nuestro archivo CSS:

div.mosquito h2 {
  background: url('/directorio/de/la/imagen/titulo-malaria.jpg') no-repeat top center;
  text-indent: -9000px;
  height: 23px;
}

Como no definimos ninguna clase en nuestro h2, debemos primero colocar la clase de su div contenedor (div.mosquito) y, separado por un espacio, el elemento a definir, en este caso el h2.

Luego definimos la imagen que irá de fondo en este elemento. notamos que ahora hemos aumentado 3 atributos luego de la ruta de la imagen: no-repeat (indica que el fondo no debe mostrarse más de una vez), top (irá alineada hacia arriba) y center (irá horizontalmente hacia el centro).

Ahora bien, luego de que tenemos el fondo en el elemento h2, sería un caos visual que se muestre la imágen y encima el texto que habíamos colocado en esta etiqueta. ¿Cómo hacemos para que no se vea?. Muy fácil: le damos un "margen negativo" usando un text-indent: -9000px;, que lo que hace es mover el texto 9000 píxeles hacia la izquierda (en este caso), lo que lo vuelve invisible para nuestra vista, pues el navegador no lo muestra, sin embargo un lector de pantalla si lo detecta (así practicamos también la accesibilidad).

La siguiente línea es el alto de nuestro elemento. En este caso es recomendable darle la misma dimensión de nuestra imágen de fondo.

Nuestro ejemplo se muestra así:

El siguiente y último paso es darle estilo a nuestro párrafo, en este caso tendrá la imagen de un mosquito de fondo, pero en la parte inferior y no mezclándose con el texto.

Ya familiarizados con los atributos, no se nos hará difícil definir este elemento:

div.mosquito p {
  background: url('/directorio/de/la/imagen/mosquito.jpg') no-repeat bottom right;
  margin-left: 40px;
  margin-right: 40px;
  padding-bottom: 50px;
  font-family: verdana;
  font-size: x-small;
}

Esto nos indica que nuestro párrafo tendrá de fondo la imagen "mosquito.jpg", que no se repetirá ese fondo y que estará ubicado verticalmente hacia abajo y horizontalmente a la derecha (también puedes usar una medida en píxeles). También que el parrafo tendrá un margen de 40 píxeles a la derecha e izquierda. Al final, le damos un espaciado (padding) de 50 píxeles en la parte inferior, para procurar que la imágen de fondo del mosquito no se mezcle con el texto. Definimos también la fuente y el tamaño del texto.

Como nuestro ejemplo usa un solo párrafo funcionará de maravillas, pero si le agregamos más párrafos, se repetiría la imagen de fondo en cada uno, por lo que en este caso podríamos definir otro div encerrando los párrafos, para que cumpla la función exclusiva de colocar el fondo.

Al final, nuestro ejemplo se verá así:

Como hemos visto, es algo súmamente sencillo estilizar nuestra web usando imágenes para fondos de elementos con CSS. Puedes utilizar esta técnica para dar fondos a toda la estructura web o a ciertas capas, reemplazar texto y títulos por imágenes, hacer menús usando una imágen (en otros artículos explicaremos cómo), etc.

Este ha sido un ejemplo sencillo, y es la manera en que personalmente lo hago, las cosas maravillosas que se pueden hacer con el CSS sólo dependen de tu imaginación y creatividad. En otros artículos profundizaremos más el uso de esta técnica con ejemplos prácticos. Nos vemos.