Bonitos efectos para web usando solamente CSS, es decir, no hay que instalar "nada"
Saludos a todos nuevamente:
Hace poco más de 20 años que me dedico a hacer páginas webs, comencé como hobby porque quería saber como se hacen y luego comencé realizando algunas porque quería compartir mis aficiones con otros.
En aquel entonces usaba Internet Explorer y el desaparecido Netscape Navigator para visualizar las páginas web, recuerdo que quería anexar varios efectos vistosos a mis desarrollos, con algunos tuve éxito, pero con otros no pues la única manera de llevarlos a cabo era usando Java (Applets) o usando Flash.
Los dos mecanismos eran bastante buenos, pero tenían el inconveniente de "tener que instalar algo" para que funcionaran. Esto bajo Windows 98/Me no era problema, pero no así en Windows XP, recuerdo que en aquel entonces teníamos que ir a un cyber café para conectarnos a Internet porque no teníamos ese servicio en casa y muchas veces el administrador no permitía instalar nada por temor a infectar las computadoras con virus (una buena práctica por cierto) y a veces no era muy flexible para permitir instalar complementos.
Hoy en día la situación es muy diferente, pues los navegadores web apuestan por "no tener que instalar nada" y gracias al uso de hojas de estilo es posible "crear" hasta cierto punto algunos de los efectos que en aquel entonces solo era posible usando Flash o Java. Les comparto este enlace "10 efectos en imágenes con CSS que querrás en tu web" (https://www.enriquejros.com/efectos-imagenes-css/) que muestra como implementar algunos efectos sencillos, pero bastante vistosos, ejemplo:
.efecto:hover
{
filter: grayscale(80%);
}
Colocaremos esto dentro de la etiqueta style de nuestro documento o dentro del archivo .css que estemos anexando, posteriormente agregaremos la expresión class="efecto" dentro de la etiqueta imagen en el documento donde queramos agregar el efecto "escala de grises" a una imagen cuando el puntero del mouse pase sobre ella.
El código fuente completo sería el siguiente:
Esto mostraría la siguiente imagen:
Y al pasar el puntero del mouse sobre la imagen la imagen cambia a color gris:
Espero les sea de utilidad este código fuente, les recomiendo visitar el enlace mencionado, hay muchos efectos simples que podemos usar en nuestros proyectos para darle más presentación, gracias por su visita.