Kollázshatás létrehozása a böngészőben CSS-vel

Jan 24, 2026

kézikönyv

Ha valaha is kívánta, megismételheti a hagyományos hatásait kollázskészítő -ben Honlap elrendezések , Ez az oktató az Ön számára.

A weblemez-bemutató három CSS tulajdonságot fog megjelenni: maszkkép , klip-pálya és külső alakú . Még ha használta őket, ne aggódj. Megmutatom a példákat, amelyek segítenek létrehozni a hatást, amit valószínűleg nem látott sok weboldalon.

Keres egy másik típusú bemutatót? Lát Hogyan készítsünk egy fotó kollázsot a Photoshop-ban . És a praktikus útmutatókért lásd a tetejét weboldal építője és web hosting szolgáltatás.

18 felső CSS animációs példák

A legnagyobb inspiráció az említett tulajdonságok használatával a hagyományos kollázs. Kíváncsi voltam, hogy lehet-e létrehozni őket egy webböngészőben, anélkül, hogy bármilyen grafikus szerkesztőt vagy szoftvert használnánk. A CSS mágiával teljesen megvalósítható! A kóddal való megteremtés másik bónusza skálázható, animált és interaktív. Mielőtt elkezdené, győződjön meg róla, hogy a következő:

Szükséged lesz:

Kedvenc böngészője és fejlesztői eszközei - javaslom a Google Chrome használatával, mivel támogatja az ebben a bemutatóban használt funkciókat
Kódszerkesztő
Eszközök, például képek vagy SVG fájlok - letöltheti azokat, amelyek ebben a bemutatóban használunk itt

Maszk, hogy átfedi a szöveget

CSS masks example — CSS maszkok lehetővé teszi, hogy hozzon létre speciális effektusok - például lehetővé teszi egy webhely címsor szelektíven megjelennek és eltűnnek, mint a felhasználó görgeti felfelé és lefelé az oldalt (ellentétben a képet, hogy a fentihez)

A maszkolás az első funkció, amit szeretnék megmutatni. Segíti a kreatívabb formákat és elrendezést az interneten azzal, hogy elmondja a böngészőjének, hogy melyik eszközelemek láthatónak kell lenniük. A maszkolás három különböző módon történhet: raszterkép használata (amely PNG formátumban átlátszó részekkel); CSS gradiensek; vagy svg elemek. Ne feledje, hogy a tipikus raszteres képtől eltérően az SVG minőségi veszteség nélkül méretezhető vagy átalakítható.

Amit különösen szeretek a maszkolásról, az a képesség, hogy ugyanazokat a tulajdonságokat alkalmazza, mint a háttér - Például egy maszk helyzetét, méretét és ismétlését meghatározhatjuk: MASK-REPEAT: NO-REPEAT és maszk méret: fedél .

A CSS maszkolásnak köszönhetően kifinomultabb hatásokat hozhatunk létre az interneten. Az egyikük megtalálható példánkban, ahol a kép egyes részei néhány szöveget tartalmaznak; Ha a felhasználó felfelé és lefelé görget, az oldal néhány részét a szöveg jelenik meg / elrejtve. Ez azt a benyomást kelti, hogy az oldal címe a hegyek mögött található. Ennek a hatásnak a létrehozása, néhány trükkökre van szükség, és a CSS maszkok okos alkalmazása segíteni fog nekünk.

Hozzunk létre egy fejlécet egy kiválasztott háttérképzel és két fejléccel. Az egyikük lesz az elsődleges (első szint).

 & LT; fejléc & gt;
        & lt; h3 & gt; ez az & lt; / h3 & gt;
        & lt; h1 & gt; span & gt; a kalandom & lt; / span & gt; & lt; / h1 & gt;
& lt; / header & gt;

