Efecto gaussiano con CSS3

Entrada más reciente Entrada antigua

Desafortunadamente CSS3 no dispone de ninguna característica para poder crear efectos gaussianos, pero podemos emularlo de forma sencilla si definimos un colortransparente a la propiedad text-shadow.

Por ejemplo, con esta estructura:

Ver en texto planoCopiar al portapapelesImprimir

1. <p>Lorem ipsum dolor sit amet...</p>  

Añadiendo este código CSS:

Ver en texto planoCopiar al portapapelesImprimir

1. {  
2.     text-shadow: 0 0 7px #000;  
3.     color: transparent;  
4.   
5. }  

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:

Ver en texto planoCopiar al portapapelesImprimir

1. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);  
2. -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:

Ver el ejemplo del efecto gaussiano con CSS3

Descargar el ejemplo del efecto gaussiano con CSS3

Vía | Martin Ivanov
de CSSBloEs