HTML je jezik koji se koristi za pružanje strukture web stranica, a CSS nam dopušta primjenu stilova na elemente. Na web stranici različite vrijednosti svojstava postavljene su za primjenu različitih stilova, kao što su boja pozadine, veličina fonta, obrub, radijus obruba, a jedna od njih je i sjena okvira.

Ovaj blog raspravljat će o metodi primjene efekata sjene na HTML elemente.

Kako ispustiti efekt sjene na HTML elemente pomoću CSS-a?

' kutija-sjena ” svojstvo dodaje sjenu oko elementa gdje se dvije ili više vrijednosti dodanih učinaka mogu odvojiti zarezima.

Sintaksa svojstva box-shadow opisana je u nastavku.

Sintaksa

kutija-sjena : nikakav |h-offset v-offset zamućenje raširene boje | umetnuti | početni | nasljeđuješ ;

Opis gore navedene sintakse naveden je u nastavku:

“ nikakav ”: To je zadana vrijednost svojstva box-shadow.
“ h-pomak ”: Ova vrijednost predstavlja horizontalnu udaljenost.
“ v-pomak ”: Ova vrijednost definira okomitu udaljenost.
“ zamutiti ”: Treća vrijednost je zamućenje. Povećanje njegove vrijednosti će povećati učinak zamućenja.
“ širenje ”: Četvrta vrijednost predstavlja širenje sjene. Može imati pozitivne ili negativne vrijednosti, gdje pozitivna vrijednost povećava spread, a negativna smanjuje.
“ boja ”: Ova vrijednost nije obavezna i predstavlja trenutnu boju.
“ početni ”: Ova vrijednost postavlja svojstvo početne vrijednosti.
“ nasljeđuješ ”: Ova vrijednost nasljeđuje svojstvo nadređenog elementa.
“ umetnuti ”: Umetnuta vrijednost koristi se za pravljenje sjena unutar okvira.

Pogledajmo kako efekt sjene izgleda kroz praktičan primjer.

Primjer

U HTML datoteku prvo dodajte '

”. Unutar ovog elementa

dodajte oznake

i
kako biste web stranici pružili sadržaj.

HTML

< div >

< h1 > Sjena kutije < / h1 >

< str > okvir-sjena: 3px 8px < / str >

< / div >

Sada primijenite CSS svojstva na dodane HTML elemente.

CSS

div {

kutija-sjena : 3 px 8 px ;

}

Element div primjenjuje se sa svojstvom ' kutija-sjena ' sa vrijednošću ' 3px 8px ”, što predstavlja vodoravni i okomiti pomak.

Izlaz

U sljedećem odjeljku, HTML elementi bit će oblikovani različitim svojstvima.

CSS

div {

granica : 5 px čvrsta rgb ( 255 , 111 , 1 ) ;

kutija-sjena : 3 px 8 px 9px 4 px #f4af1b ;

}

Slijede dodatna CSS svojstva primijenjena na element div:

“ granica ” svojstvu je dodijeljena vrijednost 5px solid rgb(255, 111,1) gdje 5px označava širinu obruba, solid predstavlja stil obruba, a rgb(255, 111, 1) je boja.
“ kutija-sjena ” svojstvo s vrijednošću 3px 8px 9px 4px #f4af1b predstavlja h-offset kao 3px, v-offset kao 8px, zamućenje kao 9px, širenje kao 4px, a #f4af1b određuje boju.

Gornji kod će prikazati element div kao što je prikazano u nastavku:

Sada, u sljedećem odjeljku, stvorite dva okvira koji predstavljaju dva div elementa. Svakom ćemo dati različite višestruke vrijednosti box-shadow i promatrati rezultate.

HTML

= 'box1' >

> Sjena kutije >

> kutija-sjena : 3 px 8 px 9px 4 px #f4af1b >

> > >

= 'kutija2' >

> Sjena kutije >

> kutija-sjena : 3 px 8 px 9px 4 px #f4af1b >

>

Style box1 div

#kutija1 {

širina : 40% ;

visina : 140 px ;

granica : 5 px čvrsta #ff9c83 ;

kutija-sjena : 8 px 10 px 15 px 20 px #807f7f ;

}

Ovdje:

“ #kutija1 ” koristi se za pristup divu s ID okvirom1.
“ širina ” Svojstvo se koristi za postavljanje širine elementa.
“ visina ” Svojstvo postavlja visinu elementa.
“ granica ” ima vrijednost 5px solid #ff9c83 gdje 5px označava širinu obruba, solid predstavlja stil obruba, a #ff9c83 je boja.
“ kutija-sjena ' Svojstvo će biti postavljeno kao ' 8px 10px 15px 20px #807f7f ” gdje je 8px vodoravni pomak, 10px okomiti pomak, 15px je efekt zamućenja, 20px je efekt širenja, a #807f7f je boja sjene.

Style box2 div

#kutija2 {

širina : 40% ;

visina : 140 px ;

granica : 5 px čvrsta rgb ( 255 , 111 , 1 ) ;

kutija-sjena : umetnuti 4 px 8 px #f4af1b ;

margin-lijevo : 350 px ;

}

Može se primijetiti da smo stilizirali box2 div s istim svojstvima:

Dodatni savjet: Dodavanje više sjena na HTML element

' kutija-sjena ” Svojstvo se može koristiti za dodavanje višestrukih efekata sjene HTML elementu. To se može učiniti pomoću zareza između svake sjene kao što je prikazano u primjeru u nastavku:

kutija-sjena : 6px 6px rgb ( 91 , 0 , 143 ) , 12 px 5 px rgb ( 201 , 8 , 8 ) , 16 px 16 px 8 px rgb ( 226 , 213 , 29 ) ;

Kao što vidite, uspješno je primijenjeno više sjena:

To je bilo sve o korištenju sjene CSS granice.

Zaključak

' kutija-sjena ” Svojstvo u CSS-u koristi se za primjenu efekata sjene na HTML elemente. Ovo se svojstvo uglavnom sastoji od dvije vrijednosti koje su za vodoravni pomak i okomiti pomak, ali može postojati više vrijednosti kao što su učinak zamućenja, učinak radijusa širenja, boja i još mnogo toga. Štoviše, također možete dodati višestruke sjene elementima korištenjem zareza između svakog svojstva box-shadow. Ovaj članak objasnio je CSS svojstvo box-shadow s praktičnim primjerima.

Sjena obruba CSS-a