Creați efecte de colaj în browser cu CSS

Sep 14, 2025

să

Dacă ați dorit vreodată să replicați efectele unui tradițional Collage Maker. În tine Layout-urile site-ului , acesta este tutorialul pentru tine.

Tutorialul de design Web va privi la trei proprietăți CSS: Masca-imagine. , Clip-Path. și forma-exterior . Chiar dacă le-ați folosit, nu vă faceți griji. Voi afișa exemple care vă vor ajuta să creați efecte pe care probabil nu le-ați văzut pe multe site-uri web.

Căutați un alt tip de tutorial? Vedea Cum să faci un colaj foto în Photoshop . Și pentru ghiduri la îndemână, vezi alegerea de sus Builder de site-uri web și web hosting serviciu.

18 exemple de animație CSS de top CSS

Cea mai mare inspirație a mea în ceea ce privește utilizarea proprietăților menționate este colaje tradiționale. Mă întrebam dacă am fost posibil să le creăm într-un browser web, fără a utiliza editori grafică sau software. Cu magia lui CSS, este total posibil! Un alt bonus de creare a acestora cu cod le este scalabil, animat și interactiv. Înainte de a începe, asigurați-vă că aveți următoarele:

Vei avea nevoie:

Browserul dvs. web preferat și instrumentele de dezvoltator - Vă recomandăm să utilizați Google Chrome, deoarece acceptă toate caracteristicile pe care le folosesc în acest tutorial
Un editor de cod
Active cum ar fi imagini sau fișiere SVG - puteți descărca cele care folosim în acest tutorial Aici

Masca imagini care se suprapun text

CSS masks example — Mască CSS vă permit să creați efecte speciale - cum ar fi activarea unei poziții la fața locului să apară selectiv și să dispară în timp ce utilizatorul derulează în sus și în jos pe pagină (contrastat această imagine la cea de mai sus)

Masking-ul este prima caracteristică pe care aș vrea să o arăt. Ajută la construirea unor forme și aspecte mai creative pe web, spunând browserul dvs. care elemente de activ ar trebui să fie vizibile. Mascarea se poate face în trei moduri diferite: folosind o imagine raster (care este în format PNG cu părți transparente); Gradienți CSS; sau elemente SVG. Rețineți că spre deosebire de o imagine tipică raster, SVG poate fi scalată sau transformată fără o pierdere semnificativă a calității.

Ceea ce îmi place mai ales despre mascare este capacitatea sa de a aplica aceleași proprietăți ca și pentru fundal - Putem defini o poziție, dimensiune și repetare a măștii, de exemplu, folosind: Mask-Repeat: No-Repeat și Mask-dimensiune: Acoperire .

Datorită masca CSS, putem crea efecte mai sofisticate pe web. Unul dintre ele poate fi găsit în exemplul nostru, unde părți ale unei imagini acoperă un text; Când un utilizator derulează în sus și în jos pagina, unele porțiuni ale textului sunt afișate / ascunse. Aceasta oferă impresia că titlul paginii este situat în spatele munților. Pentru a crea acest efect, sunt necesare unele trucuri, iar aplicarea inteligentă a măștilor CSS ne va ajuta să realizăm acest lucru.

Să creăm un antet cu o imagine de fundal selectată și două anteturi înăuntru. Unul dintre ele va fi unul primar (primul nivel de rubrică).

 Header & GT;
        & lt; h3 & gt; aceasta este

