Creare effetti collage nel browser con CSS

Sep 12, 2025

Come si fa

Se hai mai desiderato, potresti replicare gli effetti di un tradizionale Collage Maker. nel tuo Layout del sito web , questo è il tutorial per te.

Il tutorial del web design esaminerà tre proprietà CSS: maschera-immagine , clip-path e forma di forma . Anche se li hai usati, non preoccuparti. Mostrerò esempi che ti aiuteranno a creare effetti che probabilmente non hai visto su molti siti web.

Alla ricerca di un diverso tipo di tutorial? Vedere Come creare un collage di foto in Photoshop . E per le pratiche guide, vedi la nostra scelta della cima Builder del sito web e web hosting servizio.

18 esempi di animazione Top CSS

La mia più grande ispirazione in termini di utilizzo delle proprietà menzionate è il collage tradizionale. Mi stavo chiedendo se fosse possibile crearli in un browser Web, senza utilizzare editor o software grafici. Con la magia del CSS, è totalmente fattibile! Un altro bonus di creazione con il codice è li ha risolti, animati e interattivi. Prima di iniziare, assicurati di avere quanto segue:

Avrai bisogno:

Il tuo browser Web preferito e gli strumenti per sviluppatori - consiglio di utilizzare Google Chrome poiché supporta tutte le funzionalità che uso in questo tutorial
Un editor di codice
Attività come immagini o file SVG: puoi scaricare quelli che stiamo usando in questo tutorial Qui

Maschera immagini che si sovrappongono al testo

CSS masks example — Le maschere CSS consentono di creare effetti speciali - come abilitare una direzione del sito per apparire e scomparire selettivamente in quanto l'utente scorre su e giù nella pagina (contrasto questa immagine a quella sopra)

Il mascheramento è la prima caratteristica che vorrei mostrarti. Aiuta a costruire forme e layout più creativi sul web dicendo al tuo browser quali elementi di attività dovrebbero essere visibili. Il mascheramento può essere fatto in tre modi diversi: utilizzando un'immagine raster (che è in formato PNG con parti trasparenti); Gradienti CSS; o elementi svg. Si noti che a differenza di un'immagine tipica raster, SVG può essere ridimensionata o trasformata senza una perdita significativa di qualità.

Quello che mi piace particolarmente il mascheramento è la sua capacità di applicare le stesse proprietà di sfondo - Possiamo definire la posizione, la dimensione e la ripetizione di una maschera, ad esempio, utilizzando: Maschera-ripetizione: no-ripetizione e Dimensione della maschera: copertina .

Grazie al mascheramento CSS possiamo creare effetti più sofisticati sul web. Uno di questi può essere trovato nel nostro esempio, dove le parti di un'immagine coprono del testo; Quando un utente scorre su e giù nella pagina vengono visualizzate alcune porzioni del testo / nascosto. Questo dà l'impressione che il titolo della pagina si trova dietro le montagne. Per creare questo effetto, sono necessari alcuni trucchi e l'applicazione intelligente delle maschere CSS ci aiuterà a raggiungerlo.

Creiamo un'intestazione con un'immagine di sfondo selezionata e due intestazioni all'interno. Uno di questi sarà il primo (primo livello di intestazione).

 & lt; header & gt;
        & lt; h3 & gt; questo è & lt; / h3 & gt;
        & lt; h1 & gt; & lt; span & gt; la mia avventura & lt; / span & gt; & lt; / h1 & gt;
& lt; / header & gt;

