Kuidas luua CSS-iga varju

Kuigi disainitrendid varieeruvad igal aastal, võite loota selliste põhivarjuefektide kasutamisele nagu kast-vari ja vari-vari veebisaidi esteetikale positiivselt kaasa aidata. Sa võid kasutada varjud meeldivate kaunilt renderdatud efektide loomiseks, ilma et need jääksid juustumateks.

Vaatame CSS-i lähemalt vari-vari vara.

Mis on CSS-i rippvari?

vari ( ) on CSS-efekt, mis kuvab määratud objekti kuju ümber varju. Siin on CSS-i rakendamise süntaks vari-vari.

Süntaks:
filter: drop-shadow (offset-x offset-y blur-radius color);

Seal on lai valik filtri funktsioonid kaasa arvatud hägu ( ), heledus ( )ja vari ( ).

nihe-x määrab horisontaalse kauguse ja offset-y määrab vertikaalse kauguse. Pange tähele, et negatiivsed väärtused asetavad varju vasakule (nihe-x) ja üle selle (offset-y) objekt.

Kaks viimast parameetrit on valikulised. Saate pikkusena määrata varju hägususe raadiuse. Vaikimisi on see 0. Teil ei saa olla negatiivset hägususe raadiust.

Varju värv on määratud kui. Kui te pole värvi määranud, järgneb see väärtusele värvi vara.

Millal on CSS-i rippvari kasulik?

Sa võid seda juba teada kast-vari teeb oma tööd päris hästi. Nii et võite mõelda, miks me seda vajame vari-vari üleüldse? On palju juhtumeid, kus vari ( ) funktsioon on elupäästja. Vaatame mõnda neist:

Mitteristkülikukujulised kujundid

Erinevalt a kast-vari, saate lisada a vari-vari mitteristkülikukujulisteks kujunditeks. Näiteks on meil läbipaistev mitteristkülikukujuline SVG või PNG, näiteks täht. Siin saab objektile endale vastava varju lisamise lõpetada mõlemaga kast-vari või vari-vari. Mõelge mõlemale stsenaariumile:

HTML

CSS

.star-img img {
ekraan: inline-block;
kõrgus: 15 em;
laius: 25em;
}
.box-shadow {
värv: punane;
kast-vari: 0,60 em 0,60 em 0,2 em;
}
.drop-shadow {
filter: vari (0,60 em 0,60 em 0,2 em);
}

Väljund:

Mõlema mõju võrdlemisel on ilmne, et a kast-vari annab ristkülikukujulise varju; Samuti pole vahet, kas pilt on läbipaistev või sellel on juba taust. Teiselt poolt, vari-vari võimaldab luua varju, mis vastab pildi enda kujule.

Piiravad tegurid on see, et vari ( ) funktsioon aktsepteerib kõiki tüüpi parameetreid välja arvatud sisend märksõna ja levik parameeter.

Rühmitatud elemendid

On mitmeid juhtumeid, kui peate võib-olla koostama komponente teatud elementide kattumise teel. Kui kasutate kast-vari, seisate silmitsi probleemiga, kuidas püüda õigel viisil varju heita. Pildi ja tekstikomponendi rühmitamisel toimib see järgmiselt.

HTML

Ela hetkes

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam incidunt.

Põhiline CSS

keha {
polsterdus: 5em 1em;
fondiperekond: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
'Lucida Sans Unicode', Genf, Verdana, sans-serif;
}
h2 {
fondi suurus: 2rem;
}
p {
fondi suurus: 0,8rem;
}
.parent-container {
ekraan: flex;
paindesuund: veerg;
kõrgus: 17 rem;
laius: 50em;
}
.image-container img {
laius: 15em;
positsioon: absoluutne;
z-indeks: 1;
ülemine: 2em;
vasakule: 1,5em;
}
.text-container {
värv: rgb (255, 236, 236);
taustavärv: rgb (141 0 35);
laius: 30rem;
polster: 3rem;
joondus-ise: painduv ots;
asend: suhteline;
}

