Viszont vannak dolgok, amikhez még kép se kell.

Navigációnál és UI kezelőfelületeknél gyakran láthatunk kicsi, egyszerű háromszögekből álló nyilakat. Ezeket elkészíthetjük képpel, esetleg valamely UTF8 karakterrel a html kódban. Előbbi megoldás minden színvariációra és állapotra külön képet igényel, utóbbival pozícinálási gondok lehetnek más-más böngészőkben, és megzavarhatja a felolvasó programokat – nem valami akadálymentes megoldás.

Mi más lehetőség marad? Ma már lehet vektorosan canvas illetve VML elemekre rajzolni, színezni, tetszőleges módon scriptelni különböző állapotokra, hogy nézzen ki az elem… de ez már érezhetően aránytalanul nagy ráfordítás ekkora feladatra.

Egy lehetőség maradt, amivel egyszerű, színes poligonokat rajzolhatunk és nem kell hozzá plugin, kép, de még javasript se: a css keret.

A böngészők egy elemet körbevevő, vastag keretet, azok találkozásánál egy sima, ferde egyenes mentén illesztik, ezzel elkerülve azt a problémás kérdést, hogy melyik keret hol lógjon túl az elem szélén és mennyire. A html és css vízszintes és függőleges világában ezek a ferde vonalak eléggé meglepően hatnak, ritkán is fordulnak elő, mivel csak eltérő színű és esetleg vastagságú kereteknél válnak láthatóvá.

Ha egy ilyen elemen a magasságot és a szélességet nullára vesszük, négy “nyilat” kapunk. Innen már csak a nemkívánatos kereteket kell áttetszővé állítani, és marad egy.

Apróságokra persze oda kell figyelni,pl. a pozicionálásnál, a html elem ilyenkor mindíg a nyíl csúcsa.

Előjött egy IE6 bug és annak körüljárása is, úgyfest IE6 nem kezeli rendesen a transzparens kereteket, kivéve, ha solid stílus helyett dotted -re állítjuk. Mivel ez a keret amúgy se látszik, tökmindegy mire állítjuk, és ha ezzel a trükkel az összes böngészőben jó, akkor miért ne.

Végül a css kód ennyi:

span.arrow {
	display: block;
	width: 0px;
	height: 0px;
 
	overflow: hidden;
 
	border-top: 20px dotted transparent;	
	border-right: 0px dotted transparent;
	border-bottom: 20px dotted transparent;	
	border-left: 20px solid green;
}

Ezáltal egy jól használható, testreszabható kis elemet kapunk, amit a mai egyszerű weboldalak és html alapú alkalmazások jól használhatnak.

Demo, és pár példa itt látható
Tesztelve: IE6, 7, 8, chrome, ff3, safari 4.

Előnyök:

• html-css, nincs plusz kép, kevesebb http lekérés
• gyors megjelenítés
• testreszabhatóbb
• mouseover adott a DOM-ból

Hátrányok:

• kicsit nagyobb html kód (vagy js futásidő, ha utólag teszed a DOM-ba, de ez elkerülhető)
• nem teljes a testreszabhatóság, pl nem lehet neki keretet rajzolni
• talán valahol megtöri a rétegszemléletet, plusz html kód a design-hoz
• IE alatt pixelesedés előfordulhat, ezt a nyil méretein finoman korrigálva javíthatjuk

Az alapok

Maga a kód ilyen:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', src='/images/alpha.png', sizingMethod='image');

Ez egy DirectX szűrő, amit lehet IE alatt a stíluslapokban használni. Két paraméterre figyeljünk:

• src
  ami a kép elérése, az oldal gyökeréhez relatívan ( a stíluslapoktól eltérően, ahol a relatív címzés a css állomány útvonalához képest értendő)
• sizingMethod
  ennek három beállítása van: image, scale és crop.
  Ha image-re állítod, a png azzal a méretekkel jelenik meg ami a kép valós mérete, függetlenül az őt tartó elem méreteitől.
  A scale mód kinyújtja a képet az őt tartó elem méreteinek megfeleően. Ez ideális egy tengely mentén nyújtott háttereknél, amikor más esetben egy tengely mentén ismétlődő hátterünk lenne – ennél a megoldásnál sajnos nincs ismétlődés, tehát így kell tervezni vele.
  Crop mód esetén levágja a kép kilógó részleteit ha kissebb, és eredeti méretben mutatja, ha nagyobb a hordozó elem. Ez közelíti meg leginkább a background-image viselkedését.

Hátrányok

A HTML elem, amire ráhúzod ily módon az alfacsatornás képet, elérhetetlenné válik bizonyos felhasználói interakciókra. A háttér úgy viselkedik, mintha az az elem és annak összes aleleme fölé lenne lebegtetve, holott az alelemek is jól jelennek meg (tehát nem a kép alatt). Maga az elem kattintható, de az alelemei már nem, a tartalmukat nem lehet kijelölni. Igy ha kicsit is komplexebb HTML szerkezetekre akarjuk ezt használni, javaslom az alábbi megoldást.

Minden ilyen elem esetén elhelyezek plusz egy layert, utolsó gyerek elemként abban az elemben, amire a png-t tenném. Mivel az IE7 és szinte minden nem-IE böngésző már jól kezeli az alfacsatornás png-ket, feltételes kommentet használok, hogy csak a kívánt böngészőkre jelenjen meg így és ne terheljen másokat.

<!--[if lt IE 7]>
<div class="bg"></div>
<![endif]-->

Ugyanezzel a megoldással egy stíluslapot is beemelek az oldal elején ami lekezeli ezeket az eseteket. A megoldás minimális extra kódot igényel, idővel, ha az IE6 sírba vonul, problémamentesen kivehető, egyszerű és működik. Nem valid CSS megoldás, de a css amiben használom, a feltételes komment segítségével kerül be az oldalba és csak az IE6 vagy korábbi verziói látják, így emiatt se kell aggódnom.