logo

5 hermosos efectos de imagen con formas y filtros CSS

Hoy hemos preparado para ti cinco imágenes de fondo que muestran el poder del CSS moderno. Se pueden usar como fondos de escritorio, páginas de inicio llamativas e incluso como carteles impresos. En el siguiente artículo, también repasaremos algunas de las técnicas clave de CSS, para que puedas personalizarlas a tu gusto o crear las tuyas propias desde cero.

Los Diseños

Un Polyscape (poly =muchos, scape =paisaje) es una imagen que contiene varias imágenes mezcladas en una, creando imágenes surrealistas muy agradables. Por lo general, estos diseños se realizan en Photoshop u otro software de edición de imágenes, pero gracias al creciente arsenal de propiedades CSS, ¡ahora se pueden crear asombrosos paisajes poligonales usando nada más que tecnologías web simples!

Puede ver los diseños en una aplicación de demostración que creamos. El código fuente completo más todos los polyscapes exportados a imágenes HD se pueden descargar como un archivo .zip desde Descargar cerca de la parte superior de esta página.

Hacer estos polyscapes fue muy fácil y nos divertimos mucho en el proceso. Para los fondos usamos imágenes de Unsplash. Todo lo demás se realiza a través de varias formas, transformaciones y filtros CSS.

Formas CSS

Los diseños utilizan una variedad de formas geométricas hechas de CSS. Así es como se hacen:

  • Cuadrados:los bloques HTML son rectangulares de forma predeterminada. Solo elige height y width . Para ponerlos de lado usamos transform: rotate(45deg); .
  • Círculos:se pueden crear formas circulares en CSS agregando border-radius: 50%; a una forma cuadrada.
  • Triángulos y Diamantes - Posible gracias a clip-path . Recientemente escribimos sobre esto en detalle en nuestro artículo CSS Triangles Without Ugly Hacks. ¡Compruébalo!

Otra forma CSS interesante que queríamos hacer es un cuadrado transparente por dentro pero con una imagen como borde:

Resulta que hay una especificación CSS que hace exactamente eso:se llama border-image y toma como parámetros la ruta a una imagen, el tamaño del borde y cómo colocar la imagen.

background: transparent;
border: 25px solid transparent;
border-image: url(clouds.jpg) 25 stretch;

Filtros CSS

Dado que estamos agregando imágenes sobre el fondo de una imagen, en muchos casos necesitamos aplicar algunos filtros para que las dos vistas se destaquen. La mayoría de los navegadores modernos admiten libremente esta característica bajo el filter propiedad.

Nos permite cambiar la tonalidad de un color a otro, potenciar el contraste, poner todo en blanco y negro, y demás. Aquí hay una lista de todos los filtros CSS disponibles:

  • escala de grises
  • giro de tono
  • invertir
  • contraste
  • difuminar
  • brillo
  • opacidad
  • saturar
  • sepia
  • sombra paralela

Podemos combinar tantos filtros como queramos hasta conseguir el resultado deseado:

filter: hue-rotate(60deg) contrast(200%) blur(2px);

Conclusión

Esperamos que haya disfrutado de nuestro pequeño experimento CSS. La demostración y todo el código son 100 % gratuitos y tiene todos los derechos para usar, compartir y cambiar los diseños (nuestra licencia).