CSS Text Shadow és Box Shadow Effects (példákkal)

A CSS3 segítségével kétféle árnyékot hozhat létre: text-shadow(árnyékot ad a szöveghez) és box-shadow(árnyékot ad más elemekhez).

CSS3 szöveges árnyék

A text-shadowtulajdonság legfeljebb négy értéket vehet fel:

  • a vízszintes árnyék
  • a függőleges árnyék
  • az elmosódás hatása
  • a szín
Példák:

Normál szöveg árnyék

h1 { text-shadow: 2px 2px 5px crimson; }
Normál szöveg árnyék példa

Izzó szöveghatás

h1 { text-shadow: 0 0 4px #00FF9C; }
Izzó szöveges példa

Több árnyék

Ennek eléréséhez egyszerűen vesszőt kell hozzáadni két (vagy több) értékkészlet közé:

h1 { color: white; text-shadow: 0 0 3px #F10D58, 0 0 7px #4578D5; }
Több árnyék például fehér szöveggel

CSS3 dobozos árnyék

A box-shadowtulajdonság legfeljebb hat értéket vehet fel:

  • (opcionális) a insetkulcsszó (az árnyékot a kereten belülre változtatja)
  • a vízszintes árnyék
  • a függőleges árnyék
  • az elmosódás hatása
  • a terjesztés
  • a szín
Példák:
.first-div { box-shadow: 1px 1px 5px 3px grey; } .second-div { box-shadow: 0 0 5px 1px lightgrey; } .third-div { box-shadow: inset 0 0 15px 5px rgba(0,0,0,0.75); }
Box-shadow példák

Több információ:

  • MDN webdokumentumok
  • Ellenőrizze a böngésző támogatását
  • CSS box-shadow generátor (bátran kísérletezhet box-shadow-okkal)