Collage-effecten maken in de browser met CSS

Sep 16, 2025

Procedures

Als je ooit wenste dat je de effecten van een traditioneel kon repliceren collage maker in uw Website-lay-outs , dit is de tutorial voor jou.

De tutorial Web Design zal naar drie CSS-eigenschappen bekijken: masker-afbeelding klempad en buitenshuis Zelfs als je ze hebt gebruikt, maak je geen zorgen. Ik zal voorbeelden laten zien die je helpen bij het creëren van effecten die je waarschijnlijk niet op veel websites hebt gezien.

Op zoek naar een ander type tutorial? Zien Hoe maak je een fotocollage in Photoshop En voor handige gidsen, zie onze keuze van de bovenkant website bouwer en web hosting onderhoud.

18 TOP CSS-animatievoorbeelden

Mijn grootste inspiratie in termen van het gebruik van de genoemde eigenschappen is traditionele collages. Ik vroeg me af of het mogelijk was om ze in een webbrowser te maken zonder gebruik te maken van grafische editors of software. Met de magie van CSS is het totaal uitvoerbaar! Een andere bonus van het maken van hen met code is ze schaalbaar, geanimeerd en interactief. Voordat u begint, moet u ervoor zorgen dat u het volgende hebt:

Je zal nodig hebben:

Uw favoriete webbrowser- en ontwikkelaarstools - Ik raad aan Google Chrome te gebruiken omdat het alle functies die ik in deze tutorial gebruik, ondersteunt
Een code-editor
Activa zoals afbeeldingen of SVG-bestanden - u kunt degenen downloaden die we gebruiken in deze tutorial hier

Maskeer afbeeldingen die tekst overlappen

CSS masks example — Met CSS-maskers kunt u speciale effecten maken - zoals het inschakelen van een site-kop om selectief te verschijnen en te verdwijnen terwijl de gebruiker op en neer is op de pagina (deze afbeelding hierboven weergeeft)

Masking is de eerste functie die ik je graag zou willen laten zien. Het helpt om meer creatieve vormen en lay-outs op het web te bouwen door uw browser te vertellen welke activumelementen zichtbaar moeten zijn. Masking kan op drie verschillende manieren worden gedaan: met behulp van een rasterafbeelding (dat is in PNG-indeling met transparante onderdelen); CSS-gradiënten; of SVG-elementen. Merk op dat in tegenstelling tot een typisch rasterbeeld, SVG kan worden geschaald of getransformeerd zonder een aanzienlijk verlies in kwaliteit.

Wat ik vooral leuk vind aan maskering, is het vermogen om dezelfde eigenschappen toe te passen als voor achtergrond - We kunnen bijvoorbeeld de positie, grootte en herhaling van een masker definiëren, met behulp van: MASKER-REPEAT: NO-REPEAT en Maskerformaat: Cover

Dankzij CSS-maskering kunnen we meer geavanceerde effecten op het web creëren. Een van hen is te vinden in ons voorbeeld, waarbij delen van een afbeelding wat tekst bedekken; Wanneer een gebruiker op en omlaag scrolt, worden sommige delen van de tekst weergegeven / verborgen. Dit geeft de indruk dat de paginatitel zich achter de bergen bevindt. Om dit effect te creëren, zijn sommige trucs nodig en zal de slimme toepassing van CSS-maskers ons helpen om dat te bereiken.

Laten we een koptekst maken met een geselecteerde achtergrondafbeeldingen en twee headers binnenin. Een van hen is de primaire (eerste niveau van rubriek).

 & lt; header & gt;
        & LT; H3 & GT; Dit is & LT; / H3 & GT;
        & LT; H1 & GT; & LT; Span & GT; My Adventure & LT; / Span & GT; & LT; / H1 & GT;
& LT; / Header & GT;

