Text shadow szöveg térhatás megjelenése!

 

Text shadow témakörök.



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

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

  3. Kontúrvonal megjelenítése.

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



{font-size:12px; text-shadow: 1.5px 1.5px yellow;}

{font-size:14px; text-shadow: 1.5px 1.5px yellow;}

{font-size:16px; text-shadow: 1.5px 1.5px yellow;}

{font-size:18px; text-shadow: 1.5px 1.5px yellow;}

{font-size:20px; text-shadow: 1.5px 1.5px yellow;}

{font-size:22px; text-shadow: 1.5px 1.5px yellow;}

{font-size:24px; text-shadow: 1.5px 1.5px yellow;}







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;}

A - U - O


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

A - U - O


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;}

A - U - O







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;}

A - U - O


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

A - U - O