A címsor szövegét a & lt; span & gt; címke. Ez nem egy közös dolog, de ebben az esetben a maszkolásra vonatkozunk, nem pedig a tartályba.

 fejléc {
    Szélesség: 100VW;
    Magasság: 80vh;
    Top: 0;
    Bal: Auto;
    Háttér: URL (../ képek / landscape.jpg) Center Top No-Repeat;
    Háttér méret: fedél;
}
H1 {
    Maszk: URL (../ képek / maszk.svg # maszk);
    -Webkit-maszk: URL (../ képek / tájkép maszk.png)
Center Top No-Repeat;
    Maszk méret: Fedél;
    -Webkit-maszk méret: fedezet;
    Szélesség: 100VW;
    Magasság: 80vh;
    Szín: #FFF;
    betűméret: 100px;
    Pozíció: relatív;
}
H1 span {
    Pozíció: fix;
    Kijelző: inline-blokk;
    Text-Align: Center;
    Font-Család: "Libre Baskerville", Serif;
    Szélesség: 100VW;
    Top: 80px;
    Font-stílus: dőlt;
}

Vágja ki a képeket a CSS Clipping használatával

CSS clipping example — A vágási útvonalak lehetővé teszik, hogy kivágja a növényi képet ebben a példában

Fedezze fel egy másik példát, és többet megtudunk a CSS vágásról. Röviden, a vágás meghatározza, hogy melyik képterületnek láthatónak kell lennie. A vágás hasonló a papírdarabok aprításához. Az alak határát a klip elérési útjának nevezik: bármi, ami az úton van elrejtve, míg az út belsejében látható lesz. A Clip Path segítségével eltávolíthatja a képeket a képen, ahelyett, hogy nehéz PNG fájlokat használna. Ehhez már el kell állítanunk a kivágás alakját.

A cél ebben a gyakorlatban az, hogy klip a növény a kép, eltávolítja a háttér. Másolhatjuk az SVG kódot a fájlból, és beilleszthetjük egy HTML dokumentumba. A klip elérési útját be kell helyezni & lt; DEFS & GT; & lt; / defs & gt; Címkék.

 & lt; svg & gt;
  & lt; DEFS & GT;
      & lt; clippath id = "Clip-Plant" & gt;
     & lt; Path d = "M293.2,524,8c0,3,3,0 ... [és több szám]" & gt;
     & lt; / clippath & gt;
  & lt; / defs & gt;
& lt; / svg & gt;
& lt; div osztály = "növény" & gt; & lt; / div & gt;

Később könnyen hivatkozhatunk az SVG kódban meghatározott útvonalra a Url funkció.

 .plant {
    Magasság: 700px;
    Háttérkép: URL (../ képek / plant.jpg);
    Háttér méret: fedél;
    Pozíció: relatív;
    Háttér ismétlés: nincs ismétlés;
    -Webkit-Clip-Path: URL ("# Clip-Plant");
    Clip-Path: URL ("# Clip-Plant");}

Gondolkodj kreatívan

clipping in CSS example — Te tudod használni **forma-belsejében** és **külső alakú** Mindenféle formátum létrehozása

Ki mondta, hogy a szöveges konténereknek mindig négyszögletesnek kell lenniük? A tartalmat mindenféle különböző formájú alkalmazásra lehet vágni külső alakú és forma-belsejében Olyan tulajdonságok, amelyek lehetővé teszik, hogy a tartalmat az egyéni útvonalak köré tekerje a CSS-ben.

Szóval, hogyan működik? Egyszerűen alkalmazza külső alakú az adott lebegő képhez vagy tartályhoz. Fontos megjegyezni, hogy a úszó A tulajdonság és az elem mérete - akár magassága vagy szélessége - másként is meg kell határozni, hogy nem működik. Használhatja a URL () funkció, amely lehetővé teszi a külső alakú tulajdonság, amely egy elem alakját határozza meg az SVG fájl elérési útján.

 .A-betű {
    Háttérkép: URL ('/ / kép / gold-bg.jpg ');
    Háttér méret: 1000px;
    -Webkit-maszk-kép: URL ('/ ../ képek / a-letter2.svg ');
    -Webkit-maszk-kompozit: Source-out;
    -Webkit-maszk-ismétlés: nincs ismétlés;
    -Webkit-maszk méret: 300px;
    Szélesség: 100%;
    Magasság: 60vh;
    Pozíció: relatív;
    Top: 0px;
    Háttérképezés: fix;
    balra lebeg;
    Kijelző: inline-blokk;
    Szélesség: 310px;
    SHAPE-MARGIN: 23PX;
    Shape-Külső: URL ('// képek / mask.svg ');
}

A külső alakú A tulajdonság nem változtat semmit az úszó területén kívüli elemről. Ez azt jelenti, hogy minden határ és háttérkép nem alkalmazkodik az elemen létrehozott alakhoz. Ez az oka annak, hogy szükségünk van a maszkkép Tulajdonság - Az elem hátterének kivágása a meghatározott alakhoz.

Az egyik fontos megjegyezni, hogy a külső alakú A funkció csak a Cors-kompatibilis fájlokkal működik. A Cors a kereszt eredetű erőforrás-megosztáshoz áll.

Ebben az esetben a legjobb módja annak, hogy megtekinthesse a localhost használatát, különben nem fog működni, ha csak megnyitja a böngészőjében.

Ha kísérletez, kérjük, vegye figyelembe, hogy nem minden említett funkciót támogat minden böngésző, így érdemes ellenőrizni őket itt . A legfrissebb példa nem működik a Firefoxban, az Operában és azaz, de remélhetőleg hamarosan elérhető lesz az összes böngésző számára. És ha sok dokumentum van a projekt tárolására, biztonságban tartsa biztonságban felhő tároló .

Olvass tovább:

A CSS változó betűkészletekkel kezdődik
Átfogó útmutató a CSS-rács használatához
Hogyan próbálja meg az új CSS-szabályokat most

Kollázshatás létrehozása a böngészőben CSS-vel

Szükséged lesz:

Maszk, hogy átfedi a szöveget

Vágja ki a képeket a CSS Clipping használatával

Gondolkodj kreatívan

kézikönyv - Most Popular Articles

Affinity Designer: Hogyan kell használni a hatások és stílusok

Hozzon létre egyéni laza botot

Hogyan kell festeni a reális hullámokat a Photoshopban

REBUILD A 2004 FLASH weboldal 2018-ra

4 egyszerű lépés a render javításához

Hogyan lehet hozzáadni videót az interaktív PDF-ekhez

Modell Darth Vader a Zbrush-ben

Hozzon létre egy önarcképet mindössze 4 színgel

Kategóriák