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 200x150px. Sama sjena je dimenzija 240x190px, dakle fotografija + padding.
Rezultat možete vidjeti ovdje. Primjer je napravljen za potrebe članka i sadrži samo osnovni kôd.
★