Kaip sukurti šešėlį naudojant CSS

Nors dizaino tendencijos kasmet skiriasi, galite pasikliauti pagrindinių šešėlių efektų, pvz., naudojimo dėžutė-šešėlis ir mesti šešėlį teigiamai prisidėti prie svetainės estetikos. Tu gali naudoti šešėliai sukurti malonius, gražiai atvaizduotus efektus, kurie neatrodytų kaip sūrūs.

Pažvelkime į CSS atidžiau mesti šešėlį nuosavybė.

Kas yra CSS šešėlis?

mesti šešėlį( ) yra CSS efektas, rodantis šešėlį aplink nurodyto objekto formą. Štai CSS taikymo sintaksė mesti šešėlį.

Sintaksė:
filtras: drop-shadow (offset-x offset-y blur-radius color);

Yra platus asortimentas filtrų funkcijos įskaitant suliejimas ( ), ryškumas ( ), ir mesti šešėlį( ).

poslinkis-x nustato horizontalų atstumą ir offset-y nustato vertikalų atstumą. Atkreipkite dėmesį, kad neigiamos reikšmės nukreipia šešėlį į kairę (poslinkis-x) ir aukščiau (offset-y) objektas.

Paskutiniai du parametrai yra neprivalomi. Galite nurodyti šešėlio suliejimo spindulį kaip ilgį. Pagal numatytuosius nustatymus jis nustatytas į 0. Negalite turėti neigiamo suliejimo spindulio.

Šešėlio spalva nurodyta kaip. Jei nenurodėte spalvos, ji atitinka reikšmę spalva nuosavybė.

Kada naudingas CSS šešėlis?

Galbūt tai jau žinote dėžutė-šešėlis gana gerai atlieka savo darbą. Taigi, galite pagalvoti, kodėl mums to reikia mesti šešėlį iš viso? Yra daugybė atvejų, kai mesti šešėlį( ) funkcija yra gelbėjimo priemonė. Pažvelkime į keletą iš jų:

Nestačiakampės formos

Skirtingai nuo a dėžutė-šešėlis, galite pridėti a mesti šešėlį iki ne stačiakampių formų. Pavyzdžiui, turime skaidrų SVG arba PNG ne stačiakampio formos, pavyzdžiui, žvaigždę. Čia galima pridėti šešėlį, atitinkantį patį objektą, bet kuriuo iš jų dėžutė-šešėlis arba mesti šešėlį. Apsvarstykite abu scenarijus:

HTML

CSS

.star-img img {
ekranas: eilutinis blokas;
aukštis: 15m;
plotis: 25em;
}
.box-shadow {
spalva: raudona;
langelis-šešėlis: 0,60 em 0,60 em 0,2 em;
}
.mesti šešėlį {
filtras: šešėlinis šešėlis (0,60 em 0,60 em 0,2 em);
}

Išvestis:

Palyginus abu efektus, akivaizdu, kad a dėžutė-šešėlis suteikia stačiakampį šešėlį; taip pat nesvarbu, ar vaizdas yra skaidrus, ar jau turi foną. Iš kitos pusės, mesti šešėlį leidžia sukurti šešėlį, atitinkantį paties vaizdo formą.

Ribojantys veiksniai yra tai, kad mesti šešėlį( ) funkcija priima visus tipo parametrus išskyrus intarpas raktažodis ir plisti parametras.

Sugrupuoti elementai

Yra keletas atvejų, kai gali tekti kurti komponentus perdengiant tam tikrus elementus. Jei naudojate dėžutė-šešėlis, susidursite su problema, kaip tinkamai mesti šešėlį. Štai kaip tai veikia grupuojant vaizdą ir teksto komponentą:

HTML

Gyvenk šia akimirka

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.

Pagrindinis CSS

kūnas {
kamšalas: 5em 1em;
šriftų šeima: „Lucida Sans“, „Lucida Sans Regular“, „Lucida Grande“,
„Lucida Sans Unicode“, Ženeva, Verdana, sans-serif;
}
h2 {
šrifto dydis: 2rem;
}
p {
šrifto dydis: 0.8rem;
}
.parent-container {
ekranas: lankstus;
lankstumo kryptis: stulpelis;
aukštis: 17 rem;
plotis: 50em;
}
.image-container img {
plotis: 15em;
padėtis: absoliuti;
z indeksas: 1;
viršus: 2em;
liko: 1,5 em;
}
.text-container {
spalva: rgb (255, 236, 236);
fono spalva: rgb (141 0 35);
plotis: 30rem;
paminkštinimas: 3 rem;
align-self: flex-end;
padėtis: santykinė;
}

Dabar pritaikykite dėžutė-šešėlis ir mesti šešėlį kad pamatytum skirtumą.

