Primer tutorial de una serie en los cuales trataremos de profundizar en lo que nos depara el nuevo CSS3. En esta ocasión aprenderemos a utilizar la propiedad CSS text-shadow con la cual dotar de sombra a nuestros textos. Para ello compararemos el método antiguo de CSS2 con el nuevo que nos propone CSS3.

Autor:

Hola! Soy diseñador, programador web y cofundador de la startup Cokidoo, desarrollamos aplicaciones web a gran escala y comercio electrónico, aplicaciones para móviles y advertising. Puedes seguirme através de mi twitter y ver algunos de mis themes en Themeforest. También soy aficionado a la fotografía.
Descarga Demostración

Introducción: ¿Qué vamos a hacer?

Como muchos de vosotros nos habéis sugerido através de nuestro twitter @ontuts, nuestra pá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:

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

.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 sombra de 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:

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

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (7 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

Excelente la calidad de tus tutoriales.

¿El método “antiguo” (CSS2.1) no dará problemas con los buscadores al tener el contenido duplicado?

@Diego Jiménez creo que ya se comenta por el artículo este “problema”. Cuando hablamos de penalización por contenido duplicado, solemos hablar del plagio de textos entre páginas web, no creo que este sea el caso.

De todas formas, seguramente sería mejor no tenerlo duplicado que tenerlo, pero de ahí a hablar de penalización me parece que hay un trecho.

Gracias por tu comentario :)

@Adrián Mato

Como método está muy bien, es muy ingenioso y es bueno conocerlo, pero en la práctica -salvo contadas excepciones- no soy muy partidario de emplearlo (soy de los que les gusta tener el código limpito :)

Habrá que esperar a que los navegadores que aún no soportan los nuevos estándares se pongan las pilas de una vez!!

Gracias por tu respuesta!

@Diego Estoy muy de acuerdo contigo, yo casi prefiero usar una imagen y un atributo alt, o alguna de las soluciones actuales sobre javascript… pero siempre está bien conocer otras opciones.