Crear efectos de collage en el navegador con CSS

Sep 12, 2025

Cómo

[dieciséis]

Si alguna vez has deseado poder replicar los efectos de un tradicional. fabricante de collage en tus Diseños de sitios web , Este es el tutorial para ti.

El tutorial de diseño web verá tres propiedades CSS: máscara De ruta de clip y Forma exterior . Incluso si los has usado, no te preocupes. Mostraré ejemplos que lo ayudarán a crear efectos que probablemente no hayas visto en muchos sitios web.

¿Buscas un tipo diferente de tutorial? Ver Cómo hacer un collage de fotos en Photoshop . Y para guías útiles, vea nuestra selección de la parte superior. Creador de sitios web y Alojamiento web Servicio.

18 mejores ejemplos de animación CSS

Mi mayor inspiración en términos de usar las propiedades mencionadas son los collages tradicionales. Me preguntaba si era posible crearlos en un navegador web, sin usar ningún editores o software de gráficos. Con la magia de CSS, es totalmente factible! Otra bonificación de crearlos con código es tenerlos escalables, animados e interactivos. Antes de comenzar, asegúrese de tener lo siguiente:

Necesitará:

Su navegador web favorito y herramientas de desarrolladores: recomiendo usar Google Chrome, ya que admite todas las funciones que uso en este tutorial.
Un editor de código
Activos, como imágenes o archivos SVG, puede descargar los que estamos usando en este tutorial aquí [sesenta y cinco]

Máscara de imágenes que se superponen el texto.

Enmascaramiento es la primera característica que me gustaría mostrarle. Ayuda a construir formas y diseños más creativos en la web al contarle a su navegador qué elementos de activos deben ser visibles. Enmascaramiento se puede hacer de tres maneras diferentes: usando una imagen de raster (que está en formato PNG con partes transparentes); Gradientes de CSS; o elementos SVG. Tenga en cuenta que a diferencia de una imagen ráster típica, SVG se puede escalar o transformarse sin una pérdida significativa en calidad.

Lo que me gusta especialmente sobre el enmascaramiento es su capacidad para aplicar las mismas propiedades que para antecedentes - Podemos definir la posición, el tamaño y la repetición de una máscara, por ejemplo, usando: Máscara-repetición: sin repetición y Tamaño de máscara: cubierta .

Gracias a CSS enmascarando, podemos crear efectos más sofisticados en la web. Uno de ellos se puede encontrar en nuestro ejemplo, donde partes de una imagen cubren algún texto; Cuando un usuario se desplaza hacia arriba y hacia abajo en la página, algunas partes del texto se muestran / ocultan. Esto da la impresión de que el título de la página está ubicado detrás de las montañas. Para crear este efecto, se necesitan algunos trucos y la aplicación inteligente de las máscaras CSS nos ayudará a lograr eso.

Vamos a crear un encabezado con una imagen de fondo seleccionada y dos encabezados dentro. Uno de ellos será el principal (primer nivel de encabezado).

 & lt; encabezado y gt;
        & lt; h3 & gt; este es & lt; / h3 & gt;
        & lt; h1 & gt; & lt; span & gt; mi aventura & lt; / span & gt; & lt; / h1 & gt;
& lt; / encabezado y gt;

