Árnyékot vető képek és más blokk elemek
Az árnyékos hatások népszerűek, és mondhatni olcsó megoldások, hiszen manapság minden egyszerű képszerkesztő program támogatja árnyékok létrehozását. Sajnos azonban a web dinamikus világában nehéz olyan képeket kezelni, melyeken különböző hatások eleve szerepelnek (feliratok, árnyékok), sokkal kevésbé újrahasznosíthatóvá téve azokat. Ráadásul ha sok képet kell megjelenítenünk egy oldalon, és mindegyiknél árnyékra is szükségünk lenne, a letöltendő képek mérete jelentősen megnőhet. Mondanom sem kell, hogy van CSS alapú megoldás.
A trükk alapvetően az, hogy egy általánosan használható árnyék képet kell készítenünk, amely képeinkhez és más blokkokhoz alkalmazható árnyékként funkcionál majd. Amennyiben változó háttérszínre is kell gondolnunk, akkor egy átlátszó PNG-t kell hadrendbe állítani. Az átlátszó GIF ebben az esetben nem elég, hiszen az árnyék különböző részein különböző mértékben kell átlátszónak lennie a képnek, és ezt a GIF formátum nem támogatja. Az átlátszó PNG-ket viszont az Internet Explorer nem támogatja, de semmi okunk nincs a korrektül funkcionáló böngészőket használók elől elzárni az élvezetesebb megoldásokat, ezért felkészülhetünk mindenfajta böngészőre.
A háttér beállítása képek esetében így már eléggé jól megy, más blokk elemeknél azonban gondok adódhatnak Explorerrel nézve, ezért egy kis plusz trükköt is be kell vetni, hogy az eredmény tökéletes legyen.
Részletesebb leírást és kódpéldákat az A List Apart legutóbbi számában megjelent CSS Drop Shadows című cikkben olvashatnak az érdeklődők.
■ A trükk alapvetően az, hogy egy általánosan használható árnyék képet kell készítenünk, amely képeinkhez és más blokkokhoz alkalmazható árnyékként funkcionál majd. Amennyiben változó háttérszínre is kell gondolnunk, akkor egy átlátszó PNG-t kell hadrendbe állítani. Az átlátszó GIF ebben az esetben nem elég, hiszen az árnyék különböző részein különböző mértékben kell átlátszónak lennie a képnek, és ezt a GIF formátum nem támogatja. Az átlátszó PNG-ket viszont az Internet Explorer nem támogatja, de semmi okunk nincs a korrektül funkcionáló böngészőket használók elől elzárni az élvezetesebb megoldásokat, ezért felkészülhetünk mindenfajta böngészőre.
A háttér beállítása képek esetében így már eléggé jól megy, más blokk elemeknél azonban gondok adódhatnak Explorerrel nézve, ezért egy kis plusz trükköt is be kell vetni, hogy az eredmény tökéletes legyen.
Részletesebb leírást és kódpéldákat az A List Apart legutóbbi számában megjelent CSS Drop Shadows című cikkben olvashatnak az érdeklődők.
