Luo kollaasivaikutukset selaimessa CSS: llä

Sep 11, 2025

Miten tehdään

Jos olet koskaan halunnut, voit kopioida perinteisen vaikutuksen kollaasi teidän Verkkosivuston asettelu , tämä on sinulle opetusohjelma.

Web-suunnittelun opetusohjelma tarkastellaan kolme CSS-ominaisuuksia: naamiokuva , leike ja muotoinen . Vaikka olet käyttänyt niitä, älä huoli. Näytän esimerkkejä, jotka auttavat sinua luomaan vaikutuksia, joita ei todennäköisesti ole nähnyt monilla sivustoilla.

Etsitkö erilaista opetusohjelmaa? Nähdä Miten tehdä valokuvakollaasi Photoshopissa . Ja kätevä oppaat, katso valinta ylhäältä Verkkosivuston rakentaja ja sivujen ylläpito Palvelu.

18 TOP CSS Animaatioesimerkkejä

Suurin inspiraationi mainittujen ominaisuuksien käyttämisen kannalta on perinteisiä kollaaseja. Mietin, onko ne mahdollista luoda ne verkkoselaimessa ilman grafiikkakokemusta tai ohjelmistoa. CSS: n taika, se on täysin mahdollista! Toinen bonus niiden luomisesta koodilla on skaalautuva, animoitu ja vuorovaikutteinen. Ennen kuin aloitat, varmista, että sinulla on seuraavat:

Tarvitset:

Suosikkiin selain- ja kehittäjätyökalut - Suosittelen Google Chromen käyttöä, koska se tukee kaikkia tässä opetusohjelmassa käytettäviä ominaisuuksia
Koodieditori
Varat, kuten kuvat tai SVG-tiedostot - voit ladata ne, joita käytämme tässä opetusohjelmassa tässä

Mask kuvia, jotka ovat päällekkäisiä tekstiä

CSS masks example — CSS-naamarit mahdollistavat erityisiä vaikutuksia - kuten sivuston otsikon ottaminen selektiivisesti näkyviin ja katoamaan käyttäjänä ylös ja alas sivulle (kontrasti tämän kuvan edellä)

Masking on ensimmäinen ominaisuus, jonka haluaisin näyttää sinulle. Se auttaa rakentamaan luovia muotoja ja asetteluja verkossa kertomalla selaimesi, mitkä omaisuuselementit olisi näkyvissä. Masking voidaan tehdä kolmella eri tavalla: käyttämällä rasterikuvaa (joka on PNG-muodossa läpinäkyvien osien kanssa); CSS-kaltevuudet; tai SVG-elementtejä. Huomaa, että toisin kuin tyypillinen rasterikuva, SVG voidaan skaalata tai muuntaa ilman merkittävää laadun heikkenemistä.

Mitä pidän erityisesti peittämisestä, on sen kyky soveltaa samoja ominaisuuksia kuin tausta - Voimme määrittää maskin sijainnin, koon ja toistumisen esimerkiksi käyttämällä: Mask-REPEAT: Ei-toisto ja Mask-koko: kansi .

CSS-peittämisen ansiosta voimme luoda kehittyneempiä vaikutuksia verkkoon. Yksi niistä löytyy esimerkissämme, jossa kuvan osat kattavat tekstin; Kun käyttäjä vierittää ylös ja alas sivua, jotkut tekstin osuudet näytetään / piilotettu. Tämä antaa vaikutelman, että sivun otsikko sijaitsee vuorten takana. Tämän vaikutuksen luomiseksi tarvitaan joitain temppuja ja CSS-naamioiden älykäs sovellus auttaa meitä saavuttamaan tämän.

Luodaan otsikko, jossa on valittu taustakuva ja kaksi otsikkoa. Yksi niistä on ensisijainen (ensimmäinen otsikko).

 & lt; otsikko & gt;
        & lt; h3 & gt; tämä on & lt; / h3 & gt;
        & lt; h1 & gt; & lt; span & gt; minun seikkailu & lt; / span & gt; & lt; / h1 & gt;
& lt; / otsikko & gt;

