Lag collage effekter i nettleseren med CSS

Sep 12, 2025

hvordan

[1. 3]

Hvis du noen gang har ønsket at du kunne replikere effekten av en tradisjonell Collage Maker. i din Nettstedslayouts , Dette er opplæringen for deg.

Webdesignopplæringen vil se på tre CSS-egenskaper: maske-image , klipp-sti og form-utenfor . Selv om du har brukt dem, ikke bekymre deg. Jeg skal vise eksempler som vil hjelpe deg med å skape effekter du sannsynligvis ikke har sett på mange nettsteder.

Leter du etter en annen type opplæring? Se Hvordan lage en fotokollasje i Photoshop . Og for praktiske guider, se vårt valg av toppen Nettstedbygger og Web Hosting. service.

18 Topp CSS animasjonseksempler

Min største inspirasjon når det gjelder bruk av de nevnte egenskapene er tradisjonelle collager. Jeg lurte på om det var mulig å lage dem i en nettleser, uten å bruke noen grafikkredaktører eller programvare. Med den magiske CSS, er det helt mulig! En annen bonus for å skape dem med kode har dem skalerbare, animerte og interaktive. Før du begynner, sørg for at du har følgende:

Du vil trenge:

Din favoritt nettleser og utviklerverktøy - Jeg anbefaler at du bruker Google Chrome siden den støtter alle funksjonene jeg bruker i denne opplæringen
En kodedaktør
Eiendeler som bilder eller SVG-filer - Du kan laste ned de som vi bruker i denne opplæringen her

Maskerer bilder som overlapper tekst

CSS masks example — CSS masker gjør at du kan lage spesielle effekter - som å aktivere en nettsted på vei til selektivt å vises og forsvinner som brukeren ruller opp og ned på siden (kontrast dette bildet til det ovenfor)

Maskering er den første funksjonen jeg vil gjerne vise deg. Det bidrar til å bygge mer kreative former og layouter på nettet ved å fortelle nettleseren din hvilke aktivelementer som skal være synlige. Maskering kan gjøres på tre forskjellige måter: ved hjelp av et rasterbilde (det er i PNG-format med transparente deler); CSS gradienter; eller SVG-elementer. Merk at i motsetning til et typisk rasterbilde, kan SVG skaleres eller forvandles uten et betydelig tap i kvalitet.

Det jeg spesielt liker om maskering er dets evne til å anvende de samme egenskapene som for bakgrunn - Vi kan definere en maske posisjon, størrelse og repetisjon, for eksempel å bruke: MASK-Gjenta: Nei-gjenta og Mask-størrelse: Deksel .

Takket være CSS maskering kan vi skape mer sofistikerte effekter på nettet. En av dem kan bli funnet i vårt eksempel, hvor deler av et bilde dekker litt tekst; Når en bruker ruller opp og ned på siden, vises noen deler av teksten / skjult. Dette gir inntrykk av at sidetittelen ligger bak fjellene. For å skape denne effekten er det nødvendig med noen triks, og den klare anvendelsen av CSS-masker vil hjelpe oss med å oppnå det.

La oss lage en header med et valgt bakgrunnsbilde og to overskrifter inni. En av dem vil være den primære (første nivå av overskrift).

 & lt; header & gt;
        & lt; h3 & gt; dette er & lt; / h3 & gt;
        & lt; h1 & gt; min eventyr og lt; / span & gt; & lt; / h1 & gt;
& lt; / header & gt;

