Kā izveidot ēnu, izmantojot CSS

Lai gan dizaina tendences katru gadu atšķiras, varat paļauties uz tādu galveno ēnu efektu izmantošanu kā kaste-ēna un ēnas lai pozitīvi veicinātu vietnes estētiku. Tu vari izmantot ēnas lai radītu patīkamus, skaisti atveidotus efektus, neizraisot sierīgus efektus.

Sīkāk apskatīsim CSS ēnas īpašums.

Kas ir CSS nolaižamā ēna?

ēnas ( ) ir CSS efekts, kas parāda ēnu ap norādītā objekta formu. Šeit ir norādīta CSS lietošanas sintakse ēnas.

Sintakse:
filtrs: drop-shadow (offset-x offset-y blur-radius color);

Ir plašs klāsts filtru funkcijas ieskaitot aizmiglot ( ), spilgtums ( ), un ēnas ( ).

nobīde-x nosaka horizontālo attālumu un nobīde-y nosaka vertikālo attālumu. Ņemiet vērā, ka negatīvās vērtības novieto ēnu pa kreisi (nobīde-x) un augstāk (nobīde-y) objektu.

Pēdējie divi parametri nav obligāti. Varat norādīt ēnas izplūšanas rādiusu kā garumu. Pēc noklusējuma tas ir iestatīts uz 0. Nevar būt negatīvs aizmiglošanas rādiuss.

Ēnas krāsa ir norādīta kā. Ja neesat norādījis krāsu, tā atbilst vērtībai krāsa īpašums.

Kad ir noderīga CSS nolaižamā ēna?

Jūs to jau varat zināt kaste-ēna dara darbu diezgan labi. Tātad, jūs varat domāt, kāpēc mums tas ir vajadzīgs ēnas pavisam? Ir daudz gadījumu, kad ēnas ( ) funkcija ir dzīvības glābējs. Apskatīsim dažus no tiem:

Formas, kas nav taisnstūrveida

Atšķirībā no a kaste-ēna, varat pievienot a ēnas uz netaisnstūrveida formām. Piemēram, mums ir caurspīdīgs SVG vai PNG forma, kas nav taisnstūra forma, piemēram, zvaigzne. Šeit ēnas pievienošanu, kas atbilst pašam objektam, var pabeigt ar vienu vai otru kaste-ēna vai ēnas. Apsveriet abus scenārijus:

HTML

CSS

.star-img img {
displejs: inline-block;
augstums: 15 em;
platums: 25em;
}
.box-shadow {
krāsa: sarkana;
kaste-ēna: 0,60 em 0,60 em 0,2 em;
}
.drop-shadow {
filtrs: nolaižamā ēna (0,60 em 0,60 em 0,2 em);
}

Izvade:

Salīdzinot abus efektus, ir skaidrs, ka a kaste-ēna dod taisnstūrveida ēnu; nav arī nozīmes tam, vai attēls ir caurspīdīgs vai tam jau ir fons. No otras puses, ēnas ļauj izveidot ēnu, kas atbilst paša attēla formai.

Ierobežojošie faktori ir tādi ēnas ( ) funkcija pieņem visus tipa parametrus izņemot ielaidums atslēgvārds un izplatība parametrs.

Grupēti elementi

Ir vairāki gadījumi, kad var būt nepieciešams izveidot komponentus, pārklājot noteiktus elementus. Ja jūs lietojat kaste-ēna, jūs saskarsities ar problēmu, mēģinot pareizi mest ēnu. Lūk, kā tas darbojas, grupējot attēlu un teksta komponentu:

HTML

Dzīvo brīdī

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.

Pamata CSS

body {
polsterējums: 5em 1em;
fontu saime: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
'Lucida Sans Unicode', Ženēva, Verdana, sans-serif;
}
h2 {
fonta izmērs: 2rem;
}
p {
fonta izmērs: 0,8 rem;
}
.parent-container {
displejs: flex;
flex-direction: kolonna;
augstums: 17 rem;
platums: 50em;
}
.image-container img {
platums: 15em;
pozīcija: absolūta;
z-indekss: 1;
augšā: 2em;
pa kreisi: 1.5em;
}
.text-container {
krāsa: rgb (255, 236, 236);
fona krāsa: rgb (141 0 35);
platums: 30rem;
polsterējums: 3rem;
align-self: flex-end;
pozīcija: relatīvs;
}

