Još jedan od trikova poboljšanja izgleda web stranice je dodavanje sjena slikama. Ukoliko se ovaj efekt korisni umjereno i racionalno, stranica će poprimiti vrlo efektivan izgled. Ovdje možete vidjete jedan jednostavan primjer dodavanja sjene slici.
Sjena se radi ovako:
Otvorite neki program za grafičku obradu slika (npr. photoshop) i nacrtajte
samo sjenu. Pazite da je sjena dovoljno velika kako bi mogla pokriti veličinu
vašeg elementa. Spremite sliku u gif formatu, pazeći da je pozadinska boja jednaka
pozadini elementa na kojem ćete iskoristiti sjenu.
Kako bi uspjeli svojoj slici staviti sjenu, sliku moramo staviti unutar div-a kojeg kojemu ću pridodati klasu sjena. Tada će naš kod izgledati ovako:
Sjena koju ste nacrtali poslužit će kao pozadina div-u. Tu sjenu pozicionirajte u donji desni kut. Zatim ćemo slici pomoću margina odredite položaj, pri ćemu morate paziti da gornja i lijeva margina poprimaju negativne vrijednosti kako bi se istaknula sjena. Veličina tih dviju margina ovisi o debljini sjene koju ste nacrtali. Još ćemo i odrediti da se sjena ne ponavlja. Div-u još odredite i lijevi float kako se ne bi morali zamarati sa određivanjem veličine div-a.
ako ponovno želite vidjeti kako to izgleda kliknite ovdje
više na pcchip.hr