Teksten til overskriften vil bli holdt i & lt; span & gt; stikkord. Det er ikke en vanlig ting, men i dette tilfellet bruker vi maskering på vei, ikke til beholderen.

 header {
    Bredde: 100vw;
    Høyde: 80VH;
    Topp: 0;
    Venstre: Auto;
    Bakgrunn: URL (../ Bilder / Landscape.jpg) Senter Topp No-Repeat;
    Bakgrunnsstørrelse: Deksel;
}
h1 {
    maske: URL (../ bilder / mask.svg # maskid);
    -WebKit-mask: URL (../ bilder / landskapsmask.png)
senter topp ikke-gjenta;
    Mask-størrelse: Deksel;
    -Webkit-mask-størrelse: Deksel;
    Bredde: 100vw;
    Høyde: 80VH;
    farge: #fff;
    Font-størrelse: 100px;
    posisjon: relativ;
}
H1 span {
    posisjon: fast;
    Skjerm: Inline-blokk;
    Tekstjustering: Senter;
    Font-familie: 'Libre Baskerville', Serif;
    Bredde: 100vw;
    Topp: 80px;
    Font-stil: kursiv;
}

Klipp ut bilder ved hjelp av CSS-klipping

CSS clipping example — Clipping-baner gjør at du kan kutte ut plantebildet i dette eksemplet

La oss utforske et annet eksempel og finne ut mer om CSS-klipping. Kort sagt, Clipping definerer hvilket bildeområde som skal være synlig. Clipping ligner på hakkepapirer. Formens grense kalles klippet banen: Alt utenfor banen vil bli skjult, mens noe inne i banen vil være synlig. Med en klippesti kan du fjerne bakgrunnen fra bildet ditt, i stedet for å bruke tunge PNG-filer. For dette må vi allerede ha forberedt formen for kuttet ut.

Målet i denne øvelsen er å klippe anlegget ut av bildet, fjerne bakgrunnen. Vi kan kopiere SVG-kode fra vår fil og lime den til et HTML-dokument. Klippbanen må plasseres innenfor & lt; defs & gt; & lt; / defs & gt; Tags.

 & lt; svg & gt;
  & lt; defs & gt;
      & lt; clippath id = "clip-plante" & gt;
     & lt; Path d = "M293.2,524.8c0,3.3,0 ... [og flere tall]" & gt;
     & lt; / clippath & gt;
  & lt; / defs & gt;
& lt; / svg & gt;
& lt; div class = "plante" & gt; & lt; / div & gt;

Senere kan vi enkelt referere til banen som er definert i SVG-koden ved å legge til en URL. funksjon.

 .plant {
    Høyde: 700px;
    Bakgrunnsbilde: URL (../ bilder / plante.jpg);
    Bakgrunnsstørrelse: Deksel;
    posisjon: relativ;
    Bakgrunn-Gjenta: Nei-gjenta;
    -Webkit-clip-bane: url ("# clip-plante");
    Clip-Path: URL ("# Clip-Plant");}

Tenke utenfor boksen

clipping in CSS example — Du kan bruke **form-innsiden** og **form-utenfor** å skape alle slags former

Hvem sa at tekstbeholdere alltid trenger å være rektangulære? Innholdet kan kuttes i alle slags forskjellige former ved å søke form-utenfor og form-innsiden Egenskaper som gjør at du kan pakke inn innholdet ditt rundt tilpassede baner i CSS.

Så, hvordan fungerer det? Bare gjelder form-utenfor til det angitte flytende bildet eller beholderen. Det er viktig å merke seg at flyte Eiendom og dimensjonene til elementet - enten høyde eller bredde - må defineres ellers virker det ikke. Du kan bruke URL () Funksjon, som gjør det mulig form-utenfor Eiendom for å definere en elementform basert på banen fra en SVG-fil.

. En bokstav {
    bakgrunnsbilde: URL ('../ bilder / gull-bg.jpg');
    bakgrunnsstørrelse: 1000px;
    -WebKit-mask-image: URL ('../ bilder / a-letter2.svg');
    -Webkit-mask-kompositt: kilde-out;
    -webkit-mask-gjentatte: Nei-gjenta;
    -webkit-mask-størrelse: 300px;
    Bredde: 100%;
    Høyde: 60 VH;
    posisjon: relativ;
    Topp: 0px;
    Bakgrunnsbestilling: Fast;
    Float: Venstre;
    Skjerm: Inline-blokk;
    Bredde: 310px;
    form-margin: 23px;
    form-utenfor: URL ('../ bilder / mask.svg');
}

De form-utenfor Eiendommen endrer ikke noe om et annet element enn dets flytområde. Dette betyr at eventuelle grenser og bakgrunnsbilder ikke vil tilpasse seg formen som er opprettet på elementet. Dette er grunnen til at vi også må bruke maske-image Eiendom - for å kutte ut bakgrunnen til elementet for å matche den definerte formen.

En viktig ting å merke seg er at form-utenfor Funksjonen fungerer bare med korsaktiverte filer. Cors står for Cross Origin Resource Sharing.

I denne spesielle tilfellet er den beste måten å vise den å bruke localhost, ellers vil det ikke fungere hvis du bare åpner den i nettleseren din.

Når du eksperimenterer, vær så snill å huske på at ikke alle de nevnte funksjonene støttes av alle nettlesere, så det er verdt å sjekke dem ut her . Det siste eksemplet virker ikke i Firefox, Opera og det vil si, men forhåpentligvis vil det være tilgjengelig snart for alle nettleserne. Og hvis du har mange dokumenter for å lagre for prosjektet ditt, hold dem trygge i trygg skylagring .

Les mer:

Kom i gang med variable fonter i CSS
En omfattende guide til å bruke CSS-nett
Hvordan nye CSS regler for å prøve nå

Lag collage effekter i nettleseren med CSS

Du vil trenge:

Maskerer bilder som overlapper tekst

Klipp ut bilder ved hjelp av CSS-klipping

Tenke utenfor boksen

hvordan - Mest populære artikler

Hvordan oppnå skala i dine malerier

Steg-for-trinn: Hvordan etterligne oljemaling i Corel Painter

Sculpt realistisk anatomi i Zbrush

Hvordan illustrere for en hendelse

Simulere en spøkelse rytter transformasjon

Hvordan designe den perfekte bokomslaget

Mal et portrett i oljer

Hvordan lage et stilisert 3D-tegn for spill

Kategorier