Text shadow témakörök.

Másodlagos betű pozíciójának és színének meghatározása. Árnyék megjelenítése mozgatása. Kontúrvonal megjelenítése. Kettő másodlagos betű vagy árnyék, eltérő színekkel.

 

Olvashatósági szempontból ne legyen zavaró, három dologra kell figyelni:
1. Mekkora betűméretet alkalmazunk, címsor vagy további elemeknél.
2. Milyen háttérszínre írunk.
3. Mekkora a másodlagos karakter elmozdulása.

---

Másodlagos betű pozíciójának és színének meghatározása.

Text shadow, azaz, másodlagos karakter megjelenítése.

Három értéket kell, meghatározni. {text-shadow: Y-pozíció X-pozíció color;}
- Első értékkel, vízszintes (right-left) elmozdulást határozzuk meg. Érték lehet: pozitív és negatív.
- Második értékkel, függőleges (top-bottom) elmozdulást határozzuk meg. Érték lehet: pozitív és negatív.
- Harmadik értéke a szín, mely megadható: Angol nevével vagy kódjával.

---

Jobbra, right: {text-shadow: 8px 0px blue;} A - U - O Le, bottom: {text-shadow: 0px 8px blue;} A - U - O Balra, left: { text-shadow: -8px 0px blue;} A - U - O Fel, top: {text-shadow: 0px -8px blue;} A - U - O

Jobbra-le: {text-shadow: 8px 8px blue;} A - U - O Balra-le: {text-shadow: -8px 8px blue;} A - U - O Balra-fel: { text-shadow: -8px -8px blue;} A - U - O Jobbra-fel: {text-shadow: 8px -8px blue;} A - U - O

---

Árnyék megjelenítése mozgatása.

 

Text shadow, másodlagos karakter, árnyékként történő megjelenítése.

Négy értéket kell meghatározni. {text-shadow: Y-pzíció X-pozíció Árnyék-px color;}
- Első értékkel, vízszintes (right-left) elmozdulást határozzuk meg. Érték lehet: pozitív és negatív.
- Második értékkel, függőleges (top-bottom) elmozdulást határozzuk meg. Érték lehet: pozitív és negatív.
- Harmadik értékkel, árnyék elmosódási méretét határozzuk meg. Értéke, csak pozitív lehet.
- Negyedik értéke a szín, mely megadható: Angol nevével vagy kódjával.

Megjegyzés:
Árnyék elmosódási méretét, 0px-re állítjuk, akkor a fent bemutatott, másodlagos betű elmozdulási hatását érjük el.

Alaphelyzet, amikor árnyék marad az eredeti karakter pozíciójában: 0px 0px.
{text-shadow: 0px 0px 2px red;} A - U - O	{text-shadow: 0px 0px 5px red;} A - U - O	{text-shadow: 0px 0px 8px red;} A - U - O

Jobbra: {text-shadow: 8px 0px 5px red;} A - U - O Le: {text-shadow: 0px 8px 5px red;} A - U - O Balra: { text-shadow: -8px 0px 5px red;} A - U - O Fel: {text-shadow: 0px -8px 5px red;} A - U - O

Jobbra-le: {text-shadow: 8px 8px 5px red;} A - U - O Balra-le: {text-shadow: -8px 8px 5px red;} A - U - O Balra-fel: { text-shadow: -8px -8px 5px red;} A - U - O Jobbra-fel: {text-shadow: 8px -8px 5px red;} A - U - O

---

Kontúrvonal megjelenítése.

Értékeit a következő sorrendben kell meghatározni, vesszővel elválasztva: top, right, bottom, left;

Értékek: ( 0-a értéknél, nem kötelező a px meghatározás.)
- Első: vízszintes mozgatás. Érték lehet: pozitív és negatív.
- Második: függőleges mozgatás. Érték lehet: pozitív és negatív.
- Harmadik: Adott oldalhoz (top, right, bottom, left) tartozó szín.

Szabályos kontúrvonalhoz, top, right, bottom, left értékét, állítsuk be, egyforma számmal. ( pozitív és negatív értéknél is.)
Példa: top -1px; right 1px; bottom 1px; left -1px;

Sárga betű, fekete kontúrvonallal.
{color:yellow; text-shadow: 0px -1px black, 1px 0px black, 0px 1px black, -1px 0px black;}

Vastag, 5px kontúrvonallal.
{color:yellow; text-shadow: 0px -5px black, 5px 0px black, 0px 5px black, -5px 0px black;}

Eltérő kontúrvonal színek. top=black; right=red; bottom=purple; left=lime;
{color:yellow; text-shadow: 0px -6px black, 6px 0px red, 0px 6px purple, -6px 0px lime;}

---

Kettő másodlagos betű vagy árnyék, eltérő színekkel.

Kettő másodlagos betű:
{color:black; font-size: 50px; text-shadow: -5px -5px 0px red, 5px 5px 0px green;}

Kettő árnyék:
{color:black; font-size: 50px; text-shadow: -5px -5px 5px red, 5px 5px 5px green;}

---