Inteligente: 20 efectos de imagen con CSS
Los modos de fusión y los filtros CSS permiten efectos que antes no eran posibles. Al aplicar estas nuevas opciones a las imágenes, puede crear efectos aún más impresionantes apilando o repitiendo múltiples atributos de manera inteligente. Y todo esto se hace de una manera no destructiva.
Bennett Feely y sus fragmentos de código
Bennett Feely de Pittsburgh, Pensilvania y su proyecto Image-Effects on Github proporcione un gran ejemplo de los efectos que se pueden lograr con un uso inteligente de combinaciones o repeticiones de diferentes atributos CSS modernos, para los cuales no habría utilizado CSS puro hasta ahora.
Bennett ha construido veinte efectos. Todos ellos se muestran mientras se aplican a la misma imagen original, así como con el fragmento de código requerido correspondiente en CSS y SCSS. Puede copiar los fragmentos directamente desde el página de demostración, o cambia a Codepen, donde puedes jugar con la configuración y una vista previa en vivo.
Bennett también proporciona todos los efectos como una biblioteca CSS, que es fácil de integrar en sus proyectos y solo pesa 1300 bytes cuando se comprime. Eso sí, trabajar con la versión sin comprimir de 12,8 kilos es más cómodo 😉
En general, es posible utilizar los efectos de inmediato. Sin embargo, Bennett recomienda acertadamente tocar ciertos parámetros, según la imagen que desee mostrar.
Image-Effects de Bennett usa @supports para la detección de características. Cuando se detecta que un navegador no puede mostrar los atributos y valores establecidos, la imagen se muestra sin los efectos. Definitivamente podemos estar de acuerdo con este tipo de respaldo.
La aplicación es así de fácil
Los efectos individuales se definen como clases, que usted aplica a sus imágenes en consecuencia. La forma más fácil de hacer esto es etiquetar un contenedor Div con la clase respectiva y colocar su imagen dentro.

Para evitar efectos iniciales extraños, debe asignar los valores correctos de ancho y alto a su imagen. De esta forma, te aseguras de que el navegador utilizará el tamaño de imagen correcto como marcador de posición de inmediato.
#Inteligente #efectos #imagen #con #CSS