Skapa collage effekter i webbläsaren med CSS

Feb 2, 2026

Hur

Om du någonsin önskat att du kunde replikera effekterna av en traditionell collage maker i din Webbplatslayouter , det här är handledningen för dig.

Webbdesignen Tutorial kommer att titta på tre CSS-egenskaper: mask-bild , klämväg och form-utanför . Även om du har använt dem, oroa dig inte. Jag ska visa exempel som hjälper dig att skapa effekter som du förmodligen inte har sett på många webbplatser.

Letar du efter en annan typ av handledning? Ser Hur man gör ett fotocollage i Photoshop . Och för praktiska guider, se vår plocka av toppen Website Builder och webbhotell service.

18 Topp CSS-animationsexempel

Min största inspiration när det gäller att använda de nämnda egenskaperna är traditionella collage. Jag undrade om det var möjligt att skapa dem i en webbläsare, utan att använda några grafikredaktörer eller programvara. Med den magiska av CSS är det helt genomförbart! En annan bonus att skapa dem med kod är att ha dem skalbara, animerade och interaktiva. Innan du börjar, se till att du har följande:

Du kommer behöva:

Din favoritwebbläsare och utvecklarverktyg - Jag rekommenderar att du använder Google Chrome eftersom den stöder alla funktioner som jag använder i den här handledningen
En kodredigerare
Tillgångar som bilder eller SVG-filer - du kan ladda ner de som vi använder i den här handledningen här

Maskbilder som överlappar texten

CSS masks example — CSS-masker gör att du kan skapa specialeffekter - som att aktivera en webbplatsrubrik för att selektivt visas och försvinna när användaren rullar upp och ner på sidan (kontrast den här bilden till den ovanstående)

Masking är den första funktionen jag skulle vilja visa dig. Det bidrar till att bygga mer kreativa former och layouter på nätet genom att berätta för din webbläsare som tillgångselement ska vara synliga. Maskering kan göras på tre olika sätt: med en rasterbild (det vill säga i PNG-format med transparenta delar); CSS-gradienter; eller SVG-element. Observera att till skillnad från en typisk rasterbild kan SVG skalas eller transformeras utan en betydande kvalitetsförlust.

Vad jag särskilt tycker om att maskera är dess förmåga att tillämpa samma egenskaper som för bakgrund - Vi kan definiera en maskens position, storlek och repetition, till exempel med: Mask-Repeat: No-Repeat och Maskstorlek: Skydd .

Tack vare CSS-maskering kan vi skapa mer sofistikerade effekter på webben. En av dem finns i vårt exempel, där delar av en bild täcker lite text; När en användare rullar upp och ner på sidan visas några delar av texten / dolda. Detta ger intrycket att sidtiteln är belägen bakom bergen. För att skapa denna effekt behövs några knep och den smarta tillämpningen av CSS-masker hjälper oss att uppnå det.

Låt oss skapa en rubrik med en vald bakgrundsbild och två rubriker inuti. En av dem kommer att vara den primära (första nivån).

 & lt; header & gt;
        & lt; H3 & GT; detta är & lt; / h3 & gt;
        & lt; H1 & GT; My Adventure & LT; / SPAN & GT; & LT; / H1 & GT;
& LT; / Header & GT;

