Kiss Honlapkészítés elérhetőség ikoninfo@kisshonlapkeszites.hu

Kiss Honlapkészítés telefon ikon + 36 70 252 4759

Egyedi honlapkészítés Győr

weboldal-keszites

Weboldal készítés,
Webdesign készítés,
Honlap karbantartás
latogatottsag-noveles
Látogatottság növelés,
Keresőoptimalizálás (SEO),
Bevételt termelő honlapkészítés

webaruhaz-keszites

Webáruház készítés,
Webshop készítés,
Webshop karbantartás

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

Olvasóink értékelése: 5 / 5

Csillag aktívCsillag aktívCsillag aktívCsillag aktívCsillag aktív
 

 

Szöveg árnyékolása CSS technikákkalIsmé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.

{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.

{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.

{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.

{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.


Kapcsolódó bejegyzések:

<< Honlapkészítés egyedi betűkészlettel

Blog címlap

Hiányzó magyar ékezetes karakterek pótlása >>

 

 


Tippek röviden

  • Mit nevezünk minőségi tartalomnak? 2016-02-06

    A minőségi tartalom egy blog, vagy bármilyen weboldal esetében rendkívül fontos, hiszen ez elsődleges rangsorolási szempont a különböző...

  • Google Webmester Eszközök - azaz GWT 2016-01-16

    A GWT, vagyis Google Webmaster Tools, magyarul Google Webmester Eszközök egy rendkívül jó eszköz, amely teljesen ingyenes, és integrálni tudja...

  • Weboldal ereje számokban 2015-12-10

    A PageRank értéke az a mérőszám, amit már 1998-tól egy oldal erősségével kapcsolatos legfontosabb értékként kezelnek az internetezők, hiszen Larry...

Kapcsolat

KISS HONLAPKÉSZÍTÉS GYŐR
info@kisshonlapkeszites.hu
Tel: +36 70 / 252 4759

Korábbi bejegyzések

  • Mit nevezünk minőségi tartalomnak? 2016.02.06.

    A minőségi tartalom egy blog, vagy bármilyen weboldal esetében rendkívül fontos, hiszen ez elsődleges rangsorolási szempont a különböző...

  • Google Webmester Eszközök - azaz GWT 2016.01.16.

    A GWT, vagyis Google Webmaster Tools, magyarul Google Webmester Eszközök egy rendkívül jó eszköz, amely teljesen ingyenes, és integrálni tudja...

  • Weboldal ereje számokban 2015.12.10.

    A PageRank értéke az a mérőszám, amit már 1998-tól egy oldal erősségével kapcsolatos legfontosabb értékként kezelnek az internetezők, hiszen Larry...

  • AdWords vagy keresőoptimalizálás? 2015.11.16.

    A látogatók vonzásának több módszere is van, a legnépszerűbbek közé tartoznak a különböző fizetett hivatkozások, mint például az AdWords, valamint a...

  • Mobilra optimalizált weboldalak 2015.10.28.

    Jelenleg az internetezők egyik legnagyobb kategóriáját azok képezik, akik valamilyen okos készülékről böngésznek (telefon, tablet, stb.), ezt pedig...

honlapkeszites-arajanlat-keres-tablet

KÉRJEN EGYEDI ÁRAJÁNLATOT!

Nincs értelme tovább várnia! Vegye fel velem a kapcsolatot az alábbi űrlap segítségével, vagy hívjon a +36 70 252 4759-es telefonszámon.

Powered by ChronoForms - ChronoEngine.com