Tema: [Aporte] Desenfoque Gaussiano con CSS3
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/01/2011, 21:42
4ng3r
Invitado
  
Mensajes: n/a
Puntos:
De acuerdo [Aporte] Desenfoque Gaussiano con CSS3
Definición

El desenfoque gaussiano es un efecto de suavizado para mapas de bits generado por software de edición gráfica.

El efecto es generado por medio de algoritmos matemáticos. En esencia, el efecto mezcla ligeramente los colores de los píxeles que estén vecinos el uno al otro, en un mapa de bits (imagen), haciendo que la imagen pierda algunos detalles minúsculos, y de esta forma, hace que la imagen se vea más suave, aunque menos nítida o clara, respecto a que los bordes presentes en la imagen se ven afectados. Se genera un efecto similar al de una fotografía tomada con una cámara fotográfica desenfocada.

Este efecto puede ser generado por cualquiera de las siguientes aplicaciones: Adobe Photoshop, GIMP, Inkscape, Paint.NET, entre muchas otra

CSS3

Mirando alguna documentación acerca e CSS3, podemos lograr este desenfoque usando solamente dos propiedades text-shadow y color. Este es el ejemplo de como utilizar las propiedades y aplicarlo a un elemento DOM

Código HTML: 
Ver original
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5.     <title>:: Desenfoque Gausiano en CSS 3</title>
  6.     <style>
  7.         .gausiano{
  8.             text-shadow: 0 0 8px #000;
  9.             color: transparent;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <p class="gausiano">
  15.         Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  16.         Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  17.         when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  18.         It has survived not only five centuries, but also the leap into electronic typesetting,
  19.         remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
  20.         sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
  21.         Aldus PageMaker including versions of Lorem Ipsum.
  22.     </p>
  23. </body>
  24. </html>

[FUENTE] http://comunidadcodificada.com/portal/index.php/archives/262

[EJEMPLO] http://comunidadcodificada.com/portal/codigo/css/EfectoGausiano.html