Desafortunadamente CSS3 no dispone de ninguna característica para poder crear efectos gaussianos, pero podemos emularlo de forma sencilla si definimos un color transparente a la propiedad text-shadow.
Por ejemplo, con esta estructura:
<p>Lorem ipsum dolor sit amet...</p>
Añadiendo este código CSS:
{
text-shadow: 0 0 7px #000;
color: transparent;
}
Como dije anteriormente, la importancia reside en el color, que está definido en transparente. Puedes controlar la suavidad del efecto desde el valor de la propiedad text-shadow (en el ejemplo está a 7px).
Internet Explorer 5.5-8 no soporta RGBA, por lo que usaremos el filtro de degradado:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";
Este efecto funciona en los navegadores Internet Explorer versión 8 y 9, Firefox, Safari y Chrome. Podemos ver a continuación un ejemplo de su funcionamiento o descargar el ejemplo:
Vía | Martin Ivanov
Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!