Il testo della rubrica sarà tenuto nel & lt; span & gt; etichetta. Non è una cosa comune ma, in questo caso, stiamo applicando il mascheramento alla voce, non al contenitore.

 header {
    Larghezza: 100VW;
    Altezza: 80vh;
    Top: 0;
    a sinistra: Auto;
    Sfondo: URL (../ Immagini / Landscape.jpg) Centro Top No-ripetizione;
    Dimensioni di sfondo: copertina;
}
H1 {
    Maschera: URL (../ Immagini / Mask.svg # maskid);
    -Webkit-Mask: URL (../ Immagini / Paesaggio-Mask.png)
Centro Top No-ripetere;
    Dimensioni della maschera: copertura;
    -Webkit-mask-size: copertura;
    Larghezza: 100VW;
    Altezza: 80vh;
    Colore: #FFFF;
    Dimensioni del carattere: 100px;
    Posizione: relativo;
}
H1 span {
    Posizione: fissa;
    display: blocco in linea;
    Text-Align: Center;
    Fammon-family: 'Libre baskerville', serif;
    Larghezza: 100VW;
    Top: 80px;
    Font-Style: Italic;
}

Taglia le immagini usando il clipping CSS

CSS clipping example — I percorsi di ritaglio consentono di tagliare l'immagine dell'impianto in questo esempio

Esploriamo un altro esempio e scopriamo di più sul clipping CSS. In breve, il clipping definisce quale area dell'immagine dovrebbe essere visibile. Il ritaglio è simile a tagliare pezzi di carta. Il confine della forma è chiamato il percorso del clip: qualsiasi cosa al di fuori del percorso sarà nascosta, mentre qualsiasi cosa all'interno del percorso sarà visibile. Con un percorso clip è possibile rimuovere lo sfondo dall'immagine, invece di utilizzare file PNG pesanti. Per questo abbiamo bisogno di aver già preparato la forma per il taglio.

L'obiettivo in questo esercizio è di agganciare la pianta fuori dall'immagine, rimuovendo lo sfondo. Possiamo copiare il codice SVG dal nostro file e incollarlo su un documento HTML. Il percorso della clip deve essere posizionato all'interno & lt; defs & gt; & lt; / defs & gt; Tag.

 & lt; svg & gt;
  & lt; defs & gt;
      & lt; clippath id = "clip-stamp" & gt;
     & lt; percorso d = "m293.2,524.8c0,3.3,0 ... [e più numeri]" & gt;
     & lt; / clippath & gt;
  & lt; / defs & gt;
& lt; / svg & gt;
& lt; div class = "pianta" e gt; & lt; / div & gt;

Più tardi possiamo facilmente fare riferimento al percorso definito nel codice SVG aggiungendo a URL funzione.

 .Plant {
    Altezza: 700 px;
    Sfondo-Image: URL (../ Immagini / Plant.jpg);
    Dimensioni di sfondo: copertina;
    Posizione: relativo;
    sfondo-ripetizione: no-ripetizione;
    -Webkit-clip-path: URL ("Plant" # clip ");
    clip-path: URL ("Plant" # clip ");}

Pensa fuori dagli schemi

clipping in CSS example — Puoi usare **forma-dentro.** e **forma di forma** Per creare tutti i tipi di forme

Chi ha detto che i contenitori di testo devono sempre essere rettangolari? Il contenuto può essere tagliato in tutti i tipi di forme diverse applicando forma di forma e forma-dentro. Proprietà che ti permettono di avvolgere i tuoi contenuti attorno ai percorsi personalizzati in CSS.

Quindi, come funziona? Basta applicare forma di forma all'immagine o al contenitore floated dato. È importante notare che il galleggiante proprietà e le dimensioni dell'elemento - l'altezza o la larghezza - devono essere definite altrimenti non funziona. Puoi usare il URL () funzione, che consente il forma di forma Proprietà per definire una forma di elemento in base al percorso da un file SVG.

 .a-lettera {
    sfondo - Immagine: URL ('../ images / Gold-bg.jpg');
    Dimensioni di sfondo: 1000 px;
    -Webkit-maschera-Image: URL ('../ Immagini / A-LETTER2.SVG');
    -Webkit-maschera-composito: fonte-out;
    -Webkit-maschera-ripetizione: no-ripetizione;
    -Webkit-mask-size: 300 px;
    Larghezza: 100%;
    Altezza: 60VH;
    Posizione: relativo;
    Top: 0px;
    Attacco di sfondo: fisso;
    Galleggiante: sinistra;
    display: blocco in linea;
    Larghezza: 310 px;
    Margine forma: 23px;
    Shape-outside: URL ('../ images / mask.svg');
}

Il forma di forma La proprietà non cambia nulla su un elemento diverso dalla sua area galleggiante. Ciò significa che eventuali confini e immagini di sfondo non si adattano alla forma creata sull'elemento. Questo è il motivo per cui abbiamo anche bisogno di applicare il maschera-immagine Proprietà - per tagliare lo sfondo dell'elemento per abbinare la forma definita.

Una cosa importante da notare è che il forma di forma La funzione funziona solo con i file abilitati per i cors. Le corriere rappresenta la condivisione delle risorse di origine croce.

In questo caso particolare il modo migliore per vederlo è utilizzare localhost, altrimenti non funzionerà se lo aprirà nel tuo browser.

Quando si sperimenta, si prega di tenere presente che non tutte le funzionalità menzionate sono supportate da tutti i browser, quindi vale la pena controllarli Qui . L'ultimo esempio non funziona in Firefox, Opera e IE ma spero che sarà disponibile presto per tutti i browser. E se hai un sacco di documenti da archiviare per il tuo progetto, tenerli al sicuro in sicurezza deposito cloud. .

Per saperne di più:

Iniziare con font variabili in CSS
Una guida completa per usare la griglia CSS
Come le nuove regole CSS prova ora

Creare effetti collage nel browser con CSS

Avrai bisogno:

Maschera immagini che si sovrappongono al testo

Taglia le immagini usando il clipping CSS

Pensa fuori dagli schemi

Come si fa - Articoli più popolari

Cosa c'è dentro angolare 8?

Come creare erba 3D

Inizia con diffuse

4 gradini per VDM migliore con Zbrush

Come creare effetti sorprendenti con forme CSS

Come dipingere una scena foresta fantasy da sogno

Come simulare le esplosioni in Maya

Come nominare la tua agenzia di progettazione Web

Categorie