Ismét a weboldalak tipográfiájával, azaz a karakterek megjelenítésével fogok foglalkozni ebben az írásomban. Ebben a leírásomban tovább fokozzuk a honlapkészítés során a tipográfiai megjelenés beállításainak lehetőségét. Bemutatom hogyan lehet weboldalunk karaktereinek árnyékolást készíteni pusztán CSS3 technikával. (Figyelem, a szöveg árnyékolása Internet Explorerben nem jelenik meg!)
Korábban erre nem nagyon volt lehetősége a honlapkészítőknek, szerencsére azonban mára már megváltozott ez a helyzet. Vágjunk is rögtön a közepébe.
A kiválasztó után a "text-shadow"-t kell tulajdonságként használnunk, valamint még a paramétereket kell megadnunk honlapkészítéskor, melyek minimálisan a következőek:
- árnyék vízszíntes eltolása (pozitív érték jobbra, negatív balra)
- árnyék függőleges eltolása (pozitív érték lefelé, negatív érték felfelé)
- árnyék színe
Szöveg árnyékkal
.arnyek {text-shadow: 2px 2px #7f7f7f;}
A fenti kóddal a következő hatást érhetjük el
Árnyékolt szöveg
Szöveg elmosott árnyékkal
Ha még egy paramétert megadunk >honlapkészítéskor a CSS kódba, akkor az árnyékot kicsit el tudjuk mosni, mellyel életszerűbb hatást kelthetünk.
.arnyek {text-shadow: 2px 2px 1px #7f7f7f;}
Árnyékolt szöveg elmosott árnyékkal
Világos szöveg sötét árnyékkal
Ezzel a módszerrel honlapkészítéskor kiválóan láthatóvá lehet tenni világos karaktereket világos háttérnél. Ebben az esetben azonban vegyük azt is figyelembe, hogy lesznek olyan látogatók a honlapon, akiknek régi webböngészőjük miatt nem fog megjelenni a szöveg árnyékolása. Weboldal készítéskor tehát olyan karakterszínt és háttérszínt válasszunk, melyeknek árnyék nélkül is megfelelő kontrasztjuk van.
.arnyek {text-shadow: 2px 2px 1px #7f7f7f;}
Világos szöveg árnyékkal
Többszörös árnyék adása szövegnek
Egy szövegrésznek akár több árnyékot is megadhatunk, így olyan hatást kapunk, mintha a szöveg több irányból lenne megvilágítva és ezért több árnyéka van.
.arnyek {text-shadow: -18px 4px 1px #555555, 5px -14px 1px #7F7F7B, -5px 16px 1px #7F7F7B;}
Szöveg többszörös árnyékkal
Világos szöveg belső árnyékkal
Ha az egyik árnyéknak pozitív, a másiknak negatív értéket adunk meg akkor egészen érdekes és egyedi belső árnyékolást kapunk.
.arnyek {text-shadow: 1px 1px #ffffff, -1px -1px #000000;}
Világos szöveg árnyékkal
A megfelelően beállított paraméterekkel nagyon érdekes és egyedi tipográfiát készíthetünk weboldalunkra.