Nüüd rakendage kast-vari ja vari-vari et näha erinevust.

.drop-shadow {
filter: drop-shadow (0,4rem 0,4rem 0,45rem rgba (0, 0, 30, 0,5));
}
.box,
.box img {
kast-vari: 0,4rem 0,4rem 0,45rem rgba (0, 0, 30, 0,3);
}

Väljund:

Nagu näete, kast-vari rakendatakse igale elemendile eraldi, samal ajal kui vari-vari rühmitab need mõlemad ja rakendab varju.

Lõigatud elemendid

Võite kasutada lõiketee atribuut teatud piirkonna lõikamiseks, mis määrab, milliseid pildi või elemendi osi tuleks näidata. The varjude filter võimaldab meil luua a vari-vari kärbitud elemendil, rakendades selle selle elemendi emale:

HTML

CSS

.parent-container {
filter: vari (0rem 0rem 1,5rem maroon);
}
.clipped-element {
laius: 50em;
kõrgus: 50 em;
marginaal: 0 auto;
taustapilt: url (naeratav tüdruk.jpg);
lõiketee: ring (50%);
tausta suurus: kaas;
background-repeat: no-repeat;
}

Väljund:

Lõikasime 50% pildist ringikujulise teega. Seetõttu on varjude filter rakendatakse ainult pildi nähtavale osale. Kas pole äge?

Piirangud ja erinevused

Nagu eespool arutasime, vari-vari ei toeta levik parameeter. See tähendab, et kontuuriefekti loomine poleks võimalik vari ( ) funktsioon, sest see tapetakse kõikjal. Samuti annab see erinevaid varjuefekte kast-vari ja tekst-vari (samade parameetritega). Võite tunda, et erinevused kast-vari ja vari-vari taanduda CSS-kasti mudel. Üks järgib seda, teine ​​aga mitte. Siin on näide:

HTML

Iga MUO artikkel viib teid sammu võrra lähemale.


Iga MUO artikkel viib teid sammu võrra lähemale.



Iga MUO artikkel viib teid sammu võrra lähemale.

Põhiline CSS

keha {
polsterdus: 5em 1em;
fondiperekond: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
'Lucida Sans Unicode', Genf, Verdana, sans-serif;
}
.parent-container {
laius: 72rem;
}
p {
fondi suurus: 3em;
fondi stiil: paks;
}

Varjuefektide rakendamine

.drop-shadow {
filter: drop-shadow (0,5em 0,5em 0,1em #555);
}
.box-shadow {
kast-vari: 0,5em 0,5em 0,1em #555;
}
.text-shadow {
tekst-vari: 0,5em 0,5em 0,1em #555;
}

Väljund:

Näete, et kast-vari annab raskema, tumedama varju kui tekst-vari ja vari-vari. Samuti on varjude paigutuse vahel väike erinevus tekst-vari ja vari-vari. Sellegipoolest võite vastavalt oma vajadustele eelistada erinevaid varjuefekte.

Brauseri tugi

The vari ( ) funktsiooni toetavad kõik kaasaegsed brauserid, välja arvatud vanemad brauserid, nagu Internet Explorer. Kuigi see pole midagi, mis UX-i tõsiselt takistaks, saate funktsioonipäringu lisada kast-vari tagavara.

Katsetage erinevate varjuefektidega

Populaarsus kast-vari on paljude kasutusjuhtude tõttu üsna ilmne. Siiski, vari ( ) funktsioon on väga vähekasutatud. Loodame, et katsetate erinevaid varjuefekte ja proovite neid rakendada vari-vari oma tulevastes projektides.

Pseudoklassid lisavad CSS-ile ja teie isiklikule veebiarenduse repertuaarile täiesti uue hulga funktsioone. Lugege nende kohta lisateavet, et saada osavamaks ja tõhusamaks veebiarendajaks.

Kuidas kasutada CSS-i kastivarju: 13 nippi ja näidet

Lahedad kastid näevad igavad välja. Kaunistage neid CSS-i kasti varjuefektiga!

Loe edasi

Autori kohta