PLC CSS

Introducción: ¿Qué vamos a hacer?

Como muchos de vosotros nos habéis sugerido através de nuestro twitter @ontuts, nuestrapágina de facebook y comentarios del blog, trataré de ir publicando distintos artículos y tutoriales relacionados con CSS3, con la intención de conocer un poco más acerca de las nuevas propiedades y trucos con los que maquetaremos nuestras futuras webs.

En este tutorial aprenderemos a aplicar sombra a nuestros textos mediante dos métodos:

Utilizando un truco en CSS2 (css actual).
Utilizando la nueva propiedad text-shadow en CSS3.

Como bien sabréis, cuando mencionamos al CSS2 nos estamos refiriendo al “estándar” que empleamos a día de hoy a la hora de maquetar nuestras páginas y que está prácticamente soportado en todos los navegadores en mayor o menor medida (esto va por Internet Explorer principalmente).

Será un tutorial relativamente corto, pero que nos permitirá tener un efecto muy curioso y elegante en nuestros diseños web, sin tener que recurrir a una imagen en lugar de texto plano. ¡Vamos a por ello!

Paso 1: la estructura HTML

Como en la mayoría de tutoriales que os expongo sobre maquetación y CSS, comenzaremos por echar un pequeño vistazo a la estructura html que emplearemos en el ejemplo:

view plaincopy to clipboardprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES">  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <title>Sombra en texto con CSS y CSS3</title>  
    <link rel="stylesheet" href="main.css" type="text/css" media="screen" />  
</head>  
<body>  
    <div class="wrapper">  
        <h1>Sombra en texto con CSS y CSS3</h1>  
        <h2>Método antiguo (mediante CSS2)</h2>  
        <div class="aux">  
            <span class="fuente">Visita Web.Ontuts para mejorar tus dotes en desarrollo y diseño web.</span>  
            <span class="fuente sombra">Visita Web.Ontuts para mejorar tus dotes en desarrollo y diseño web.</span>  
        </div>  
        <h2>Método nuevo (mediante CSS3)</h2>  
        <div class="aux">  
            <span class="fuente nuevo">Visita Web.Ontuts para mejorar tus dotes en desarrollo y diseño web.</span>  
        </div>  
    </div>  
</body>  
</html>  

Como habréis podido comprobar, tenemos dos divisiones, una para cada ejemplo: método antiguo (CSS2) y método nuevo (CSS3).

Para el método en el que empleamos CSS2, estamos duplicando el texto, con este pequeño truco y por medio del código que veremos a continuación de CSS podremos recrear la sombra exactamente igual que con la propiedad text-shadow de CSS3.

Paso 2: Aplicando CSS a ambos ejemplos

Método antiguo, mediante CSS2

Como os comentaba en la introducción, para recrear la sombra del texto necesitaremos un pequeño truco para aquellos navegadores que no soporten CSS3:

view plaincopy to clipboardprint?
.aux .fuente{  
    position: absolute;  
    z-index: 10;  
}  
.aux .sombra{  
    top: 1px;  
    color: #393939;  
    z-index: 9;  
}  

El truco como habéis podido comprobar se basa en:

Duplicar el texto deseado.
Alinear un texto por encima de su sombra.
Variar la posición en altura del “texto sombra” según el ancho deseado.

A pesar de que podemos variar la altura del “texto sombra” todo lo que queramos, cuando sobrepasamos los 2 / 3 pixels de altura, ya se nos empieza a ver el plumero

Duplicando el texto y colocándolo por debajo del original podemos recrear la sombrade una fuente de letra. Esto no ocurrirá con CSS3, gracias a la nueva propiedad text-shadow.

Además de la “chapuza” que supone este truco de cara a crear clases muy específicas en el CSS para lograr el efecto sombra, tenemos otro inconveniente: texto duplicado. Y es que de cara a soportes que no interpreten código CSS, crawlers de los buscadores, etc… no creo que sea bueno ofrecerles texto duplicado.

Método nuevo, mediante propiedad text-shadow y CSS3

Todos estos trucos, al igual que otros que iremos viendo en distintos tutoriales sobre CSS3 (bordes redondeados por ejemplo) caen en el olvido cuando utilizamos CSS3, ya que se nos proporciona a los desarrolladores nuevas propiedades que hacen exactamente lo mismo pero con una única línea de CSS, como debería haber sido en un principio:

view plaincopy to clipboardprint?
.aux .fuente.nuevo{  
    text-shadow: 0 1px 0 #393939;  
}  

Es evidente el cambio, ¿no?. Diferencias y ventajas más notorias con el método antiguo:

No se verá ni indexará texto duplicado, por parte de soportes sin CSS, buscadores… etc.
No existen trucos, es una propiedad de CSS aplicada al texto.

En esta ocasión hemos especificado una sombra para el texto que está 1 pixel por debajo del texto original, pero que se mantiene en horizontal (eje X) y sin desenfoque alguno.

La propiedad text-shadow nos permite especificar la posición de la sombra de un texto en los ejes X e Y, además del grado de desenfoque.

Reflexión final

A pesar de que son muchos ya los navegadores que soportan la propiedad text-shadow, como ocurre con la mayoría de novedades web, los desarrolladores no podemos depender exclusivamente de aquellos que lo soportan y debemos esperar a que se actualicen la mayoría de navegadores instaurados.

Por lo de pronto las versiones más antiguas de Internet Explorer siguen haciendo mucho daño a los desarrolladores, que vemos cortada nuestra creatividad. A pesar de todo ello, no todo van a ser malas noticias…

Espero que os haya gustado este breve tutorial y… ¡nos vemos en el próximo!

Fuente