Post Top Ad

Your Ad Spot

martes, 21 de abril de 2020

5 hermosos efectos de imagen con formas y filtros CSS

Hoy hemos preparado cinco imágenes de fondo que muestran el poder del CSS moderno. Se pueden utilizar como fondos de escritorio, páginas de destino llamativas e incluso como pósters impresos. En el siguiente artículo, también repasaremos algunas de las técnicas clave de CSS, para que pueda personalizarlas a su gusto o hacer las suyas desde cero.

Los diseños

Un Polyscape (poly = many, scape = scenery) es una imagen que contiene múltiples imágenes mezcladas en una, creando imágenes surrealistas muy agradables. Por lo general, dicho diseño se realiza en Photoshop u otro software de edición de imágenes, pero gracias al arsenal cada vez mayor de propiedades CSS, ¡ahora se pueden crear impresionantes paisajes de polígonos utilizando 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 poliscapes exportados a imágenes HD se pueden descargar como un archivo .zip desde el botón Descargar cerca de la parte superior de esta página.
La demostración utiliza algunas propiedades experimentales de CSS que podrían no funcionar en todos los navegadores. Para una experiencia completa, es mejor abrirlo en Chrome.
mountain-polyscape.jpg
Polyscape de una montaña con formas y filtros CSS.
Hacer estos polipaisajes fue muy fácil y nos divertimos mucho en el proceso. Para los fondos utilizamos imágenes de Unsplash . Todo lo demás se realiza a través de varias formas CSS, transformaciones y filtros.

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 heightwidthPara ponerlos de lado usamos transform: rotate(45deg);.
  • Círculos: las formas circulares en CSS se pueden crear agregando border-radius: 50%;a una forma cuadrada.
  • Triángulos y diamantes - Posible gracias a clip-pathRecientemente hemos escrito sobre esto en detalle en nuestro artículo Triángulos CSS sin trucos feos . ¡Echale un vistazo!
Otra forma interesante de CSS que queríamos hacer es un cuadrado que sea transparente por dentro pero que tenga una imagen como borde:
border-image.jpg
Cuadrados inclinados con fondo transparente y borde de imagen.
Resulta que hay una especificación CSS que hace exactamente eso: se llama border-imagey toma como parámetros la ruta a una imagen, el tamaño del borde y cómo colocar la imagen.
fondo : transparente ;
borde : 25 px  sólido  transparente ;
border-image : url ( nubes .jpg ) 25 tramo ;

Filtros CSS

Dado que estamos agregando imágenes sobre un fondo de 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 la filterpropiedad.
Nos permite cambiar el tono de un color a otro, aumentar el contraste, hacer que todo sea en blanco y negro y otros. Aquí hay una lista de todos los filtros CSS disponibles:
  • escala de grises
  • rotar en tono
  • invertir
  • contraste
  • difuminar
  • brillo
  • opacidad
  • saturar
  • sepia
  • sombra
Podemos combinar tantos filtros como queramos hasta obtener el resultado deseado:
filtro : tono-rotar (60 grados ) contraste (200%) desenfoque (2 px );

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas