Los nuevos estilos introducidos en CSS3 dieron a los profesionales de la web la capacidad de agregar efectos similares a Photoshop a sus páginas. Un efecto visual que puede agregar usando & amp; amp; nbsp; CSS3 es hacer que las páginas web sean interactivas creando áreas desvaídas que se enfocan cuando un visitante del sitio hace algo, como pasar el cursor sobre ese elemento. Este efecto utiliza una combinación de opacidad y transición.
Cambiar la opacidad en Hover
Un elemento interactivo es cambiar la opacidad de una imagen cuando un cliente se cierne sobre ese elemento. Para este ejemplo (el HTML se muestra a continuación), utilizamos una imagen con el atributo de clase de & amp; amp; nbsp; greydout .
Para que esté grisizado, agregue las siguientes reglas de estilo a su hoja de estilo CSS:
.greydout {
& lt; br & gt ;
-webkit-opacity: 0.25;
& lt; br & gt ;
-moz-opacity: 0.25;
& lt; br & gt ;
opacidad: 0.25;
& lt; br & gt ;
}
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
Estas configuraciones de opacidad se traducen en 25 por ciento. Esto significa que la imagen se mostrará como 1/4 de su transparencia normal.& amp; amp; nbsp; Completamente opaco sin transparencia sería 100 por ciento, mientras que 0 por ciento sería completamente transparente.
A continuación, para que la imagen se aclare (o más exactamente, se vuelva completamente opaca) cuando el mouse se cierne sobre ella, agregará lo siguiente:
.greydout: hover {
& lt; br & gt ;
-webkit-opacity: 1;
& lt; br & gt ;
-moz-opacity: 1;
& lt; br & gt ;
opacidad: 1;
& lt; br & gt ;
}
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
Video destacado
Más ajustes de opacidad
Notará que, para estos ejemplos, utilizamos las versiones prefijadas por el proveedor de la regla para garantizar la compatibilidad con versiones anteriores de esos navegadores. Si bien esta es una buena práctica, la regla de opacidad es bien compatible con los navegadores, y es seguro abandonar esas líneas prefijadas por proveedores.
Aún así, no hay razón para no incluir estos prefijos si desea garantizar el soporte para versiones anteriores del navegador. Solo asegúrese de seguir la mejor práctica aceptada de finalizar la declaración con la versión normal y sin prefijaciones del estilo.
Cuando se implementa en un sitio, este ajuste de opacidad es un cambio abrupto. Primero, es gris, y luego no es así, sin estados provisionales entre esos dos. Es como un interruptor de luz & amp; # x2014; encendido o apagado.& amp; amp; nbsp; Esto puede ser lo que desea, pero también puede experimentar con un cambio que sea más gradual.
Para agregar un efecto agradable y hacer que este desvanecimiento sea gradual, agregue la propiedad de transición :
.greydout
& lt; br & gt ;
clase: .greydout {
& lt; br & gt ;
-webkit-opacity: 0.25;
& lt; br & gt ;
-moz-opacity: 0.25;
& lt; br & gt ;
opacidad: 0.25;
& lt; br & gt ;
-webkit-transition: todos los 3s facilidad;
& lt; br & gt ;
-moz-transición: todos los 3s facilidad;
& lt; br & gt ;
-ms-transición: todos los 3s facilidad;
& lt; br & gt ;
-o-transición: todos los 3s facilidad;
& lt; br & gt ;
transición: todos los 3s facilidad;
& lt; br & gt ;
}
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& amp; # x203A; Informática
