Weboldalkészítő suli #41 - Árnyékolás
Habár a 30 fokokat magunk mögött hagytuk, nem érdemes elkerülnünk az árnyékoknak, főként, ha azok szövegek és blokkszintű elemek árnyékát jelentik.
Amikor egy honlap tervezője azt találja ki, hogy az egyes „dobozokat” (menüt, híreket, cikkeket stb.) vagy például a címsorokat egy kis árnyékkal emeli ki, akkor azt manapság az oldal készítője jellemzően úgy oldja meg, hogy ezeket az elemeket, vagy legalábbis ezek egy részét előre elkészíti egy képszerkesztő programmal, majd az oldalba bitképként illeszti be a megfelelő helyekre. Ez a dobozok esetén – idáig legalábbis – többé-kevésbé jogos is volt (mi is foglalkoztunk hasonló megoldással még a Websuli 16. részében), ám a szövegeknél már nem igazán.
Pontosabban a szövegeknél nem lett volna jogos ez a megoldás, hiszen a szövegárnyék már megtalálható volt a 1998. januárban kiadott CSS2-ajánlásban – ám ez az apróság valahogy elkerülte böngészőgyártók figyelmét. A szövegárnyék stílustulajdonság támogatásában az úttörő szerepet – legalábbis a nagyobb böngészőkészítők közül – a Safari játszotta, amelynek a 2008. márciusban megjelent 3.1-es verziója részlegesen, míg a három hónappal később megjelenő Safari 4.0 már teljes mértékben támogatta az akkor már több mint tíz éves W3C-ajánlást.
Érdekes módon az Opera ugyancsak 2008 júniusában megjelenő 9.5-ös verziójának az újdonságai között is megtalálhattuk e régi adósság törlesztését, ám például a Firefoxnál ez a lehetőség csak az egy évvel későbbi 3.5 verzióban jelent meg, ahogy a Google Chrome-nak is csak a második verziójába került be a szövegek árnyékolásának lehetősége (kisebb hibával). Ráadásul akkor már ne is említsük az örök renitens Internet Explorert, amelynek még a 9-es verziója sem képes a szabványos megoldásra – csak némi trükközéssel és persze erős korlátozással vehetjük rá a Microsoft böngészőjét, hogy némi árnyékot hozzon létre a betűk mögött.
A szövegárnyék már a CSS2-szabványnak is része volt, csak a böngészők eleinte nem igazán támogatták
Árnyékos betűk
A szövegek és szövegrészek – például a span címkével vagy más módon jelöltek – árnyékának létrehozásához a text-shadow stílustulajdonságot kell használnunk - miként az a példaprogramunkban is látható. Ennek a stílustulajdonságnak két paramétert kötelező megadnunk, amelyek mellé még kettő opcionális is beírható.
A két kötelező paraméter az árnyék vízszintes és függőleges eltolása a szöveghez képest. A pozitív értékek jobbra és lefelé történő eltolást jelentenek, míg a negatív távolságokat megadva értelemszerűen balra és felfelé tolhatjuk el a szöveg(rész) árnyékát. A távolságokat elvileg a szokásos mértékegységekben adhatjuk meg (px, pt, em, ex stb.), ám az esetek többségében leginkább pixel (px), vagy legfeljebb a nyomtatható nézethez készült stíluslapok esetén pont (pt) a jellemző.
Ahogyan azt említettük, e kettő mellett két másik paramétert is megadhatunk: az árnyék színét és az elmosás sugarát. Ha stíluslapunk kizárólag a CSS2-ajánlásokat követi, akkor az árnyék színénél (amelynek alapértelmezett értéke a fekete) vagy valamelyik RGB formátumot – rgb(r,g,b), #rrggbb, esetleg ennek rövidített változatát –, vagy a név szerinti megadást (gray, silver, navy stb.) használhatjuk. Ám ez esetben, főleg mintás vagy színátmenetes hátterű oldalakon, kimondottan hasznos lehet, ha az árnyék színét inkább a CSS3-ban megjelenő RGBA vagy HSLA formátumban adjuk meg, hiszen így lehetőségünk van – gyakorlatilag plusz paraméterként – az árnyék fedettségét is megadni.
Még az IE9-ben is trükközni kell egy kis árnyékért
A másik opcionális paraméter azt határozza meg, hogy az árnyék milyen mértékben terjedhet ki az elmosási effektus során. Ennek alapértelmezett értéke nulla, ami egyben azt is jelenti, hogy nincs elmosás, az árnyék széle éles lesz, mint amikor erős fénnyel világítanak meg egy tömör tárgyat. Az érték növelésével a vetett árnyék egyre nagyobb kiterjedésű és egyre elmosottabb lesz, egy bizonyos érték fölött pedig már nem is annyira árnyéknak, mint inkább valamilyen „pacának” fog látszani.
A W3C ajánlása szerint, amennyiben az árnyék színét is megadjuk, úgy ennek kell az első paraméternek lennie, azonban ezt a böngészők nem veszik túl szigorúan, ezért gyakran találkozhatunk azzal a megoldással is, hogy a szín a lista végére kerül. Ugyanakkor az elmosási sugárnak mindenképpen a két kötelező paraméter, a vízszintes és a függőleges eltolás mögé kell kerülnie. Az egyes paramétereket szokás szerint szóközzel kell elválasztani, azonban lehetőségünk van arra is, hogy vesszővel elválasztva egy elemhez több, akár eltérő beállítású árnyékot adjunk hozzá.
Ezek a feliratok is csak az árnyékuknak köszönhetik látványos kinézetüket
Fontos megemlítenünk, hogy bár az árnyék színe elvileg opcionális paraméter, amennyiben nem adjuk meg, úgy a WebKit-alapú böngészők (Google Chrome, Safari) nem hozzák létre a kívánt hatást – gonosz módon mondhatjuk, az eredmény szín nélkül pontosan ugyanaz lesz, mint az Internet Explorerben. Ugyanis, ahogyan azt a bevezetőben is említettük, még az Internet Explorer 9 sem ismeri a text-shadow stílustulajdonságot, helyette a kizárólag IE-ben használatos „vizuális szűrőket” kell(ene) használnunk. Reméljük, a jövő évben megjelenő IE10-es, vagy jobb esetben egy IE9-frissítés e területen is előrelépést fog jelenteni.
