Szöveg textúrák CSS maszkolással
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ó.
Állítsuk hadrendbe a CSS-t!
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.
CSS mask-image
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");
}Flexibilis megoldás
A technikánknak az a szépsége, hogy nem csak szövegre lehet ráhúzni, hanem bármilyen elemre:
- címsorok
- linkek
- szövegek
- gombok
- keretek
- SVG-k
- ikonok
Tehát egyszóval bármilyen színű és formájú elemre rápakolható.
Szeretnél megnézni egy demot?
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).