Kako ustvariti senco s CSS

Čeprav se trendi oblikovanja vsako leto razlikujejo, lahko računate na uporabo osnovnih učinkov senc, kot so škatla-senca in padajoča senca pozitivno prispevati k estetiki spletne strani. Lahko uporabiš padajoče sence za ustvarjanje prijetnih, lepo upodobljenih učinkov, ne da bi izpadli kot sirasti.

Oglejmo si podrobneje CSS padajoča senca lastnine.

Kaj je senca CSS?

padajoča senca ( ) je učinek CSS, ki prikaže senco okoli oblike določenega predmeta. Tukaj je sintaksa za uporabo CSS padajoča senca.

sintaksa:
filter: drop-shadow (offset-x offset-y blur-radius color);

Obstaja široka paleta funkcije filtra vključno z zamegljenost ( ), svetlost ( ), in padajoča senca ( ).

odmik-x določa vodoravno razdaljo in offset-y določa navpično razdaljo. Upoštevajte, da negativne vrednosti postavijo senco na levo (odmik-x) in zgoraj (offset-y) predmet.

Zadnja dva parametra sta neobvezna. Polmer zamegljenosti sence lahko določite kot dolžino. Privzeto je nastavljena na 0. Ne morete imeti negativnega polmera zamegljenosti.

Barva sence je določena kot. Če niste navedli barve, sledi vrednosti barva lastnine.

Kdaj je senca CSS uporabna?

Morda to že veste škatla-senca opravlja delo precej dobro. Torej, lahko pomislite, zakaj potrebujemo padajoča senca nasploh? Obstajajo številni primeri, ko padajoča senca ( ) funkcija je reševalna. Oglejmo si nekaj izmed njih:

Nepravokotne oblike

Za razliko od a škatla-senca, lahko dodate a padajoča senca na nepravokotne oblike. Na primer, imamo prozoren SVG ali PNG z nepravokotno obliko - na primer zvezdo. Tukaj lahko dodate senco, ki ustreza samemu predmetu, dokončate s katerim koli škatla-senca oz padajoča senca. Razmislite o obeh scenarijih:

HTML

CSS

.star-img img {
zaslon: inline-block;
višina: 15em;
širina: 25em;
}
.box-shadow {
barva: rdeča;
senca škatle: 0,60em 0,60em 0,2em;
}
.drop-shadow {
filter: padajoča senca (0,60em 0,60em 0,2em);
}

Izhod:

Če primerjamo oba učinka, je očitno, da a škatla-senca daje pravokotno senco; prav tako ni pomembno, ali je slika pregledna ali že ima ozadje. Po drugi strani, padajoča senca omogoča ustvarjanje sence, ki ustreza obliki same slike.

Omejevalni dejavniki so, da padajoča senca ( ) funkcija sprejema vse parametre tipa razen vložek ključno besedo in širjenje parameter.

Združeni elementi

Obstaja več primerov, ko boste morda morali sestaviti komponente s prekrivanjem določenih elementov. Če uporabljate škatla-senca, se boste soočili s težavo, da poskušate na pravi način metati senco. Takole deluje pri združevanju slike in besedilne komponente:

HTML

Živeti v tem trenutku

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.

Osnovni CSS

telo {
oblazinjenje: 5em 1em;
družina pisav: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
„Lucida Sans Unicode“, Ženeva, Verdana, sans-serif;
}
h2 {
velikost pisave: 2rem;
}
p {
velikost pisave: 0,8rem;
}
.parent-container {
zaslon: flex;
flex-direction: stolpec;
višina: 17rem;
širina: 50em;
}
.image-container img {
širina: 15em;
položaj: absolutni;
z-indeks: 1;
vrh: 2em;
levo: 1,5em;
}
.text-container {
barva: rgb (255, 236, 236);
barva ozadja: rgb (141 0 35);
širina: 30rem;
oblazinjenje: 3 rem;
align-self: flex-end;
položaj: relativni;
}

