Prevención de spoiler con filtros CSS
- Internet (Tutoriales y trucos)
- Posted
- ¡Escribe el primer comentario!
- Visto 3563 veces
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,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'>
<filter id=\'blur\'><feGaussianBlur stdDeviation=\'20\' />&lt;/filter>&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.
ArtÃculos relacionados (por etiqueta)
Lo último de Jesús Cáceres
- La NSA sugiere que las empresas utilicen solucionadores de DNS sobre HTTPS 'designados'
- WhatsApp da marcha atrás para el 'intercambio de datos' con Facebook
- El nuevo Windows 10X apunta a la simplicidad
- ¿Qué es Signal y por qué la usan todos?
- Alarma ante un nuevo malware de Android vendido en foros de piraterÃa
Deja tus comentarios
- Publicar comentario como invitado. RegÃstrate o ingresaa tu cuenta