L

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).

Leoamros

X

Üdv! Ha még személyesen nem ismerjük egymást, Smajda László vagyok, de szólíts csak egyszerűen Laccának vagy Leoamrosnak. Olyan netbúvároknak osztom az észt, akik szárnyaikat próbálgatják a PHP, MySQL, JavaScript világában, és elakadnak valamelyik folyamat során. Főleg a saját tapasztalatokat írom le, ettől függetlenül kérdezhetsz bátran, lehetőségeimhez mérten válaszolok.

Kategóriák
Címkék
Social Media
Eszközök