Tagad pielietojiet kaste-ēna un ēnas lai redzētu atšķirību.

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

Izvade:

Kā redzat, kaste-ēna tiek piemērots katram elementam atsevišķi, kamēr ēnas sagrupē abus un piemēro ēnu.

Apgriezti elementi

Jūs varat izmantot klipu ceļš Īpašums, lai izgrieztu noteiktu reģionu, kas nosaka, kuras attēla vai elementa daļas ir jāparāda. The ēnu filtrs ļauj mums izveidot a ēnas apgrieztajam elementam, piemērojot to šī elementa vecākam:

HTML

CSS

.parent-container {
filtrs: drop-shadow (0rem 0rem 1.5rem maroon);
}
.clipped-element {
platums: 50em;
augstums: 50 em;
piemale: 0 auto;
fona attēls: url (smaidoša meitene.jpg);
klipceļš: aplis (50%);
fona izmērs: vāks;
fona atkārtojums: neatkārtot;
}

Izvade:

Mēs esam izgriezuši 50% attēla ar apļveida ceļu. Tāpēc, ēnu filtrs tiek piemērots tikai attēla redzamajai daļai. Vai tas nav lieliski?

Ierobežojumi un atšķirības

Kā mēs apspriedām iepriekš, ēnas neatbalsta izplatība parametrs. Tas nozīmē, ka kontūras efekta izveide nebūtu iespējama, izmantojot ēnas ( ) funkcija, jo tā tiek nogalināta visur. Turklāt tas rada atšķirīgus ēnu efektus no kaste-ēna un teksts-ēna (ar tiem pašiem parametriem). Jums var šķist, ka atšķirības starp kaste-ēna un ēnas vārīties līdz CSS kastes modelis. Viens tam seko, bet otrs nē. Šeit ir piemērs:

HTML

Katrs MUO raksts jūs vedīs soli tuvāk.


Katrs MUO raksts jūs vedīs soli tuvāk.



Katrs MUO raksts jūs vedīs soli tuvāk.

Pamata CSS

body {
polsterējums: 5em 1em;
fontu saime: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
'Lucida Sans Unicode', Ženēva, Verdana, sans-serif;
}
.parent-container {
platums: 72rem;
}
p {
fonta izmērs: 3em;
fonta stils: treknraksts;
}

Ēnu efektu pielietošana

.drop-shadow {
filtrs: drop-shadow (0.5em 0.5em 0.1em #555);
}
.box-shadow {
box-shadow: 0.5em 0.5em 0.1em #555;
}
.text-shadow {
teksta ēna: 0.5em 0.5em 0.1em #555;
}

Izvade:

Jūs varat redzēt, ka kaste-ēna dod smagāku, tumšāku ēnu nekā teksts-ēna un ēnas. Turklāt ir neliela atšķirība starp ēnu novietojumu teksts-ēna un ēnas. Tomēr jūs varat dot priekšroku dažādiem ēnu efektiem atbilstoši savām prasībām.

Pārlūka atbalsts

The ēnas ( ) funkcija tiek atbalstīta visās mūsdienu pārlūkprogrammās, izņemot vecākas pārlūkprogrammas, piemēram, Internet Explorer. Lai gan tas nav kaut kas tāds, kas nopietni traucētu UX, varat pievienot funkcijas vaicājumu ar kaste-ēna atkāpties.

Eksperimentējiet ar dažādiem ēnu efektiem

Popularitāte kaste-ēna ir diezgan acīmredzams daudzo lietošanas gadījumu dēļ. Tomēr ēnas ( ) funkcija ir ļoti nepietiekami izmantota. Mēs ceram, ka jūs eksperimentēsit ar dažādiem ēnu efektiem un mēģināsit tos ieviest ēnas savos turpmākajos projektos.

Pseidoklases pievieno pilnīgi jaunu funkcionalitātes klāstu CSS un jūsu personīgajam tīmekļa izstrādes repertuāram. Uzziniet vairāk par tiem, lai kļūtu par prasmīgāku un efektīvāku tīmekļa izstrādātāju.

Kā izmantot CSS kastes ēnu: 13 triki un piemēri

Mīkstās kastes izskatās garlaicīgas. Izdaiļojiet tos ar CSS kastes ēnu efektu!

Lasiet Tālāk

Par autoru