Textul titlului va fi păstrat în & lt; span & gt; etichetă. Nu este un lucru comun, dar, în acest caz, aplicăm mascare la poziția, nu la container.

 antet {
    Lățime: 100VW;
    Înălțime: 80VH;
    Top: 0;
    Stânga: Auto;
    Fundal: URL (.. / Imagini / Landscape.jpg) Centrul de top No-repetare;
    Dimensiune de fundal: acoperire;
}
H1 {
    Masca: URL (.. / Imagini / Mask.Svg # Maskid);
    -Webkit-Mask: URL (.. / Imagini / Landscape-Mask.png)
Centrul de top No-repetare;
    Masca de dimensiuni: acoperire;
    -webit-mask-dimensiune: acoperi;
    Lățime: 100VW;
    Înălțime: 80VH;
    Culoare: #ffff;
    Font-dimensiune: 100px;
    Poziție: rudă;
}
H1 Span {
    Poziție: fixă;
    Afișaj: Inline-bloc;
    Text-align: centru;
    Font-Family: "Libre Baskerville", Serif;
    Lățime: 100VW;
    Top: 80px;
    Font-stil: italic;
}

Tăiați imaginile utilizând clipping CSS

CSS clipping example — Clipurile de tăiere vă permit să tăiați imaginea plantei în acest exemplu

Să explorăm un alt exemplu și să aflăm mai multe despre CSS Clipping. Pe scurt, tăierea definește ce zona de imagine ar trebui să fie vizibilă. Clippingul este similar cu tăierea bucăților de hârtie. Limita de formă este numită Calea clipului: orice altfel va fi ascuns, în timp ce orice în interiorul căii va fi vizibil. Cu o cale de clip, puteți elimina fundalul din imagine, în loc să utilizați fișiere PNG grele. Pentru aceasta trebuie să am pregătit deja forma pentru tăietură.

Scopul din acest exercițiu este de a scoate planta din imagine, eliminând fundalul. Putem copia codul SVG din fișierul nostru și le putem lipi într-un document HTML. Calea clipului trebuie plasată în interiorul & defsate & gt; & lt; / defs & gt; Etichete.

 & lt; svg & gt;
  & defsate & gt;
      & lt; clippath id = "clip-plantă" & gt;
     & lt; calea d = "m293.2.524.8c0,3,3,0 ... [și mai multe numere]" & GT;
     & lt; / clippath & gt;
  & lt; / defs & gt;
& lt; / svg & gt;
& Lt; Div clasa = "plantă" & gt; / lt; / div & gt;

Mai târziu putem face referire cu ușurință calea definită în codul SVG adăugând a URL. funcţie.

 .Plant {
    Înălțime: 700px;
    Imagine de fundal: URL (../ imagini / plante.jpg);
    Dimensiune de fundal: acoperire;
    Poziție: rudă;
    Fundal-Repeat: No-Repeat;
    -Webkit-Clip-Cale: URL ("# # clip-plantă");
    Clip-traseu: URL ("# clip-plantă");}

Gandeste in afara cutiei

clipping in CSS example — Poți să folosești **Formă-interioară** și **forma-exterior** Pentru a crea tot felul de forme

Cine a spus că recipientele de text trebuie să fie întotdeauna dreptunghiulare? Conținutul poate fi tăiat în tot felul de forme diferite prin aplicarea forma-exterior și Formă-interioară Proprietăți care vă permit să încheiați conținutul în jurul căilor personalizate în CSS.

Deci, cum funcționează? Pur și simplu aplicați forma-exterior la imaginea sau containerul flotat dat. Este important să rețineți că pluti Proprietatea și dimensiunile elementului - fie înălțimea, fie lățimea - trebuie să fie definite altfel nu funcționează. Puteți utiliza URL () funcție, ceea ce permite forma-exterior Proprietate pentru a defini o formă de element bazată pe calea unui fișier SVG.

 .A-scrisoare {
    Imaginea de fundal: URL (".. / Imagini / Gold-bg.jpg ');
    Dimensiune de fundal: 1000px;
    -imagine-imagine-imagine: URL (".. / Imagini / a-scrisoare2.svg ');
    -webit-mask-compozit: sursă-out;
    -Webkit-Mask-Repeat: No-Repeat;
    -Webkit-mask-dimensiune: 300px;
    Lățime: 100%;
    Înălțime: 60VH;
    Poziție: rudă;
    Top: 0px;
    fundal-atașare: fix;
    plutește la stânga;
    Afișaj: Inline-bloc;
    Lățime: 310px;
    Marja de formă: 23px;
    Forma-externă: URL (".. / Imagini / Mask.Svg");
}

forma-exterior Proprietatea nu schimbă nimic despre un alt element decât zona plutitoare. Aceasta înseamnă că orice frontiere și imagini de fundal nu se vor adapta la forma creată pe element. Acesta este motivul pentru care trebuie să aplicăm, de asemenea Masca-imagine. Proprietate - Pentru a tăia fundalul elementului pentru a se potrivi cu forma definită.

Un lucru important de observat este că forma-exterior Caracteristica funcționează numai cu fișierele activate CORS. Cors reprezintă schimbul de resurse încrucișate.

În acest caz particular, cel mai bun mod de a vedea este de a utiliza localhost, altfel nu va funcționa dacă o deschideți în browserul dvs.

Când vă experimentați, vă rugăm să aveți în vedere că nu toate caracteristicile menționate sunt susținute de toate browserele, deci merită să le verificați Aici . Ultimul exemplu nu funcționează în Firefox, Opera și IE, dar, sperăm că va fi disponibil în curând pentru toate browserele. Și dacă aveți o mulțime de documente pentru a stoca pentru proiectul dvs., păstrați-le în siguranță în siguranță Stocare in cloud .

Citeste mai mult:

Începeți cu fonturile variabile în CSS
Un ghid cuprinzător pentru utilizarea gridului CSS
Cât de noi reguli CSS pentru a încerca acum

Creați efecte de colaj în browser cu CSS

Vei avea nevoie:

Masca imagini care se suprapun text

Tăiați imaginile utilizând clipping CSS

Gandeste in afara cutiei

să - Cele mai populare articole

Cum să faceți o captură de ecran pe un Mac

Cum să kitbash pe Go cu ShapR3D

Cum să transformați WordPress într-un constructor vizual

Începeți cu difuzie

4 pași simpli pentru a vă îmbunătăți randamentul

Îmbunătățiți-vă textul în substanța de designer de substanțe

Cum să utilizați fotografia stocului creativ în cadrul lucrărilor dvs. de proiectare

Cum se utilizează caracteristica "Match Font" a lui Photoshop

Categorii