Bloqueador NSFW usando MooTools y CSS - » HostIN
Uno de mis placeres culpables es descubrir los últimos chismes sobre celebridades…
- HostIN
- Programación
- Bloqueador NSFW usando MooTools y CSS -
Bloqueador NSFW usando MooTools y CSS -
Uno de mis placeres culpables es descubrir los últimos chismes sobre celebridades en PerezHilton.com, DListed.com y JoBlo.com. Desafortunadamente, estos sitios ocasionalmente publican fotografías NSFW, lo que hace que visitar estos sitios durante el almuerzo sea una gran apuesta: un viaje a la oficina de Recursos Humanos podría estar a solo un clic de distancia.
Dado que la mayoría de las veces es sólo una parte de una imagen determinada que podría considerarse inapropiada, me pregunté si había una manera de obtener la esencia del gráfico de un artículo sin tener que ocultar la imagen completa. Por esa razón, creé un bloqueador NSFW usando CSS y MooTools.
Índice de contenidos
Paso 1: el XHTML
divdiv/divimg src="https://soloprogramadores.top/bloqueador-nsfw-usando-mootools-y-css/johnny-cash.jpg" alt="Johnny Cash" //divdivdiv/divdiv/divimg src="2pac.jpg" alt="Tupac Shakur" //divdivdiv/divimg src="bush.jpg" alt="Presidente Bush" //div
A cada DIV contenedor se le asigna la clase nsfw-wrapper. Dentro del DIV hay otro DIV que sirve como bloqueador para el otro elemento, la imagen. Recomiendo usar un estilo en línea para definir la altura, el peso y la posición del bloqueador.
Paso 2: el CSS
.nsfw-wrapper { ancho: 200px; flotador izquierdo; margen:0 20px 0 0; }.bloqueador{ fondo:#f00; posición:absoluta; }
La clase nsfw-wrapper se puede formatear como desee. La clase nsfw debe estar posicionada de manera absoluta y puedes elegir cualquier color de fondo que desees para tu bloqueador.
Paso 3: El JavaScript de Mootools
// ventana en dom readywindow.addEvent('domready', function() {$$('.nsfw-wrapper').each(function(el) {el.addEvents({'mouseenter': function() {// desvanecer blockerel.getElements('div').each(function(div) {div.fade('out');});},'mouseleave': function() {// desvanecer blockerel.getElements( 'div').each(function(div) {div.fade('in');}); }});});});
Una vez que el DOM esté listo, tomamos cada contenedor. Para cada contenedor, agregamos un evento que desvanece los bloqueadores al ingresar el mouse y vuelve a desvanecer el bloqueador cuando el mouse sale.
Este ejemplo es seguro para el trabajo: solo dedos medios bloqueados.
- Botones estilo Skype usando MooTools -
- la respuesta a la pregunta de si los formularios de suscripción por correo electrónico pueden ser eficaces y estéticos -
Te podría interesar...
Mejora de la colaboración y la accesibilidad a los datos con la integración CMS de NetSuite CRM La cuarta conferencia anual DE{CODE} de WP Engine duplica las inscripciones, alimentando el interés en la innovación de código abierto GigNet firmó un acuerdo con Grupo Rosa Negra en Quintana Roo, México para brindar servicios administrados y de banda ancha que mejoren la experiencia gastronómica de lujo Hosting WordPress - Los Fundamentos Cómo funciona el anidamiento de elementos transformados en 3D - Utilice Google Pagespeed Insights ¿Google Cloud Platform será mi mejor opción? : alojamiento web Hiperescaladores para capturar el 50% de la capacidad del centro de datos en 5 años Alternativas a Engintron
Deja una respuesta Cancelar la respuesta
Lo siento, debes estar conectado para publicar un comentario.