Nimikkeen teksti pidetään & lt; span & gt; tag. Se ei ole yhteinen asia, mutta tässä tapauksessa haemme peittämistä otsikkoon, ei säiliöön.

 Header {
    Leveys: 100vW;
    Korkeus: 80vh;
    Top: 0;
    Vasen: Auto;
    Taustaa: URL (../ kuvat / landscape.jpg) Center top Ei-toisto;
    Tausta-koko: kansi;
}
h1 {
    Mask: URL (.../ kuvat / mask.svg # maskid);
    -WebKit-mask: URL (../ kuvat / landscape-mask.png)
Keskus top-toisto;
    Mask-koko: kansi;
    -Webkit-mask-koko: kansi;
    Leveys: 100vW;
    Korkeus: 80vh;
    Väri: #FFF;
    Fontti-koko: 100px;
    Asento: Suhteellinen;
}
h1 span {
    Paikka: kiinteä;
    Näyttö: Inline-lohko;
    Teksti-kohdistus: keskus;
    Font-perhe: 'Libre Baskerville', Serif;
    Leveys: 100vW;
    Top: 80px;
    Fontti-tyyli: kursiivi;
}

Leikkaa kuvia CSS Clippingin avulla

CSS clipping example — Clipping Paths mahdollistaa kasvin kuvan tässä esimerkissä

Tutustu toiseen esimerkkiin ja lisätietoja CSS Clippingista. Lyhyesti sanottuna leikkaus määrittelee, mitkä kuva-alueen pitäisi näkyä. Clipping on samanlainen kuin paperin leikkaaminen. Muodon raja kutsutaan leikkeena: Kaikki polun ulkopuolella on piilotettu, kun taas polun sisällä on näkyvissä. Leikkeen polku voi poistaa taustasta kuvasi sen sijaan, että käytät raskaita PNG-tiedostoja. Tätä varten meidän on jo laadittu muoto katkaistuksi.

Tämän harjoituksen tavoitteena on leikata kasvi ulos kuvasta, poistamalla tausta. Voimme kopioida SVG-koodin tiedostostamme ja liittää sen HTML-asiakirjaan. Leikkeen polku on sijoitettava & lt; defs & gt; & lt; / defs & gt; Tunnisteet.

 & lt; svg & gt;
  & lt; defs & gt;
      & lt; clippath id = "Clip-Plant" & GT;
     & lt; polku d = "M293.2, 524.8c0,3,3,0 ... [ja enemmän numeroita]" & gt;
     & lt; / clippath & gt;
  & lt; / defs & gt;
& lt; / svg & gt;
& lt; div luokka = "kasvi" & gt; & lt; / div & gt;

Myöhemmin voimme helposti viitata SVG-koodiin määritetyn polun lisäämällä a Url Toiminto.

 .Plant {
    Korkeus: 700px;
    Taustakuva: URL (.../ kuvat / plant.jpg);
    Tausta-koko: kansi;
    Asento: Suhteellinen;
    Tausta-REPEAT: ei-toisto;
    -WebKit-Clip-Path: URL ("# Clip-Plant");
    Clip-reitti: URL ("# Clip-Plant");}

Ajattele laatikon ulkopuolella

clipping in CSS example — Voit käyttää **muotoinen** ja **muotoinen** Luo kaikenlaisia muotoja

Kuka sanoi, että tekstinsäiliöt täytyy aina olla suorakulmainen? Sisältö voidaan leikata kaikenlaisiin erilaisiin muotoihin soveltamalla muotoinen ja muotoinen Ominaisuudet, joiden avulla voit kääriä sisältösi CSS: n mukautetuilla poluksilla.

Joten, miten se toimii? Käytä vain muotoinen annettuun kellumaan kuvaan tai säiliöön. On tärkeää huomata, että kellua Ominaisuus ja elementin mitat - joko korkeus tai leveys - on määriteltävä muuten se ei toimi. Voit käyttää URL () toiminto, joka mahdollistaa muotoinen Kiinteistö määrittää elementin muoto SVG-tiedoston polun perusteella.

 .a-kirjain {
    Taustakuva: URL ('../ kuvat / gold-bg.jpg');
    Tausta-koko: 1000px;
    -WebKit-Mask-kuva: URL ('../ kuvat / a-letter2.svg');
    -WebKit-mask-komposiitti: lähde;
    -Webkit-mask-toisto: Ei-toisto;
    -Webkit-mask-koko: 300px;
    Leveys: 100%;
    Korkeus: 60vh;
    Asento: Suhteellinen;
    Top: 0px;
    Tausta-liite: kiinteä;
    Float: Vasen;
    Näyttö: Inline-lohko;
    Leveys: 310PX;
    Muoto-marginaali: 23px;
    Muoto ulkona: URL ('../ kuvat / mask.svg');
}

The muotoinen Kiinteistö ei muuta mitään muuta elementtiä kuin sen float-alueesta. Tämä tarkoittaa, että kaikki rajat ja taustakuvat eivät sovi elementtiin luotuun muotoon. Tämä on syy siihen, miksi meidän on myös sovellettava naamiokuva Kiinteistö - Voit katkaista elementin tausta määritetyn muodon vastaiseksi.

Yksi tärkeä asia on huomata, että muotoinen Ominaisuus toimii vain Korsissa käytössä olevilla tiedostoilla. Cors tarkoittaa Ristiperäresurssien jakamista.

Tässä nimenomaisessa tapauksessa paras tapa tarkastella on käyttää localhostia, muuten se ei toimi, jos avaat sen selaimessasi.

Kun kokeilet, pidä mielessä, että kaikki mainitut ominaisuudet eivät tue kaikki selaimet, joten kannattaa tarkistaa ne tässä . Viimeisin esimerkki ei toimi Firefoxissa, oopperassa ja eli toivottavasti se on pian saatavilla kaikille selaimille. Ja jos sinulla on paljon asiakirjoja hankkeen tallentamiseksi, pidä ne turvassa pilvivarasto .

Lue lisää:

Aloita vaihtelevilla fontteilla CSS: ssä
Kattava opas CSS Gridin käyttämiseen
Miten uudet CSS-säännöt kokeilemaan nyt

Luo kollaasivaikutukset selaimessa CSS: llä

Tarvitset:

Mask kuvia, jotka ovat päällekkäisiä tekstiä

Leikkaa kuvia CSS Clippingin avulla

Ajattele laatikon ulkopuolella

Miten tehdään - Suosituimmat artikkelit

LINO PRINTMAING: Johdanto

Web-ilmoituksen poistaminen käytöstä Windows, MacOS ja Android

Rakenna SEO-ystävällinen pääkomponentti NextsJs / reagoi

Aloita Express.js

Maalaa Sci-Fi-pelin asetus Photoshopissa

Kasvata kasvia Houdini

Kuinka veistää elokuva 4d

Miten tehdä fotorealistinen taivas

Luokat