Prevención de spoiler con filtros CSS

Internet (Tutoriales y trucos)
Posted May 04, 2013
¡Escribe el primer comentario!
Visto 3563 veces

Modificado por última vez en Domingo, 11 Agosto 2013 01:24

(0 votos)

imagen desagradable

Desenfoca el contenido de imágenes desagradables

A nadie le gusta un spoiler (texto o imágenes desagradables). Ya se trate de una imagen de una próxima película o el resultado de un partido de fútbol que a veces simplemente no quieres saber. Como un posible proveedor de contenido spoiler, algunos sitios pueden elegir advertir a los usuarios antes de tiempo. A veces, el título del artículo lleva el prefijo [SPOILER] un botón o algo similar. Una mejor manera puede ser utilizar filtros de CSS para borrar el contenido spoiler (función de ocultar y mostrar texto o imágenes).

El filtro CSS

CSS proporciona una manera sencilla de difuminar el contenido que no quieres visualizar para que la imagen o el texto subyacente no sea legible:

.spoiler {
    -webkit-filter: blur(20px);
    -webkit-transition-property: -webkit-filter;
    -webkit-transition-duration: .4s;
}
.spoiler:hover, .spoiler:focus {
    -webkit-filter: blur(0px);
}

Ver demo en el blog de David Walsh: "Spoiler Prevention with CSS Filters"

También ten en cuenta que lo que se cierne sobre el contenido ofensivo será realizar el desenfoque hasta que haya sido eliminado. Desafortunadamente los filtros CSS sólo se admiten por el momento en WebKit, pero en breve no dudes de esperar más soporte de los navegadores. También ten en cuenta que si añadimos :focus y establecemos tabIndex=0 en todos los elementos .spoiler, el desenfoque también puede ser soportado por sistemas táctiles móviles. Este plugin jQuery avisa sobre cómo lograr una mancha similar dentro de Firefox utilizando SVG:

<img src="/ricci.jpg" alt="Christina Ricci" style="filter: url("data:image/svg+xml;utf8,&amp;lt;svg xmlns=\'http://www.w3.org/2000/svg\'>
<filter id=\'blur\'><feGaussianBlur stdDeviation=\'20\' />&amp;lt;/filter>&amp;lt;/svg>#blur");" />

No es el código más bonito pero, no obstante, funciona. Cambiando stdDeviation a 0 (a través de JavaScript) se presentaría el elemento sin desenfoque.

La prevención de contenido desagradable (o spoiler) es un caso muy limitado (aunque más limitado en el caso de la foto es Christina Ricci utilizada en el ejemplo), pero es bueno tener una estrategia por si acaso. Me gusta esta estrategia, ya que proporciona una opción fácil para que el usuario vea el contenido oscurecido.