Egyedi honlap és webáruház készítés Győr

Szöveg árnyékolása CSS3-al

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

Szöveg árnyékolása CSS3-al

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.

Készült: 2012-05-20

Kapcsolódó hírek, hasznos tippek


Kérjen egyedi árajánlatot!

Az ajánlatkérés kötelezettségektől mentes, csapatunk maximum 48 órán belül válaszol minden beérkező üzenetre. Munkáinkra szerződéses garanciát vállalunk, nem tűnünk el, ügyfeleink bízhatnak bennünk és számíthatnak ránk.

Bízza ránk Ön is webes ügyeinek intézését!

További elérhetőségeink

Kérjük, jelölje be az alábbi négyzetet: