Kako stvoriti sjenku pomoću CSS-a

Iako se trendovi dizajna razlikuju svake godine, možete računati na korištenje osnovnih efekata sjene kao što su kutija-sjena i pad-sjena pozitivno doprinijeti estetici web stranice. Možeš koristiti padajuće sjene kako biste stvorili ugodne, lijepo izvedene efekte, a da pritom ne ispadnu bezobrazni.

Pogledajmo pobliže CSS pad-sjena imovine.

Što je CSS drop-shadow?

sjena ( ) je CSS efekt koji prikazuje sjenu oko oblika određenog objekta. Evo sintakse za primjenu CSS-a pad-sjena.

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

Postoji širok raspon funkcije filtera uključujući zamutiti ( ), svjetlina ( ), i sjena ( ).

pomak-x određuje horizontalnu udaljenost i offset-y određuje vertikalnu udaljenost. Imajte na umu da negativne vrijednosti postavljaju sjenu lijevo (pomak-x) i iznad (offset-y) predmet.

Posljednja dva parametra nisu obavezna. Možete odrediti radijus zamućenja sjene kao duljinu. Prema zadanim postavkama, postavljeno je na 0. Ne možete imati negativan radijus zamućenja.

Boja sjene je određena kao. Ako niste naveli boju, ona slijedi vrijednost boja imovine.

Kada je CSS drop-shadow korisna?

Možda to već znate kutija-sjena radi posao prilično dobro. Dakle, možete pomisliti, zašto nam treba pad-sjena uopće? Brojni su slučajevi u kojima se sjena ( ) funkcija je spas. Pogledajmo neke od njih:

Nepravokutni oblici

Za razliku od a kutija-sjena, možete dodati a pad-sjena na nepravokutne oblike. Na primjer, imamo prozirni SVG ili PNG nepravokutnog oblika - na primjer, zvijezdu. Ovdje se dodavanje sjene koja odgovara samom objektu može dovršiti bilo kojim kutija-sjena ili pad-sjena. Razmotrite oba scenarija:

HTML

CSS

.star-img img {
prikaz: inline-block;
visina: 15em;
širina: 25em;
}
.box-shadow {
boja: crvena;
kutija-sjena: 0,60em 0,60em 0,2em;
}
.drop-shadow {
filter: drop-shadow (0,60em 0,60em 0,2em);
}

Izlaz:

Kada se uspoređuju oba učinka, očito je da a kutija-sjena daje pravokutnu sjenu; također nije važno je li slika prozirna ili već posjeduje pozadinu. S druge strane, pad-sjena omogućuje stvaranje sjene koja je u skladu s oblikom same slike.

Ograničavajući čimbenici su da sjena ( ) funkcija prihvaća sve parametre tipa osim umetnuti ključna riječ i širenje parametar.

Grupirani elementi

Postoji nekoliko slučajeva kada ćete možda morati izgraditi komponente preklapanjem određenih elemenata. Ako koristite kutija-sjena, suočit ćete se s problemom pokušaja baciti sjenu na pravi način. Evo kako to funkcionira pri grupiranju slike i tekstualne komponente:

HTML

Živjeti u 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

tijelo {
padding: 5em 1em;
obitelj fontova: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Ženeva, Verdana, sans-serif;
}
h2 {
veličina fonta: 2rem;
}
p {
veličina fonta: 0,8rem;
}
.parent-container {
zaslon: flex;
flex-direction: stupac;
visina: 17rem;
širina: 50em;
}
.image-container img {
širina: 15em;
pozicija: apsolutna;
z-indeks: 1;
vrh: 2em;
lijevo: 1,5em;
}
.text-container {
boja: rgb (255, 236, 236);
boja pozadine: rgb (141 0 35);
širina: 30rem;
padding: 3rem;
align-self: flex-end;
položaj: relativan;
}

Sada primijenite kutija-sjena i pad-sjena vidjeti razliku.

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

Izlaz:

Kao što možete vidjeti, kutija-sjena primjenjuje se na svaki element pojedinačno dok je pad-sjena grupira oboje i primjenjuje sjenu.

Izrezani elementi

Možete koristiti clip-path svojstvo izrezivanja određene regije koje određuje koji dijelovi slike ili elementa trebaju biti prikazani. The drop-shadow filter omogućuje nam stvaranje a pad-sjena na izrezani element primjenom na roditelj tog elementa:

HTML

CSS

.parent-container {
filter: drop-shadow (0rem 0rem 1.5rem maroon);
}
.clipped-element {
širina: 50em;
visina: 50em;
margina: 0 auto;
background-image: url (smiling-girl.jpg);
clip-path: krug (50%);
veličina pozadine: naslovnica;
background-repeat: ne-ponavljanje;
}

Izlaz:

Izrezali smo 50% slike kružnom putanjom. Stoga, drop-shadow filter primjenjuje se samo na vidljivi dio slike. Nije li sjajno?

Ograničenja i razlike

Kao što smo gore raspravljali, pad-sjena ne podržava širenje parametar. To znači da stvaranje efekta obrisa ne bi bilo moguće pomoću sjena ( ) funkcionira jer se posvuda ubija. Također, daje različite efekte sjena od kutija-sjena i tekst-sjena (s istim parametrima). Možda ćete osjetiti da su razlike između kutija-sjena i pad-sjena zakuhati na CSS Box Model. Jedan ga prati dok drugi ne. Evo primjera:

HTML

Svaki članak MUO dovest će vas korak bliže.


Svaki članak MUO dovest će vas korak bliže.



Svaki članak MUO dovest će vas korak bliže.

Osnovni CSS

tijelo {
padding: 5em 1em;
obitelj fontova: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Ženeva, Verdana, sans-serif;
}
.parent-container {
širina: 72rem;
}
p {
veličina fonta: 3em;
stil fonta: podebljan;
}

Primjena efekata sjene

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

Izlaz:

Možete vidjeti da je kutija-sjena daje težu, tamniju sjenu od tekst-sjena i pad-sjena. Također, postoji mala razlika u pozicioniranju sjene između tekst-sjena i pad-sjena. Ipak, možda ćete preferirati različite efekte sjena prema vašim zahtjevima.

Podrška za preglednik

The sjena ( ) funkcija je podržana u svim modernim preglednicima osim u starijim preglednicima kao što je Internet Explorer. Iako to nije nešto što bi ozbiljno ometalo UX, možete dodati upit za značajku s kutija-sjena zamjenski.

Eksperimentirajte s različitim efektima sjene

Popularnost od kutija-sjena je sasvim očito zbog mnoštva slučajeva korištenja. Međutim sjena ( ) funkcija je vrlo nedovoljno iskorištena. Nadamo se da ćete eksperimentirati s različitim efektima sjene i pokušati implementirati pad-sjena u svojim budućim projektima.

Pseudo-klase dodaju potpuno novi raspon funkcionalnosti CSS-u i vašem osobnom repertoaru web razvoja. Saznajte više o njima kako biste postali iskusniji i učinkovitiji web programer.

Kako koristiti CSS box-shadow: 13 trikova i primjera

Blaga kutije izgledaju dosadno. Uljepšajte ih CSS efektom sjene kutije!

Pročitajte dalje

O autoru