CSS je pun opcija za poboljšanje izgleda vaših web stranica; sjene teksta i okvira najbolji su primjeri. Pružaju slične rezultate kao i sjene u softveru za uređivanje slika poput Photoshopa.

Ali kako rade CSS sjene? Zaronimo odmah.

Kako koristiti CSS Box Shadow

Možete primijeniti sjenčanje CSS okvira s jednim retkom CSS-a koji sadrži raspon od najviše šest vrijednosti. Redoslijed vrijednosti ključan je za funkcioniranje vaše sjene CSS okvira, a izgleda ovako:

box-shadow: offset-x offset-y zamućenje raširene boje umetanje;

Pogledajmo redom svaku od vrijednosti.

Pozicija sjene CSS okvira

Vrijednosti offset-x i offset-y kontroliraju položaj sjene okvira. Vrijednost offset-x predstavlja vodoravni položaj sjene, dok je offset-y okomiti pomak.

 okvir-sjena: 10px 10px;

Pozitivne vrijednosti rezultiraju sjenom ispod i desno od elementa.

Također možete koristiti negativne vrijednosti za h-offset i v-offset:

 okvir-sjena: -10px -10px;

Negativni h-pomak pomiče sjenu ulijevo, dok je negativni v-pomak pomiče prema gore:

instagram viewer

CSS Box Shadow Blur

Kao što vidite, dodavanje h-pomaka i v-pomaka vašoj sjeni stvara čvrstu sjenu bez ikakvih perja. Vrijednost zamućenja zamućuje vašu sjenu CSS okvira i stupa na snagu ako navedete treću vrijednost:

okvir-sjena: 10px 10px 20px;

Što veći broj dodate vrijednosti zamućenja, to će sjena CSS okvira biti zamućenija. Ova vrijednost ne može biti negativna.

CSS Box Shadow Spread

Vrijednost širenja omogućuje vam promjenu veličine vaše sjene bez mijenjanja njezinog položaja.

 okvir-sjena: 10px 10px 20px 30px;

Pozitivna vrijednost širenja će vašu sjenu CSS okvira učiniti većom, dok će je negativna vrijednost smanjiti.

Boja sjene CSS okvira

Sjene okvira CSS-a prema zadanoj su boji teksta elementa, ali to možete nadjačati dodavanjem boje:

okvir-sjena: 10px 10px 20px 10px #0000ff;

Boja koju koristite mora biti u legalnom CSS formatu boja, poput heksadecimalnog koda, RGB koda ili unaprijed definirane boje. Možeš naučiti o heksadecimalnim kodovima i druge CSS legalne opcije boja prije nego počnete sa svojim sjenama.

Umetak sjene CSS okvira

Sjene okvira CSS prema zadanim postavkama padaju izvan dodijeljenog elementa. Dodavanjem umetka svojstvu box-shadow možete prikazati sjenu s unutarnje strane elementa.

okvir-sjena: 10px 10px 20px 10px #0000ff umetak;

Ovo je unaprijed definirana tekstualna vrijednost; jednostavno ga dodajte ili uklonite da postavite vrijednost.

Kako koristiti CSS Text Shadow

Sjene CSS teksta su poput sjena okvira, iako imaju manje vrijednosti za izmjenu. Sintaksa za sjenčanje CSS teksta izgleda ovako:

text-shadow: offset-x offset-y boja radijusa zamućenja;

Ali kako te vrijednosti funkcioniraju?

Položaj sjene CSS teksta

Pomaci sjene teksta u CSS-u rade vrlo slično istim vrijednostima sjene okvira:

tekst-sjena: 10px 10px;

Pozitivne vrijednosti postavit će sjenu ispod i desno od teksta.

Negativne vrijednosti čine suprotno, postavljajući sjenu iznad i lijevo od teksta.

 tekst-sjena: -10px -10px;

Možete miješati negativne i pozitivne vrijednosti kako biste savršeno pozicionirali sjenu CSS teksta.

Radijus zamućenja sjene CSS teksta

Radijus zamućenja sjene CSS teksta omogućuje vam da zamutite sjenu iza teksta.

tekst-sjena: 10px 10px 10px;

Zadana vrijednost za ovu vrijednost je 0 (bez zamućenja).

Boja sjene CSS teksta

Prema zadanim postavkama, sjene CSS teksta odgovaraju boji teksta. Možete promijeniti boju svog teksta tako da ga dodate na kraj CSS svojstva sjene teksta.

tekst-sjena: 10px 10px 10px #0000ff;

Poput boja sjene okvira CSS-a, za ovo morate koristiti legalnu boju CSS-a.

Primjeri dizajna CSS okvira i sjene teksta

Možete početi eksperimentirati s upotrebom CSS okvira i sjenčanja teksta nakon što shvatite osnove. Ideje u nastavku trebale bi vas inspirirati da smislite vlastite kreativne načine korištenja ovih CSS svojstava.

Obrubi u dvije boje s dvije sjene CSS okvira

HTML elementu možete dodati više od jedne sjene okvira ili sjene teksta. Sve dok između njih postoje zarezi, možete dodati nove sjene jednom svojstvu.

kutija-sjena: 30px 30px#0000ff, -30px-30px 0px#00ff00;

Ovaj dvobojni rub je dobar primjer za to. Dvije sjene CSS okvira sa suprotnim položajima i bez zamućenja/širenja stvaraju izvrsnu kreativnu granicu.

Dvostruke CSS sjene teksta za dramatičan učinak

Na sličan način kao i gornja ideja, možete dodati i pozicionirati tekst više tekstualnih sjena za zanimljive rezultate.

tekst-sjena: 35px 20px 4px tamno siva, -35px -20px 4px tamno siva;

Ovaj primjer prikazuje redak teksta sa sjenom iznad i sjenom ispod, a obje imaju vrijednosti boje temeljene na tekstu.

Višebojne pozadine s umetnutim CSS okvirima

CSS je dovoljno moćan da stvori jedinstvena i zanimljiva sredstva bez vanjskih datoteka. Korištenje umetnute sjene CSS okvira kao pozadine izvrstan je primjer za to.

okvir-sjena: 20px 10px 10px 40px #000000 umetnuto, -50px -30px 8px 60px sivo umetnuto, 30px 20px 6px 90px svijetlosivo umetnuto;

Ovaj okvir ima bijelu pozadinu, zajedno s tri umetnute sjene u različitim bojama. Sjene se međusobno preklapaju kako bi stvorile jedinstvenu pozadinu.

Jednostavno je dodatno pojačati ovaj učinak dodavanje elegantnog CSS pozadinskog gradijenta svom elementu.

CSS sjene okvira i sjene teksta za kreativni web dizajn

CSS okvir i sjene teksta jednostavni su za korištenje nakon što znate kako s njima raditi. Sada imate alate koji su vam potrebni za početak rada na vlastitom dizajnu, ali trebali biste nastaviti istraživati ​​CSS kako biste poboljšali svoje vještine.