Si recorremos los sitios de Internet que se visten a la moda, podremos observar que cada vez está más extendido el uso del nivel 3 de CSS, sumado a que la mayoría de los navegadores modernos han comenzado a soportar sus características, esto nos da como resultado una excelente alternativa para los diseñadores y desarrolladores web.
Uno de los efectos de CSS3 que más se está viendo aplicado últimamente es el de sombreado en el texto. Uno de los principales beneficios de recurrir a este efecto con estilos CSS, es que nos ayuda a evitar tener que utilizar imágenes para recrearlo. Otra ventaja, es que es fácil de implementar y que además, si esta característica no está presente en algún navegador en particular (como en Internet Explorer 8 y anteriores), el texto se verá igual, sólo que sin el sombreado.
¿Pero cómo se logra el sombreado? Muy sencillo, simplemente debemos incluir la propiedad text-shadow en el estilo que deseemos que aparezca este efecto. A esta propiedad deberemos pasarle cuatro valores que, ordenamos, corresponden a: el primero al desplazamiento de la sombra dentro del eje X, el segundo al desplazamiento de la sombra dentro del eje Y, el tercero a los píxeles que ocupará el difuminado que proyecta la sobra, y el cuarto al color que tendrá la sombra.
En un ejemplo de una sombra negra, esto equivaldría a incorporar la siguiente línea en nuestro estilo CSS que aplicaremos a un texto: text-shadow: 2px 2px 2px #000. En este ejemplo, utilizaremos una tipografía Verdana, de un tamaño igual a 24 píxeles y el color del texto aplicado será el blanco (#FFF). También utilizamos un color de background celeste (#0099FF), para que resalte mejor la sombra negra (#000).
A continuación veremos una prueba renderizada en cinco navegadores diferentes (Mozilla Firefox 3.6, Internet Explorer 8, Safari 4, Google Chrome 4.1.2 y Opera 10.50).
Como podemos ver, en la mayoría de los navegadores el resultado se ve correctamente, pero también podemos notar que en Internet Explorer 8 no se ve el sombreado, aunque el texto aparece con el resto de sus propiedades. Este tema de compatibilidad está resuelto a partir de la llegada de Internet Explorer 9.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Deja una respuesta