Blog

Színes fejlécek egy képpel

Néha megesik, hogy egy bizonyos képet, többféle színben kell felhasználnunk egy weboldal elkészítésekor. Ilyenkor minden egyes kép variációt külön-külön el kell menteni, hogy alkalmazhassuk őket a kódban.
Persze ez esetben több kérést kap a szerver, több ideig tart az oldal betöltése, ami nem túl szerencsés dolgok.
Az alábbi apró trükkel viszont, elég egy kép, hogy bármennyi színben létrehozhassunk fejléceket, vagy bármi más hasonló dolgot.

Első lépésben Photoshop-ban hozzuk létre a fejléc háttérnek szánt képet, amit az oldal háttér színével töltünk ki. A kép színes részét pedig átlátszóvá tesszük. Az elmentendő PNG képünk így néz ki ekkor:

A CSS kódban ezt a képet beállítjuk például a H1 tag hátterének, plusz háttérszínként beállítunk egy piros színt. Ekkor a képünk előtér színe szépen eltakarja, az egyébként egyszínű hátteret, ezáltal olyan hatást keltve, mintha egy színes kép lenne a fejlécünk hátterében.
Ebben a példában jól látni, hogy is tudjuk ezt alkalmazni több fejlécre. Persze ez a megoldás bárhol jól jöhet, ahol legalább 3 egyforma képre van szükségünk, különböző színekben.
És végül egy élesben működő oldal, ahol ezt a megoldást használtam a látogatók és az oldal szerkesztők hozzászólásainak elkülönítésére.

Letöltés: Színes fejlécek példa (36.59 kB)

Szóljon hozzá!

Új generációs játékok