Filed under:
Web-design

Prije nekoliko mjeseci, prilikom izrade jednog sajta, poželio sam ukrasiti slike koje sam namjeravao ubaciti nekim efektom poput Photoshopovog Drop Shadowa. Radilo se o manjoj foto galeriji i thumbnailovima, koji su imali jednake dimenzije. Kada bi jednostavno primijenio neki efekt na thumbnail, sačuvao rezultat kao .jpg i ubacio sliku na stranicu, sve bi funkcioniralo kako i treba. Sve do prvog re-dizajna i mijenjanja pozadine DIV-a u kojem se te slike nalaze.

Razmišljanje unaprijed

Pretpostavimo da nakon nekog vremena poželim re-dizajnirati stranicu. Pozadinu dijela gdje se nalaze slike poželim promijeniti iz #fff u npr. #ccc. Brzo bi postalo jasno da bi sve ubačene slike morao iznova obrađivati, jer se sjene ne bi slagale sa novom pozadinom.

Kada bi pak nekako razdvojio sjenu i fotografiju, uvelike bi si olakšao posao — kod re-dizajna, dovoljno bi bilo samo napraviti novu sjenu!

CSS trik

Poslužio sam se sljedećim jednostavnim trikom; CSS kôd slijedi:

img {background: url(sjena.jpg); padding: 20px }

Ovim dotjerivanjem u pozadinu svake slike ubacio sam sjenu, koja je vidljiva zahvaljujući paddingu od 20 pixela. Sjena funkcionira kako spada samo kada je slika određenih dimenzija, u ovom slučaju 200×150px. Sama sjena je dimenzija 240×190px, dakle fotografija + padding.

Rezultat možete vidjeti ovdje. Primjer je napravljen za potrebe članka i sadrži samo osnovni kôd.