La nuevos estilos introducidos en CSS3 brindó 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 CSS3 es hacer que las páginas web sean interactivas mediante la creación de áreas difuminadas 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 al pasar el mouse
Un elemento interactivo es cambiar la opacidad de una imagen cuando un cliente pasa el mouse sobre ese elemento. Para este ejemplo (el HTML se muestra a continuación), usamos una imagen con el atributo de clase de greydout.
Para que aparezca atenuado, agregue las siguientes reglas de estilo a su hoja de estilo CSS:
.greydout {
-Opacidad del kit de web: 0,25;
-moz-opacidad: 0,25;
opacidad: 0,25;
}
Esta configuración de opacidad se traduce en un 25 por ciento. Esto significa que la imagen se mostrará como 1/4 de su transparencia normal. Totalmente opaco sin transparencia sería 100 por ciento, mientras que 0 por ciento sería completamente transparente.
A continuación, para hacer que la imagen sea clara (o más exactamente, para que se vuelva completamente opaca) cuando el mouse pasa sobre ella, agregaría lo siguiente:
.greydout: hover {
-Opacidad del kit de web: 1;
-moz-opacidad: 1;
opacidad: 1;
}
Más ajustes de opacidad
Notará que, para estos ejemplos, usamos las versiones de la regla con prefijo de proveedor para garantizar la compatibilidad con versiones anteriores de esos navegadores. Si bien esta es una buena práctica, la regla de opacidad es compatible con los navegadores, y es seguro eliminar esas líneas con prefijo de proveedor.
Aún así, no hay razón para no incluir estos prefijos si desea garantizar la compatibilidad con versiones anteriores del navegador. Solo asegúrese de seguir las mejores prácticas aceptadas de finalizar la declaración con la versión normal sin prefijo del estilo.
Cuando se implementa en un sitio, este ajuste de opacidad es un cambio abrupto. Primero, es gris, y luego no lo es, sin estados intermedios entre esos dos. Es como un interruptor de luz, encendido o apagado. Esto puede ser lo que desee, pero también puede querer experimentar con un cambio que sea más gradual.
Para agregar un efecto agradable y hacer que este desvanecimiento sea gradual, agregue el transición propiedad:
.greydout
clase: .greydout {
-Opacidad del kit de web: 0,25;
-moz-opacidad: 0,25;
opacidad: 0,25;
-webkit-transición: todos los 3 se facilitan;
-moz-transición: todos los 3 son fáciles;
-ms-transición: todos los 3 se facilitan;
-o-transición: facilidad de los 3;
transición: todos los 3 se facilitan;
}