Cum se creează o umbră cu CSS

Deși tendințele de design variază în fiecare an, puteți conta pe utilizarea efectelor de umbră de bază, cum ar fi cutie-umbră și umbra pentru a contribui pozitiv la estetica unui site web. Poți să folosești umbre pentru a crea efecte plăcute, frumos redate, fără să pară brânzoase.

Să aruncăm o privire mai atentă la CSS umbra proprietate.

Ce este CSS drop-shadow?

umbra( ) este un efect CSS care afișează o umbră în jurul formei unui obiect specificat. Iată sintaxa pentru aplicarea unui CSS umbra.

Sintaxă:
filtru: drop-shadow (offset-x offset-y blur-raza de culoare);

Există o gamă largă de funcții de filtrare inclusiv estompare ( ), luminozitate ( ), și umbra( ).

offset-x determină distanţa orizontală şi offset-y determină distanța verticală. Rețineți că valorile negative plasează umbra la stânga (offset-x) Si mai sus (offset-y) obiectul.

Ultimii doi parametri sunt opționali. Puteți specifica raza de estompare a umbrei ca lungime. În mod implicit, este setat la 0. Nu puteți avea o rază de estompare negativă.

Culoarea umbrei este specificată ca. Dacă nu ați specificat o culoare, aceasta urmează valoarea lui culoare proprietate.

Când este util drop-shadow CSS?

Poate știi deja asta cutie-umbră face treaba destul de bine. Deci, vă puteți gândi, de ce avem nevoie umbra deloc? Există numeroase cazuri în care umbra( ) funcția este salvatoare. Să aruncăm o privire la câteva dintre ele:

Forme non-dreptunghiulare

Spre deosebire de a cutie-umbră, puteți adăuga un umbra la forme nedreptunghiulare. De exemplu, avem un SVG sau PNG transparent cu o formă nedreptunghiulară - o stea de exemplu. Aici, adăugarea unei umbre care corespunde obiectului în sine poate fi completată cu oricare cutie-umbră sau umbra. Luați în considerare ambele scenarii:

HTML

CSS

.star-img img {
display: inline-block;
inaltime: 15em;
latime: 25em;
}
.box-shadow {
culoarea rosie;
casetă-umbră: 0.60em 0.60em 0.2em;
}
.umbra {
filtru: drop-shadow (0.60em 0.60em 0.2em);
}

Ieșire:

Când comparăm ambele efecte, este evident că a cutie-umbră dă o umbră dreptunghiulară; De asemenea, nu contează dacă imaginea este transparentă sau are deja un fundal. Pe de altă parte, umbra vă permite să creați o umbră care se conformează formei imaginii în sine.

Factorii limitativi sunt că umbra( ) funcția acceptă toți parametrii de tip cu excepția medalion cuvânt cheie și răspândire parametru.

Elemente grupate

Există mai multe situații în care este posibil să fie nevoie să construiți componente prin suprapunerea anumitor elemente. Daca folosesti cutie-umbră, te vei confrunta cu problema de a încerca să arunci o umbră în modul corect. Iată cum funcționează atunci când grupați o imagine și o componentă de text:

HTML

Trăiește clipa

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.

CSS de bază

corp {
umplutura: 5em 1em;
familie de fonturi: „Lucida Sans”, „Lucida Sans Regular”, „Lucida Grande”,
'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
h2 {
dimensiunea fontului: 2rem;
}
p {
dimensiunea fontului: 0.8rem;
}
.parent-container {
display: flex;
flex-direcție: coloană;
inaltime: 17rem;
latime: 50em;
}
.image-container img {
latime: 15em;
poziție: absolută;
indicele z: 1;
sus: 2em;
stânga: 1,5 em;
}
.text-container {
culoare: rgb (255, 236, 236);
culoare de fundal: rgb (141 0 35);
latime: 30rem;
captuseala: 3rem;
align-self: flex-end;
poziție: relativă;
}

Acum, aplicați cutie-umbră și umbra pentru a vedea diferența.

.umbra {
filtru: drop-shadow (0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0.5));
}
.cutie,
.box img {
box-shadow: 0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0.3);
}

