Foros del Web » Creando para Internet » CSS »

[Aporte] Desenfoque Gaussiano con CSS3

Estas en el tema de [Aporte] Desenfoque Gaussiano con CSS3 en el foro de CSS en Foros del Web. 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 ...
  #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.     <title>:: Desenfoque Gausiano en CSS 3</title>
  5.     <style>
  6.         .gausiano{
  7.             text-shadow: 0 0 8px #000;
  8.             color: transparent;
  9.         }
  10.     </style>
  11. </head>
  12.     <p class="gausiano">
  13.         Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  14.         Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  15.         when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  16.         It has survived not only five centuries, but also the leap into electronic typesetting,
  17.         remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
  18.         sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
  19.         Aldus PageMaker including versions of Lorem Ipsum.
  20.     </p>
  21. </body>
  22. </html>

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

[EJEMPLO] http://comunidadcodificada.com/portal/codigo/css/EfectoGausiano.html
  #2 (permalink)  
Antiguo 12/01/2011, 23:52
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: [Aporte] Desenfoque Gaussiano con CSS3

Pregunta.
¿Por qué sería útil dejar el texto ilegible?
  #3 (permalink)  
Antiguo 13/01/2011, 07:20
4ng3r
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: [Aporte] Desenfoque Gaussiano con CSS3

Si es lógico verdad, pero es para hacer efectos con ventanas modales como en la imagen

  #4 (permalink)  
Antiguo 13/01/2011, 11:52
Avatar de Ruben_JD  
Fecha de Ingreso: diciembre-2003
Ubicación: Quito-Ecuador
Mensajes: 218
Antigüedad: 14 años
Puntos: 7
Respuesta: [Aporte] Desenfoque Gaussiano con CSS3

otra opcion podria ser para presentar texto cuando se hacen saltos a enlaces dentro de la misma pagina, poner ilegible lo que no se necesita utlizando algun codigo extra, por ejemplo el permalink del foro, o efecto sobre los divs con contenido adulto o algo asi.
Utilidad se la puede buscar.
__________________
RubénJ. Regresando al foro despues de un par de años. A preguntar más de las novedades del foro.

Etiquetas: desenfoque, aportes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 3 personas




La zona horaria es GMT -6. Ahora son las 20:41.