El texto del encabezado se mantendrá en el & lt; span & gt; etiqueta. No es algo común, sino, en este caso, estamos aplicando enmascaramiento hasta el encabezado, no al contenedor.

 encabezado {
    Ancho: 100VW;
    Altura: 80VH;
    TOP: 0;
    Izquierda: Auto;
    Fondo: URL (../ images / paisaje.jpg) Centro superior sin repetición;
    Tamaño de fondo: cubierta;
}
h1 {
    Máscara: URL (../ images / máscara.svg # Maskid);
    -Webkit-Mask: URL (../ images / paisaje-máscara.png)
centro superior sin repetición;
    Tamaño de máscara: cubierta;
    -El tamaño de la máscara de Webkit: cubierta;
    Ancho: 100VW;
    Altura: 80VH;
    Color: #fff;
    Tamaño de fuente: 100px;
    Posición: Relativo;
}
h1 span {
    Posición: fijo;
    Pantalla: bloque en línea;
    Text-alinec: Centro;
    Fuente-familia: 'Libre Baskerville', Serif;
    Ancho: 100VW;
    TOP: 80px;
    Estilo de fuente: cursiva;
}

Cortar imágenes usando CSS Clipping

Explamos otro ejemplo y descubra más sobre el recorte CSS. En resumen, el recorte define qué área de imagen debe ser visible. El recorte es similar a cortar trozos de papel. El límite de la forma se llama la ruta del clip: cualquier cosa fuera del camino estará oculta, mientras que cualquier cosa dentro del camino será visible. Con una ruta de clip, puede eliminar el fondo de su imagen, en lugar de usar archivos PNG pesados. Por esto necesitamos ya haber preparado la forma para el corte.

El objetivo en este ejercicio es para cerrar la planta de la imagen, eliminando el fondo. Podemos copiar el código SVG de nuestro archivo y le pegamos a un documento HTML. El camino del clip debe colocarse dentro & lt; defs & gt; & lt; / defs & gt; etiquetas

 & lt; svg & gt;
  & lt; defs & gt;
      & lt; clippath id = "Clip-Plant" & GT;
     & lt; ruta D = "M293.2,524.8c0,3.3,0 ... [y más números]" & gt;
     & lt; / Clippath & GT;
  & lt; / defs & gt;
& lt; / svg & gt;
& lt; div clase = "planta" & gt; & lt; / div & gt;

Más tarde, podemos hacer referencia fácilmente a la ruta definida en el código SVG agregando una Url función.

 .plant {
    Altura: 700px;
    Imagen - Imagen: URL (../ images / plant.jpg);
    Tamaño de fondo: cubierta;
    Posición: Relativo;
    Repetición de fondo: sin repetición;
    -Webkit-Clip-Ruta: URL ("# CLIP-PLANTE");
    Clip-ruta: URL ("# clip-planta");}

Piensa fuera de la caja

¿Quién dijo que los contenedores de texto siempre necesitan ser rectangulares? El contenido se puede cortar en todo tipo de formas diferentes aplicando Forma exterior y Forma interior Propiedades que le permiten envolver su contenido en torno a rutas personalizadas en CSS.

¿Entonces, cómo funciona? Simplemente aplique Forma exterior a la imagen o contenedor flotante dada. Es importante tener en cuenta que el flotador La propiedad y las dimensiones del elemento, se deben definir altura o ancho, de lo contrario no funciona. Puedes usar el URL () función, que permite el Forma exterior Propiedad para definir una forma de elemento en función de la ruta desde un archivo SVG.

 .A-letra {
    imagen - Imagen: URL ('../ images / dorado-bg.jpg');
    Tamaño de fondo: 1000px;
    -Webkit-Mask-Image: URL ('/./ Images / A-letra2.svg ');
    -Webkit-Mask-Composite: Source-Out;
    -Webkit-Mask-Repetir: no-repetición;
    -Webkit-Mask Tamaño: 300px;
    Ancho: 100%;
    Altura: 60VH;
    Posición: Relativo;
    TOP: 0px;
    Accesorio de fondo: fijo;
    flotador izquierdo;
    Pantalla: bloque en línea;
    Ancho: 310px;
    Margen de forma: 23px;
    Forma al aire libre: URL ('../ images / máscara.svg');
}

los Forma exterior La propiedad no cambia nada de un elemento que no sea su área de flotación. Esto significa que cualquier bordes y imágenes de fondo no se adaptarán a la forma creada en el elemento. Esta es la razón por la que también necesitamos aplicar el máscara Propiedad: para cortar el fondo del elemento para que coincida con la forma definida.

Una cosa importante a tener en cuenta es que el Forma exterior La función funciona solo con archivos habilitados para CORS. CORS significa intercambio de recursos de origen cruz.

En este caso particular, la mejor manera de verlo es usar localhost, de lo contrario no funcionará si simplemente lo abre en su navegador.

Al experimentar, por favor, tenga en cuenta que no todas las características mencionadas están respaldadas por todos los navegadores, por lo que vale la pena revisarlos aquí [sesenta y cinco] . El último ejemplo no funciona en Firefox, Opera e IE, sino que, con suerte, estará disponible pronto para todos los navegadores. Y si tiene muchos documentos para almacenar su proyecto, manténgalos seguros en seguros almacenamiento en la nube .

Leer más:

Comience con fuentes variables en CSS
Una guía integral para usar la cuadrícula CSS.
Cómo las nuevas reglas de CSS para probar ahora

Crear efectos de collage en el navegador con CSS

Necesitará:

Máscara de imágenes que se superponen el texto.

Cortar imágenes usando CSS Clipping

Piensa fuera de la caja

Cómo - Artículos más populares

Cómo flipar una capa en Photoshop: una guía completa

Cómo construir un blog con Jekyll

8 Reglas de oro de diseño móvil

Cómo comprimir las imágenes: la guía del diseñador web

Cómo construir una aplicación AR

Cómo moverse entre DAZ Studio y Zbrush

Cómo construir mundos para el cine

Cómo crear manga con un Wild West Twist

Categorías