CSS

HTML

COMPONENTS

CODE HUB

CSS Text Shadow Generator

Konfiguráció

Szín

#000000

Vízszintes eltolás

Függőleges eltolás

Blur

Osztály

Előnézet

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Kód

ReadyTools Academy

Tanulj HTML-t, CSS-t és JavaScriptet teljesen ingyen a ReadyTools Academy keretében.

Kövesd a tanulásodat, fejlődj a saját tempódban, és szórakozz közben! 🎯

Kezdj bele

CSS Text Shadow Generator

A CSS-ben a text-shadow tulajdonságot arra használják, hogy árnyékot adjanak a HTML-elem szövegéhez. Ez a tulajdonság lehetővé teszi különböző szövegárnyékhatások létrehozását, javítva ezzel a weboldalon található szövegelemek vizuális megjelenését.

A text-shadow tulajdonság több értéket fogad el, megadva az árnyék vízszintes és függőleges eltolódását, az elmosódás sugarát és a színét. Az alapvető szintaxis a következő:

.text-shadow-element { text-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [color]; }

Ebben a példában:

  • [horizontal-offset]: Megadja az árnyék vízszintes eltolódását. A pozitív érték jobbra, a negatív érték balra tolja az árnyékot.
  • [vertical-offset]: Megadja az árnyék függőleges eltolódását. Egy pozitív érték lefelé, míg egy negatív érték felfelé mozgatja az árnyékot.
  • [blur-radius]: Beállítja az árnyék elmosódási sugarát, ami többé-kevésbé diffúz hatást eredményez.
  • [color]: Megadja az árnyék színét színnevek, hexadecimális kódok, RGB-értékek stb. használatával.

Íme egy példa arra, hogyan használhatja a text-shadow tulajdonságot a szöveg árnyékolásához:

.text-shadow-element { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }

Ebben a példában:

  • A .text-shadow-element osztály szövegárnyékot alkalmaz az elemen belüli szövegre.
  • A 2px 2 pixeles vízszintes eltolást ad meg.
  • A 2px 2 pixeles vízszintes eltolást ad meg.
  • 4px 4 pixelre állítja az elmosódás sugarát.
  • rgba(0, 0, 0, 0, 0.5) az elmosódás sugarát 4 pixelre állítja.

A text-shadow tulajdonságot gyakran használják dekoratív és vizuálisan vonzó szöveghatások létrehozására a címsorokon, bannereken vagy más szöveges elemeken, hogy kiemelkedjenek és mélységet adjanak a weboldalak kialakításának.