.mesti šešėlį {
filtras: drop-shadow (0,4rem 0,4rem 0,45rem rgba (0, 0, 30, 0,5));
}
.dėžė,
.box img {
langelis-šešėlis: 0,4rem 0,4rem 0,45rem rgba (0, 0, 30, 0,3);
}

Išvestis:

Kaip matote, dėžutė-šešėlis taikomas kiekvienam elementui atskirai, o mesti šešėlį sugrupuoja juos abu ir taiko šešėlį.

Iškirpti elementai

Galite naudoti klipas savybė apkarpyti tam tikrą sritį, kuri nustato, kurios vaizdo ar elemento dalys turi būti rodomos. The šešėlių filtras leidžia mums sukurti a mesti šešėlį nukirptame elemente, taikydami jį pirminiam elemento elementui:

HTML

CSS

.parent-container {
filtras: šešėlinis šešėlis (0rem 0rem 1,5rem maroon);
}
.clipped-element {
plotis: 50em;
aukštis: 50m;
paraštė: 0 automatinis;
background-image: url (smiling-girl.jpg);
klipas: apskritimas (50%);
fono dydis: viršelis;
fono kartojimas: nekartoti;
}

Išvestis:

50 % vaizdo nukirpome apskritimu. Todėl, šešėlių filtras taikoma tik matomai vaizdo daliai. Argi ne nuostabu?

Apribojimai ir skirtumai

Kaip aptarėme aukščiau, mesti šešėlį nepalaiko plisti parametras. Tai reiškia, kad nebūtų įmanoma sukurti kontūro efekto naudojant mesti šešėlį( ) funkcija, nes ji visur žūva. Be to, jis suteikia skirtingus šešėlių efektus nei dėžutė-šešėlis ir tekstas-šešėlis (su tais pačiais parametrais). Galite pajusti, kad skirtumai tarp dėžutė-šešėlis ir mesti šešėlį užvirinti iki CSS dėžutės modelis. Vienas seka, o kitas – ne. Štai pavyzdys:

HTML

Kiekvienas MUO straipsnis priartins jus vienu žingsniu.


Kiekvienas MUO straipsnis priartins jus vienu žingsniu.



Kiekvienas MUO straipsnis priartins jus vienu žingsniu.

Pagrindinis CSS

kūnas {
kamšalas: 5em 1em;
šriftų šeima: „Lucida Sans“, „Lucida Sans Regular“, „Lucida Grande“,
„Lucida Sans Unicode“, Ženeva, Verdana, sans-serif;
}
.parent-container {
plotis: 72rem;
}
p {
šrifto dydis: 3em;
šrifto stilius: paryškintas;
}

Šešėlių efektų taikymas

.mesti šešėlį {
filtras: šešėlinis šešėlis (0,5em 0,5em 0,1em #555);
}
.box-shadow {
langelis-šešėlis: 0,5em 0,5em 0,1em #555;
}
.text-shadow {
tekstas-šešėlis: 0.5em 0.5em 0.1em #555;
}

Išvestis:

Jūs galite pamatyti, kad dėžutė-šešėlis suteikia sunkesnį, tamsesnį šešėlį nei tekstas-šešėlis ir mesti šešėlį. Be to, šiek tiek skiriasi šešėlio padėtis tekstas-šešėlis ir mesti šešėlį. Nepaisant to, pagal savo poreikius galite pasirinkti skirtingus šešėlių efektus.

Naršyklės palaikymas

The mesti šešėlį( ) funkcija palaikoma visose šiuolaikinėse naršyklėse, išskyrus senesnes naršykles, tokias kaip Internet Explorer. Nors tai nėra kažkas, kas rimtai trukdytų UX, galite pridėti funkcijos užklausą naudodami dėžutė-šešėlis atsitraukti.

Eksperimentuokite su skirtingais šešėlių efektais

Populiarumas iš dėžutė-šešėlis yra gana akivaizdu dėl daugybės naudojimo atvejų. Tačiau, mesti šešėlį( ) funkcija labai mažai išnaudojama. Tikimės, kad eksperimentuosite su skirtingais šešėlių efektais ir bandysite juos įgyvendinti mesti šešėlį savo būsimuose projektuose.

Pseudoklasės prideda visiškai naujų funkcijų prie CSS ir jūsų asmeninio žiniatinklio kūrimo repertuaro. Sužinokite daugiau apie juos, kad taptumėte įgudęs ir efektyvesnis žiniatinklio kūrėjas.

Kaip naudoti CSS langelio šešėlį: 13 gudrybių ir pavyzdžių

Nuobodžios dėžutės atrodo nuobodžiai. Papuoškite juos CSS langelio šešėlių efektu!

Skaitykite toliau

Apie autorių