Vannak olyan helyzetek, amikor egy szöveg baromi jól illeszkedik az oldal designhoz, ha speciális effektek vannak rajta. Ha ezeket az effekteket lehagyjuk, akkor elveszíti az oldal a különleges kinézetét. Ilyenkor természetesen elkezdjük a designból képként kivágni a szövegeket. Ugye mondanom sem kell, hogy ez miért nem jó megoldás.
Első negatívum, hogy minden apró módosításkor, ismét át kell küldeni a grafikusnak, ő áttervezi, visszaküldi, kivágod, felteszed a szerverre. Semmi jó nincs ebben.
Második negatívum, hogy a png alapból jóval több helyet foglal el, mint a sima szöveges információ. Tegyük fel van 10 darab 30 KiloByte-os szöveged, már ott jársz, hogy 300 kiló csak egyetlen oldalon a képek mérete. Ne is beszéljünk arról, hogy ezeket mindet egyesével lekéri a böngésződ a szerverről. Rengeteg plusz idő és ráadásul rengeteg plusz információ.
Szerencsére a CSS3 erre már ajánl nekünk egy praktikus megoldást. Persze erre a problémára van néhány megoldás. Például a CSS background-clip
vagy a mask-image
, esetleg az SVG <clippath>
, <pattern>
és <mask>
. Persze mindnek meg van van előnye és a böngészőtámogatottsága is.
Mára egy olyan megoldást kerestem, amit a MODERN böngészők támogatnak. Igen, ezt még mindig nem támogatja a drága, öreg Internet Explorerünk és, mint kiderült a drága jó Internet Explorer 2, azaz a Firefox sem. Bumm.
A megoldásunk a CSS mask-image
lesz.
Első lépésként kiválasztunk egy textúrát. A textúrát 24 bites PNG képként kell elmenteni. Ahol a képünk részlegesen vagy teljesen átlátszó, ott a mask-image
a szöveg mögötti háttérszínt fogja behelyettesíteni. Szuper. Ahol pedig átlátszatlan (de hülye szó), ott fog csak látszani teljesen a szövegünk.
.mask {
-webkit-mask-image: url("mask.png");
mask-image: url("mask.png");
}
A technikánknak az a szépsége, hogy nem csak szövegre lehet ráhúzni, hanem bármilyen elemre:
Tehát egyszóval bármilyen színű és formájú elemre rápakolható.
Ha nem Internet Explorerben nézed az oldalt, akkor kattints ide: DEMO. A jobb felső sarokba pakoltam egy kis eszköztárat, itt tudsz szöveget cserélni, színt váltani (# mindig kell elé), esetleg másik mintát kipróbálni. Az oldal forrásában pedig megnézheted, hogy nem csaltam. Tényleg csak CSS-t használok és egy PNG-t (vagyis 4 PNG-t).
Ha Internet Explorert, Mozilla Firefoxot vagy Opera Minit használsz, nem fog működni, csak sima szöveget fogsz látni, cserélj böngészőt!
Mivel jelenleg csak a webkit alapú böngészők támogatják, -webkit prefix
-szel (Can I Use CSS Masks?), így csak Chrome, Opera, Safari, iOS Safari, Android Browser és Chrome for Android alatt alkalmazható, a többiek pedig már vagy implementálják vagy az IE még gondolkodik, hogy betegye-e (Masks).