Umbra este un efect care scade sau adaugă o umbră în spatele elementelor HTML selectate atunci când sunt randate pe pagina web. Acest efect poate fi obținut folosind „ umbra() „metoda ca valoare pentru CSS” filtru ” sau folosind ” cutie-umbră ” proprietate. Prin utilizarea proprietății „box-shadow”, îmbunătățirea vizuală, experiența utilizatorului, accentul și concentrarea pot fi atrase către un anumit element HTML vizat.
Acest ghid demonstrează procedura de realizare a unui efect de umbră, folosind proprietatea box-shadow:
-
- Creați o umbră solidă folosind proprietatea box-shadow
- Faceți o umbră neclară folosind proprietatea box-shadow
- Extindeți zona de umbră
Cum se creează umbre în CSS3 folosind proprietatea box-shadow?
„ cutie-umbră ” proprietate permite dezvoltatorului să stabilească o ierarhie vizuală prin indicarea poziției relative a elementelor pe pagină. Folosind-o, creatorii de pagini web pot crea iluzia obiectelor care aruncă umbre pe suprafețe, oferind elementelor o senzație mai interactivă.
Sintaxă
Proprietatea „box-shadow” are o sintaxă de:
cutie-umbra: [ offset orizontal ] [ offset vertical ] [ raza de estompare ] [ raza de răspândire ] [ culoare ] ;
O explicație a termenilor utilizați în sintaxa de mai sus:
-
- Inițial, „ offset orizontal ” preia/ stochează poziția axei X, iar „ negativ ” valoarea setează umbra la stânga și invers.
- „ offset vertical „” stochează poziția axei Y, „ pozitiv ” valoarea setează umbra în direcția în jos, și invers în cazul ” negativ ” valoare.
- În continuare, „ raza de estompare ” valoarea din nume stabilește neclaritatea umbrei.
- „ raza de răspândire ” valoarea specifică cât de mult ar trebui să se extindă umbra.
- „ culoare ” setează culoarea umbrei, poate fi în „ HSL ” sau ” RGB ” de asemenea.
Acum, să trecem prin câteva exemple pentru o mai bună înțelegere:
Exemplul 1: Aplicați o umbră solidă folosind proprietatea box-shadow
Pentru a seta umbra interioară solidă, numai direcțiile și culoarea umbrei sunt inserate ca valoare pentru „ cutie-umbră ” proprietate:
< stil >.boxShadowExample {
latime: 210px;
chenar: 2px mătase solidă;
înălțime: 210px;
culoare de fundal: #f0f0f0;
box-shadow: 10px 10px forestgreen;
}
stil >
În codul de mai sus:
-
- În primul rând, elementul HTML este selectat având o clasă de „ casetaShadowExample ”. Iar valoarea lui „ 210px ' este furnizat către ' înălţime ' și ' lăţime ” proprietăți. De asemenea, utilizați „ frontieră ' și ' culoare de fundal ” proprietăți pentru o mai bună vizualizare.
- Apoi, setați valoarea „ 10px 10px verde pădure „la „ cutie-umbră ” Proprietate CSS. „ 10px ” este decalajul orizontal și vertical care determină locația în care trebuie să se aplice umbra. Si ' padure verde ” este culoarea umbrei.
După compilare, pagina web apare astfel:
Ieșirea confirmă că o umbră de tip solid a fost plasată folosind proprietatea box-shadow.
Exemplul 2: Aplică Blurry Drop Shadow utilizând proprietatea box-shadow
Pentru ca umbra deja aplicată să fie neclară, se mai introduce o valoare numerică înainte de culoarea pentru „ cutie-umbră ” proprietate. Vizitați codul actualizat de mai jos:
< stil >.boxShadowExample {
latime: 210px;
chenar: 2px mătase solidă;
înălțime: 210px;
culoare de fundal: fum alb;
casetă-umbră: 10px 10px 15px pădure;
}
stil >
Conform codului de mai sus, umbra este acum „ 15px ' in ceata. După încheierea fazei de compilare, pagina web arată astfel:
Figura de mai sus arată că umbra este acum neclară.
Exemplul 3: Extinderea zonei de umbră
Valoarea spread-ului este furnizată către „ cutie-umbră ” proprietate pentru extinderea regiunii umbrei. Valoarea spread-ului trebuie să fie în format numeric. Ca și în fragmentul de cod de mai jos, regiunea umbră este extinsă la „ 20px ”:
< stil >.boxShadowExample {
latime: 210px;
chenar: 2px mătase solidă;
înălțime: 210px;
culoare de fundal: fum alb;
casetă-umbră: 10px 10px 15px 20px pădure;
}
stil >
După execuție, umbra interioară apare acum astfel:
După cum puteți vedea, regiunea umbrei este acum mărită cu 20px.
Concluzie
„ cutie-umbră „proprietatea este utilizată pentru crearea unui „ umbra ” efect asupra elementelor HTML selectate. „ umbra „proprietatea acceptă cinci valori,” offset orizontal ”, “ offset vertical ”, “ raza de estompare ”, “ raza de răspândire ' și ' culoare ”. Valorile „decalaj orizontal” și „decalaj vertical” stabilesc dimensiunile umbrei de unde ar trebui să iasă umbra. Valoarea „razei de estompare” face umbra neclară, iar valoarea „razei de răspândire” extinde regiunea umbrei.