Texten på rubriken kommer att hållas i & lt; span & gt; märka. Det är inte en vanlig sak, men i det här fallet tillämpar vi maskering till rubrik, inte till behållaren.

 Header {
    Bredd: 100vw;
    Höjd: 80VH;
    Topp: 0;
    Vänster: Auto;
    Bakgrund: URL (.. / Bilder / Landscape.jpg) Center Top No-Repeat;
    Bakgrundsstorlek: Skydd;
}
h1 {
    Mask: URL (.. / Bilder / Mask.svg # Maskid);
    -WebKit-Mask: URL (../ Bilder / Landscape-Mask.png)
Center Top No-Repeat;
    Maskstorlek: Skydd;
    -WebKit-Mask-storlek: lock;
    Bredd: 100vw;
    Höjd: 80VH;
    Färg: #fff;
    FONT-STORLEK: 100px;
    position: släkting;
}
H1 Span {
    Position: Fast;
    Visa: Inline-block;
    Text-Justera: Center;
    Font-familj: "Libre Baskerville", Serif;
    Bredd: 100vw;
    Topp: 80px;
    Font-stil: kursiv;
}

Klipp ut bilder med CSS-klippning

CSS clipping example — Klippvägar gör att du kan klippa ut växtbilden i det här exemplet

Låt oss utforska ett annat exempel och ta reda på mer om CSS-klippning. Kort sagt, klipp definierar vilket bildområde som ska vara synligt. Clipping liknar hackar bitar av papper. Formens gräns kallas klippvägen: allt utanför vägen kommer att döljas, medan något inuti vägen kommer att vara synligt. Med en klippväg kan du ta bort bakgrunden från din bild, istället för att använda tunga PNG-filer. För detta måste vi redan ha förberett formen för skärningen.

Målet i denna övning är att klippa växten ur bilden, ta bort bakgrunden. Vi kan kopiera SVG-kod från vår fil och klistra in den till ett HTML-dokument. Klippvägen måste placeras inom & lt; defs & gt; & lt; / defs & gt; Taggar.

 & lt; SVG & GT;
  & lt; defs & gt;
      & lt; Clippath ID = "Clip-plant" & GT;
     & lt; väg d = "m293.2.524.8c0,3.3,0 ... [och flera nummer]" & gt;
     & lt; / Clippath & GT;
  & lt; / defs & gt;
& LT; / SVG & GT;
& lt; div class = "växt" & gt; & lt; / div & gt;

Senare kan vi enkelt referera till den väg som definieras i SVG-koden genom att lägga till en Url fungera.

 .Plant {
    Höjd: 700px;
    Bakgrund-bild: URL (.. / bilder / plant.jpg);
    Bakgrundsstorlek: Skydd;
    position: släkting;
    BAKGRUND-REPEAT: NO-REPEAT;
    -WebKit-Clip-Path: URL ("# Clip-Plant");
    Clip-path: URL ("# clip-plant");}

Tänk utanför lådan

clipping in CSS example — Du kan använda **invändig** och **form-utanför** Att skapa alla typer av former

Vem sa att textbehållare alltid måste vara rektangulära? Innehållet kan skäras i alla slags olika former genom att applicera form-utanför och invändig Egenskaper som gör det möjligt för dig att slå ditt innehåll kring anpassade vägar i CSS.

Så hur fungerar det? Ansök helt enkelt form-utanför till den givna flytande bilden eller behållaren. Det är viktigt att notera att flyta egendom och dimensionerna av elementet - antingen höjd eller bredd - måste definieras annars fungerar det inte. Du kan använda URL () funktion, som gör det möjligt för form-utanför egendom för att definiera en elementform baserat på banan från en SVG-fil.

 .A-Letter {
    Bakgrund-bild: URL ('.. / bilder / guld-bg.jpg');
    Bakgrundsstorlek: 1000px;
    -WebKit-Mask-bild: URL ('../ Bilder / A-Letter2.svg');
    -WebKit-Mask-Composite: Sour-out;
    -WebKit-Mask-Repeat: No-Repeat;
    -WebKit-Mask-storlek: 300px;
    Bredd: 100%;
    Höjd: 60VH;
    position: släkting;
    Topp: 0px;
    Bakgrundsfäste: Fast;
    flyta till vänster;
    Visa: Inline-block;
    Bredd: 310px;
    Formmarginal: 23px;
    Form-utanför: URL ('.. .. / bilder / mask.svg');
}

De form-utanför Egenskapen förändrar ingenting om ett annat element än dess floatområde. Det innebär att inga gränser och bakgrundsbilder inte kommer att anpassa sig till den form som skapats på elementet. Detta är anledningen till att vi också behöver tillämpa mask-bild egendom - för att skära ut bakgrunden till elementet som matchar den definierade formen.

En viktig sak att notera är att form-utanför Funktionen fungerar endast med CORS-aktiverade filer. Cors står för Cross Origin Resource Sharing.

I det här fallet är det bästa sättet att visa det att använda localhost, annars fungerar det inte om du bara öppnar den i din webbläsare.

När du experimenterar, kom ihåg att inte alla de nämnda funktionerna stöds av alla webbläsare, så det är värt att kolla dem här . Det senaste exemplet fungerar inte i Firefox, Opera och dvs men förhoppningsvis kommer det att vara tillgängligt snart för alla webbläsare. Och om du har många dokument att lagra för ditt projekt, behåll dem säkra molnlagring .

Läs mer:

Kom igång med variabla teckensnitt i CSS
En omfattande guide till att använda CSS-rutnät
Hur nya CSS regler ska försöka nu

Skapa collage effekter i webbläsaren med CSS

Du kommer behöva:

Maskbilder som överlappar texten

Klipp ut bilder med CSS-klippning

Tänk utanför lådan

Hur - Mest populära artiklar

Skapa en gammal skola anaglyph effekt

Bygg terräng i Houdini 17

17 sätt att dra bättre varelser

Använd diagram.js för att göra data till interaktiva diagram

Hur man skannar en person på mindre än fem minuter

Hur illustrerar du för en händelse

10 Gyllene regler för responsiva SVGS

Utveckla dina karikatiska färdigheter

Kategorier