Ultima revisión 11/09/2012

Sombras en CSS3

Un estilo que, posiblemente, nos librará más de una vez de usar imágenes y Photoshop es el efecto shadow de CSS3. Este tiene 2 variantes, sombra en recipiente o contenedor y sombra en texto.

Cuando IE9 fue lanzado, estabamos contentos de ver a todas las grandes características de CSS3 como Transformaciones 2D, selectores avanzados, bordes redondeados, RGBA / HSLA colores, fuentes WOFF ... se fuesen a incluir. Sin embargo, nos decepcionó que IE9 no fuera compatible con text-shadow y, claro, eso nos lleva a, otra vez, ensuciar el código.

Con este código, y siguiendo nuestra política Cross Browsing, conseguimos que se vean las sombras práctimente igual en todos los navegadores. Aún así, nosotros recomendamos no abusar de las sombras ya que estas no están aceptadas desde el punto de vista de la accesibilidad web y para algunas personas, las sombras, podrían ser un grave problema.

text-shadow: <x-offset> <y-offset> <blur-radius> <color>;

El x-offset e y-offset son el desplazamiento e indican cuántos píxeles horizontalmente y verticalmente se va a desplazar la sombra con respecto al texto original.

El parámetro blur-radius se utiliza para indicar la nitidez del contenido de la sombra. Cuanto más alto sea el valor, más borrosa o menos nítida será. Todos estos valores se pueden expresar usando cualquier unidad de medición CSS (px, em, etc).

El color puede ser cualquier valor de color CSS, que logicamente, representará el color del texto.

Ejemplo

Texto con sombraTexto con sombra

El código CSS3

.contentShadow {
    color: white;
    font-family: Helvetica,Arial,sans-serif;
    font-weight: bold;
    font-size: 2.2em;
    text-shadow: #333 2px 2px 3px;
    padding-bottom:2px;
}
.shadow { display: none; }
.navegadores_antiguos .contentShadow span {
    position: absolute;
    color: #333;
}
.navegadores_antiguos .contentShadow span.shadow {
    display: inline-block;
    zoom: 1;
    color: #333;
    filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
}

El código HTML

<!--[if lt IE 10 ]> <div class="navegadores_antiguos"> <![endif]-->
<p class="contentShadow"><span>Texto con sombra</span><span class="shadow">Texto con sombra</span></p>
<!--[if lt IE 10 ]> </div> <![endif]-->