Los diseñadores web habían deseado durante mucho tiempo más control sobre las páginas que estaban creando cuando CSS3 llegó a la escena. 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. Esto incluía propiedades como sombras y brillos, esquinas redondeadas y más. CSS3 también introdujo efectos de animación que se pueden usar para crear una interactividad agradable en los sitios.
Un efecto visual muy agradable que puede agregar a los elementos de su sitio web utilizando CSS3 es hacer que se desvanezcan y desaparezcan utilizando una combinación de las propiedades de opacidad y transición. Esta es una manera fácil y bien soportada de hacer que sus páginas sean más interactivas al crear áreas descoloridas que se enfocan cuando un visitante del sitio hace algo, como pasar el cursor sobre ese elemento.
Echemos un vistazo a lo fácil que es agregar este efecto visual interactivo a varios elementos en sus páginas web.
Cambiar la opacidad en Hover
Comenzaremos analizando cómo cambiar la opacidad de una imagen cuando un cliente se desplaza sobre ese elemento. Para este ejemplo (el HTML se muestra a continuación) estamos usando una imagen con el atributo de clase de
greydout
Para hacerlo en gris, agregamos las siguientes reglas de estilo a nuestra hoja de estilos CSS: .greydout {-webkit-opacidad: 0,25;-moz-opacidad: 0,25;opacidad: 0,25;}
Estas configuraciones de opacidad se traducen al 25%. Esto significa que la imagen se mostrará como 1/4 de su transparencia normal. Totalmente opaco sin transparencia sería del 100%, mientras que 0% sería totalmente transparente. A continuación, para que la imagen quede clara (o más exactamente, para que se vuelva completamente opaca) cuando se coloca el mouse sobre ella, se agrega el :flotarpseudo-clase: .greydout: hover {-webkit-opacidad: 1;-moz-opacidad: 1;opacidad: 1;}
Notará que, para estos ejemplos, estamos utilizando las versiones prefijadas por el proveedor de la regla para garantizar la compatibilidad con versiones anteriores de las versiones anteriores de esos navegadores. Si bien esta es una buena práctica, la realidad es que la regla de opacidad ahora está bien soportada por los navegadores y es bastante seguro eliminar las líneas prefijadas de los proveedores. Sin embargo, tampoco hay ninguna razón para no incluir estos prefijos si desea garantizar la compatibilidad con 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 prefijo del estilo. Si implementara esto en un sitio, vería que este ajuste de opacidad es un cambio muy abrupto. Primero, es gris y luego no, sin estados intermedios entre esos dos. Es como un interruptor de luz - encendido o apagado. Esto puede ser lo que desea, pero también puede experimentar con un cambio que sea más gradual. Para agregar un efecto realmente agradable y hacer que este desvanecimiento sea gradual, desea agregar el transición
propiedad al .greydoutclase: .greydout {-webkit-opacidad: 0,25;-moz-opacidad: 0,25;opacidad: 0,25;-webkit-transición: toda la facilidad 3s;-moz-transición: facilidad 3s;-ms-transición: toda la facilidad 3s;-o-transición: toda la facilidad 3s;transición: toda la facilidad 3s;}
