Sjena je efekt koji ispušta ili dodaje sjenu iza odabranih HTML elemenata kada se prikazuju na web stranici. Ovaj učinak se može postići pomoću ' padajuća sjena() ' metoda kao vrijednost za CSS ' filtar ' svojstvo ili pomoću ' kutija-sjena ” vlasništvo. Korištenjem svojstva 'box-shadow', vizualno poboljšanje, korisničko iskustvo, naglasak i fokus mogu se privući na određeni ciljani HTML element.
Ovaj vodič demonstrira postupak stvaranja efekta padajuće sjene pomoću svojstva box-shadow:
-
- Napravite čvrstu sjenu koristeći svojstvo box-shadow
- Napravite mutnu sjenu koristeći svojstvo box-shadow
- Proširite područje sjene
Kako napraviti sjene u CSS3 koristeći svojstvo box-shadow?
' kutija-sjena ” svojstvo omogućuje razvojnom programeru uspostavljanje vizualne hijerarhije označavanjem relativnog položaja elemenata na stranici. Koristeći ga, kreatori web stranica mogu stvoriti iluziju objekata koji bacaju sjene na površine, dajući elementima interaktivniji dojam.
Sintaksa
Svojstvo 'box-shadow' ima sintaksu:
okvir-sjena: [ horizontalni pomak ] [ vertikalni pomak ] [ radijus zamućenja ] [ radijus širenja ] [ boja ] ;
Objašnjenje pojmova korištenih u gornjoj sintaksi:
-
- U početku, ' horizontalni pomak ” dohvaća/pohranjuje položaj X-osi, a “ negativan ” vrijednost postavlja sjenu ulijevo i obrnuto.
- ' vertikalni pomak ' vrijednost pohranjuje položaj osi Y, ' pozitivan ” vrijednost postavlja sjenu u smjeru prema dolje, i obrnuto u slučaju “ negativan ” vrijednost.
- Zatim, ' radijus zamućenja ” vrijednost iz naziva postavlja zamućenje sjene.
- ' radijus širenja ” vrijednost određuje za koliko se radijusa sjena treba proširiti.
- ' boja ” postavlja boju sjene, može biti u “ HSL ' ili ' RGB ” također.
Prođimo sada kroz nekoliko primjera za bolje razumijevanje:
Primjer 1: Primjena pune sjene koristeći svojstvo box-shadow
Za postavljanje pune sjene, samo su smjerovi i boja sjene umetnuti kao vrijednost za ' kutija-sjena ” svojstvo:
< stil >.boxShadowExample {
širina: 210px;
rub: 2px čvrsta kukuruzna svila;
visina: 210px;
boja pozadine: #f0f0f0;
box-shadow: 10px 10px šumskozelena;
}
stil >
U gornjem kodu:
-
- Prvo se odabire HTML element koji ima klasu ' boxShadowExample ”. A vrijednost ' 210 px ' pruža se ' visina ' i ' širina ' Svojstva. Također, koristite ' granica ' i ' boja pozadine ” svojstva za bolju vizualizaciju.
- Zatim postavite vrijednost ' 10px 10px šumskozelena ' prema ' kutija-sjena ” CSS svojstvo. ' 10 px ” je vodoravni i okomiti pomak koji određuje mjesto na koje se treba primijeniti sjena. I ' šumskozelena ” je boja sjene.
Nakon kompilacije web stranica izgleda ovako:
Izlaz potvrđuje da je sjena pune vrste postavljena korištenjem svojstva box-shadow.
Primjer 2: Primjena zamućene sjene koristeći svojstvo box-shadow
Kako bi već primijenjena sjena bila mutna, umeće se još jedna brojčana vrijednost prije boje za ' kutija-sjena ” vlasništvo. Posjetite dolje ažurirani kod:
< stil >.boxShadowExample {
širina: 210px;
rub: 2px čvrsta kukuruzna svila;
visina: 210px;
boja pozadine: bijeli dim;
box-shadow: 10px 10px 15px šumskozelena;
}
stil >
Prema gornjem kodu, sjena je sada ' 15 px ” zamagljen. Nakon završetka faze kompilacije, web stranica izgleda ovako:
Gornja slika pokazuje da je sjena sada zamućena.
Primjer 3: Proširenje područja sjene
Vrijednost širenja daje se ' kutija-sjena ” svojstvo za proširenje područja sjene. Vrijednost spreada mora biti u numeričkom obliku. Kao u donjem isječku koda, područje sjene prošireno je na ' 20 px ”:
< stil >.boxShadowExample {
širina: 210px;
rub: 2px čvrsta kukuruzna svila;
visina: 210px;
boja pozadine: bijeli dim;
okvir-sjena: 10px 10px 15px 20px šumskozelena;
}
stil >
Nakon izvršenja, padajuća sjena sada izgleda ovako:
Kao što vidite područje sjene sada je povećano za 20px.
Zaključak
' kutija-sjena ' svojstvo se koristi za stvaranje ' padajuća sjena ” učinak na odabrane HTML elemente. ' padajuća sjena ” svojstvo prihvaća pet vrijednosti, “ horizontalni pomak ”, “ vertikalni pomak ”, “ radijus zamućenja ”, “ radijus širenja ' i ' boja ”. Vrijednosti 'horizontalnog pomaka' i 'vertikalnog pomaka' postavljaju dimenzije sjene odakle bi sjena trebala izlaziti. Vrijednost 'radijus zamućenja' čini sjenu mutnom, a vrijednost 'radijus širenja' proširuje područje sjene.