Szöveg textúrázása CSS felhasználásával
Mostanában az Ajax kapcsán mindenhol a JavaScript kap nagy hangsúlyt, pedig CSS területén is vannak új ötletek. A Khmerang.com készítője blog bejegyzéseinek címeit dobta fel, pontosabban kissé elkopott hatást varázsolt a betűkre. A technika nagyon cseles és egyben pofon egyszerű is. Az egyik "szöveget képre cserélő" módszert alkalmazza, de pont annak hátrányát használja ki: a textúrát jelentő takaró kép részben átlátszó.
Az alapvető képcsere technika lényege, hogy a kódban a szöveg mellett egy üres span elem van. Ennek a span elemnek megadjuk háttérként a képet, amire a szöveget szeretnénk cserélni és a szöveg fölé pozicionáljuk, hogy azt teljesen eltakarja. Ennek hátránya (a plusz egy HTML elemen kívül), hogy részben-átlátszó képeket nem használhatunk, mert az eltakarandó szöveg darabjai előbukkannának.
Ebben az esetben ez a tulajdonság éppen jól jön. A takaró képen beszínezünk a szöveg hátteréhez passzoló színnel pixeleket, a többi részt pedig átlátszónak hagyjuk. A beszínezett részek alkotják a textúrát, mintha azokon a helyeken a betűk megkoptak volna.
Fontos hangsúlyozni, hogy a betűk maguk nem a kép részei, így kereshetők, elérhetők, átméretezhetők maradtak! Egyedül a kijelölés nem megy a betakaró kép miatt.
■ Az alapvető képcsere technika lényege, hogy a kódban a szöveg mellett egy üres span elem van. Ennek a span elemnek megadjuk háttérként a képet, amire a szöveget szeretnénk cserélni és a szöveg fölé pozicionáljuk, hogy azt teljesen eltakarja. Ennek hátránya (a plusz egy HTML elemen kívül), hogy részben-átlátszó képeket nem használhatunk, mert az eltakarandó szöveg darabjai előbukkannának.
Ebben az esetben ez a tulajdonság éppen jól jön. A takaró képen beszínezünk a szöveg hátteréhez passzoló színnel pixeleket, a többi részt pedig átlátszónak hagyjuk. A beszínezett részek alkotják a textúrát, mintha azokon a helyeken a betűk megkoptak volna.
Fontos hangsúlyozni, hogy a betűk maguk nem a kép részei, így kereshetők, elérhetők, átméretezhetők maradtak! Egyedül a kijelölés nem megy a betakaró kép miatt.
Hűűű
-boogie-
Rossz szerkesztés
A technikán kívűl azt is szerettem volna kicsit belecsempészni a cikkbe, hogy ami egy esetben hátrány az más esetben lehet előny. CSS-sel kapcsolatban nekem ugyanis az a tapasztalatom, hogy az emberek a pontos specifikáció olvasás helyett szeretik saját elképzeléseikkel felruházni az egyes tulajdonságokat pusztán azok - beszédes - nevei alapján. Aztán amikor kiderül, hogy nem is úgy mükődik akkor korlátozva érzik magukat és esetleg a CSS-t hibáztatják, a CSS értemezés hátrányait látják a saját értelmezésükkel szemben.
A CSS igazából nagyon körültekintően megfogalmazott szabvány, bár sok erre épülő trükkre biztos, hogy a megalkotóik se gondoltak.
javítva
:)
Szöveg nem kiválasztható...
Kivéve Firefoxba
Attila
bibi
domi
Óriási!
Dúalon
http://e-arc.hu/
coincidence