Ieșire:

După cum puteți vedea, cutie-umbră se aplică pe fiecare element individual în timp ce umbra le grupează pe amândouă și aplică umbra.

Elemente tăiate

Puteți folosi clip-path proprietate de a decupa o anumită regiune care determină ce părți ale unei imagini sau ale unui element trebuie afișate. The filtru de umbră ne permite să creăm o umbra pe elementul decupat prin aplicarea acestuia la părintele acelui element:

HTML

CSS

.parent-container {
filtru: drop-shadow (0rem 0rem 1.5rem maroon);
}
.element-decupat {
latime: 50em;
inaltime: 50em;
marja: 0 auto;
imagine de fundal: url (smiling-girl.jpg);
clip-path: cerc (50%);
dimensiunea fundalului: coperta;
background-repeat: fără repetare;
}

Ieșire:

Am tăiat 50% din imagine cu o cale circulară. De aceea filtru de umbră se aplică doar părții vizibile a imaginii. Nu este minunat?

Limitări și diferențe

După cum am discutat mai sus, umbra nu suportă răspândire parametru. Aceasta înseamnă că crearea unui efect de contur nu ar fi posibilă folosind umbra( ) funcționează pentru că este ucis peste tot. De asemenea, redă diferite efecte de umbră de la cutie-umbră și text-umbră (cu aceiași parametri). S-ar putea să simți că diferențele dintre cutie-umbră și umbra se rezumă la Model de casetă CSS. Unul îl urmează, în timp ce celălalt nu. Iată un exemplu:

HTML

Fiecare articol MUO vă va aduce cu un pas mai aproape.


Fiecare articol MUO vă va aduce cu un pas mai aproape.



Fiecare articol MUO vă va aduce cu un pas mai aproape.

CSS de bază

corp {
umplutura: 5em 1em;
familie de fonturi: „Lucida Sans”, „Lucida Sans Regular”, „Lucida Grande”,
'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.parent-container {
latime: 72rem;
}
p {
dimensiunea fontului: 3em;
stil font: bold;
}

Aplicarea efectelor de umbră

.umbra {
filtru: drop-shadow (0.5em 0.5em 0.1em #555);
}
.box-shadow {
box-shadow: 0,5em 0,5em 0,1em #555;
}
.text-shadow {
text-shadow: 0.5em 0.5em 0.1em #555;
}

Ieșire:

Puteți vedea că cutie-umbră dă o umbră mai grea, mai întunecată decât cea text-umbră și umbra. De asemenea, există o ușoară diferență în poziționarea umbrei între text-umbră și umbra. Cu toate acestea, este posibil să preferați diferite efecte de umbră în funcție de cerințele dvs.

Suport pentru browser

The umbra( ) funcția este acceptată în toate browserele moderne, cu excepția browserelor mai vechi, cum ar fi Internet Explorer. Deși nu este ceva care ar împiedica în mod serios UX, puteți adăuga o interogare de caracteristică cu a cutie-umbră da înapoi.

Experimentați cu diferite efecte de umbră

Popularitatea lui cutie-umbră este destul de evident din cauza multitudinii de cazuri de utilizare. Însă umbra( ) funcția este foarte subutilizată. Sperăm că veți experimenta diferite efecte de umbră și veți încerca să le implementați umbra în proiectele tale viitoare.

Pseudo-clasele adaugă o gamă complet nouă de funcționalități CSS și repertoriului tău personal de dezvoltare web. Aflați mai multe despre ei pentru a deveni un dezvoltator web mai competent și mai eficient.

Cum să utilizați CSS box-shadow: 13 trucuri și exemple

Cutiile blande par plictisitoare. Îmbunătățiți-le cu efectul de umbră cutie CSS!

Citiți în continuare

Despre autor