De tekst van de kop wordt bewaard in de & LT; Span & GT; label. Het is niet gewoon, maar in dit geval brengen we maskering aan op kop, niet op de container.

 Header {
    Breedte: 100VW;
    Hoogte: 80VH;
    Top: 0;
    Links: Auto;
    ACHTERGROND: URL (../ Afbeeldingen / landschap.jpg) Center Top No-Repeat;
    Achtergrondformaat: dekking;

H1 {
    Mask: URL (../ Afbeeldingen / masker.SVG # MASKID);
    -Webkit-Mask: URL (../ Afbeeldingen / landschap-masker.png)
middentop no-herhaal;
    Maskerformaat: dekking;
    -Webkit-Mask-Size: Cover;
    Breedte: 100VW;
    Hoogte: 80VH;
    Kleur: #fff;
    FONT-SIZE: 100PX;
    Positie: familielid;

H1-overspanning {
    Positie: vastgesteld;
    Display: Inline-Block;
    Tekst-Uitlijnen: Centrum;
    Font-familie: 'Libre Baskerville', Serif;
    Breedte: 100VW;
    Top: 80px;
    Font-stijl: cursief;

Knip de afbeeldingen uit met CSS Clipping

CSS clipping example — Uitknippaden stellen u in staat om de plantenafbeelding in dit voorbeeld uit te knippen

Laten we een ander voorbeeld verkennen en meer weten over CSS-knippen. Kortom, het knippen definieert welk beeldgebied zichtbaar moet zijn. Clipping is vergelijkbaar met het hakken van stukjes papier. De grens van de vorm wordt de clippad genoemd: alles buiten het pad zal worden verborgen, terwijl alles in het pad zichtbaar zal zijn. Met een clippad kunt u de achtergrond van uw afbeelding verwijderen, in plaats van zware PNG-bestanden te gebruiken. Hiervoor moeten we de vorm al hebben voorbereid voor de uitgesneden.

Het doel in deze oefening is om de plant uit het beeld te klemmen, de achtergrond te verwijderen. We kunnen SVG-code uit ons bestand kopiëren en plakken in een HTML-document. Het clippad moet binnen worden geplaatst & LT; DEFS & GT; & LT; / DEFS & GT; Tags.

 & LT; SVG & GT;
  & LT; DEFS & GT;
      & LT; Clippath ID = "Clip-Plant" & GT;
     & LT; PATH D = "M293.2.524.8C0,3.3.3,0 ... [en meer nummers]" & GT;
     & LT; / Clipped & GT;
  & LT; / DEFS & GT;
& LT; / SVG & GT;
& LT; DIV-klasse = "Plant" & GT; & LT; / DIV & GT;

Later kunnen we eenvoudig verwijzen naar het pad dat is gedefinieerd in de SVG-code door een Url functie.

 .plant {
    Hoogte: 700px;
    Achtergrond-afbeelding: URL (../ Afbeeldingen / plant.jpg);
    Achtergrondformaat: dekking;
    Positie: familielid;
    Achtergrond-Herhaal: no-herhaal;
    -Webkit-Clip-Path: URL ("# clip-plant");
    Klempad: URL ("# clip-plant");}

Denk buiten de doos

clipping in CSS example — Je kunt gebruiken **vormige** en **buitenshuis** Om allerlei vormen te creëren

Wie zei dat tekstcontainers altijd rechthoekig moeten zijn? Inhoud kan worden gesneden in allerlei verschillende vormen door toe te passen buitenshuis en vormige Eigenschappen waarmee u uw inhoud kunt wikkelen rond aangepaste paden in CSS.

Dus, hoe werkt het? Gewoon van toepassing buitenshuis naar het gegeven gedreven beeld of container. Het is belangrijk om op te merken dat de vlotter Eigenschap en de afmetingen van het element - beide hoogte of breedte - moeten worden gedefinieerd anders werkt het niet. Je kunt de URL () functie, waarmee het buitenshuis Eigendom om een elementvorm te definiëren op basis van het pad vanuit een SVG-bestand.

. Een letter {
    Achtergrond-afbeelding: URL ('../ Afbeeldingen / goud-bg.jpg');
    Achtergrondformaat: 1000px;
    -Webkit-Mask-Image: URL ('../ Afbeeldingen / A-letter2.svg');
    -Webkit-mask-composiet: Source-out;
    -Webkit-Mask-Repeat: NO-REPEAT;
    -Webkit-Mask-formaat: 300px;
    Breedte: 100%;
    Hoogte: 60VH;
    Positie: familielid;
    Top: 0px;
    Achtergrond-bijlage: vast;
    zweven: links;
    Display: Inline-Block;
    Breedte: 310px;
    Shape-marge: 23px;
    Vorm-buiten: URL ('../ Afbeeldingen / masker.svg');
}

De buitenshuis Onroerend goed verandert niets van een ander element dan het float gebied. Dit betekent dat eventuele grenzen en achtergrondafbeeldingen zich niet aanpassen aan de vorm die op het element is gemaakt. Dit is de reden waarom we ook de masker-afbeelding Eigendom - om de achtergrond van het element uit te schakelen om overeen te komen met de gedefinieerde vorm.

Een belangrijk ding om op te merken is dat de buitenshuis functie werkt alleen met CORS-ingeschakelde bestanden. Cors staat voor Cross Origin Resource Sharing.

In dit specifieke geval is de beste manier om het te bekijken, is het gebruik van localhost, anders werkt het niet als je het gewoon in je browser opent.

Houd er rekening mee dat niet in gedachten worden gehouden dat niet alle genoemde functies worden ondersteund door alle browsers, dus het is de moeite waard om ze te controleren hier Het nieuwste voorbeeld werkt niet in Firefox, Opera en IE, maar hopelijk zal het binnenkort beschikbaar zijn voor alle browsers. En als u veel documenten hebt om voor uw project op te slaan, houd ze ze veilig veilig cloud opslag

Lees verder:

Ga aan de slag met variabele lettertypen in CSS
Een uitgebreide gids voor het gebruik van CSS-raster
Hoe nieuwe CSS-regels om het nu te proberen

Collage-effecten maken in de browser met CSS

Je zal nodig hebben:

Maskeer afbeeldingen die tekst overlappen

Knip de afbeeldingen uit met CSS Clipping

Denk buiten de doos

Procedures - Meest populaire artikelen

Hoe de cloudopslag als creatief te gebruiken

Hoe te animeren met de Mo.js-bibliotheek

10 manieren om betere 3D-wereldomgevingen te bouwen

Animate SVG met JavaScript

Hoe u het juiste prototypingtool wilt kiezen

Hoe maak je 3D-belettering in Illustrator

Maak een typografische poster met behulp van Adobe InDesign

Versnel uw textuurworkflow

Categorieën