Zdaj pa uporabite škatla-senca in padajoča senca da vidim razliko.

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

Izhod:

Kot lahko vidite, škatla-senca se nanaša na vsak element posebej, medtem ko je padajoča senca združi oba in uporabi senco.

Izrezani elementi

Lahko uporabite posnetek-pot lastnost za izrezovanje določene regije, ki določa, kateri deli slike ali elementa naj bodo prikazani. The senčni filter nam omogoča ustvarjanje a padajoča senca na odrezanem elementu, tako da ga uporabite za nadrejenega elementa:

HTML

CSS

.parent-container {
filter: drop-shadow (0rem 0rem 1.5rem maroon);
}
.clipped-element {
širina: 50em;
višina: 50em;
marža: 0 samodejno;
slika ozadja: url (smiling-girl.jpg);
pot posnetka: krog (50%);
velikost ozadja: naslovnica;
ponovitev ozadja: brez ponovitve;
}

Izhod:

Odrezali smo 50 % slike s krožno potjo. Zato je senčni filter se uporablja samo za vidni del slike. Ali ni super?

Omejitve in razlike

Kot smo razpravljali zgoraj, padajoča senca ne podpira širjenje parameter. To pomeni, da ustvarjanje učinka orisa ne bi bilo mogoče z uporabo padajoča senca ( ) deluje, ker se povsod ubije. Prav tako upodablja različne učinke senc iz škatla-senca in senca besedila (z enakimi parametri). Morda se vam zdi, da so razlike med škatla-senca in padajoča senca zavreti na Model škatle CSS. Eden mu sledi, drugi pa ne. Tukaj je primer:

HTML

Vsak članek MUO vas bo pripeljal korak bližje.


Vsak članek MUO vas bo pripeljal korak bližje.



Vsak članek MUO vas bo pripeljal korak bližje.

Osnovni CSS

telo {
oblazinjenje: 5em 1em;
družina pisav: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
„Lucida Sans Unicode“, Ženeva, Verdana, sans-serif;
}
.parent-container {
širina: 72rem;
}
p {
velikost pisave: 3em;
slog pisave: krepko;
}

Uporaba senčnih učinkov

.drop-shadow {
filter: padajoča senca (0,5em 0,5em 0,1em #555);
}
.box-shadow {
senca škatle: 0,5em 0,5em 0,1em #555;
}
.text-shadow {
senca besedila: 0,5em 0,5em 0,1em #555;
}

Izhod:

Vidite lahko, da škatla-senca daje močnejšo, temnejšo senco kot senca besedila in padajoča senca. Prav tako je majhna razlika v pozicioniranju sence med senca besedila in padajoča senca. Kljub temu boste morda raje imeli različne učinke senc glede na vaše zahteve.

Podpora za brskalnik

The padajoča senca ( ) Funkcija je podprta v vseh sodobnih brskalnikih, razen v starejših brskalnikih, kot je Internet Explorer. Čeprav to ni nekaj, kar bi resno oviralo UX, lahko dodate poizvedbo o funkcijah z škatla-senca pasti nazaj.

Eksperimentirajte z različnimi učinki senc

Priljubljenost oz škatla-senca je precej očitna zaradi številnih primerov uporabe. Vendar pa je padajoča senca ( ) funkcija je zelo premalo izkoriščena. Upamo, da boste eksperimentirali z različnimi učinki senc in jih poskušali implementirati padajoča senca v vaših prihodnjih projektih.

Psevdo-razredi dodajo popolnoma novo paleto funkcionalnosti CSS-ju in vašemu osebnemu repertoarju spletnega razvoja. Preberite več o njih, da postanete bolj izkušen in učinkovit spletni razvijalec.

Kako uporabljati CSS box-shadow: 13 trikov in primerov

Blage škatle so videti dolgočasne. Popestrite jih z učinkom sence škatle CSS!

Preberite Naprej

O avtorju