Prevención de spoiler con filtros CSS

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);
}

filtro spoilerVer 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.


Comentarios (0)

No hay comentarios escritos aquí

Deja tus comentarios

  1. Publicar comentario como invitado. Regístrate o ingresaa tu cuenta
Archivos adjuntos (0 / 3)
Compartir su ubicación
close

Recibe gratis nuestros nuevos artículos!

Serás el primero en conocer las novedades y noticias que pasan en Internet, nuestros tutoriales, trucos y más.

Escribe tu email:

Se abrirá una nueva ventana deFeedBurner a la izquierda de la página y habrás de validar un Captcha.

Lee nuestras Política de privacidad & Política de cookies
Puedes darte de baja de la lista de correo electrónico en cualquier momento