Logo de islavisual
Isotipo de islavisual IslaVisual
imagen de sección

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]-->

Sobre el autor

Imagen de Pablo Enrique Fernández Casado
Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.