[Aporte] Desenfoque Gaussiano con CSS3

#1 (**permalink**) 12/01/2011, 21:42

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

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

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

alexk · #2 (**permalink**) 12/01/2011, 23:52

Pregunta.
¿Por qué sería útil dejar el texto ilegible?

#3 (**permalink**) 13/01/2011, 07:20

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

Ruben_JD · #4 (**permalink**) 13/01/2011, 11:52

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.