آموزش سایه متن در CSS

🎓 آموزش CSS Text Shadow (سایه متن)

تعریف text-shadow

ویژگی text-shadow در CSS برای افزودن سایه به متن استفاده می‌شود.
این ویژگی می‌تواند شامل موارد زیر باشد:

• مقدار افقی (horizontal offset) → فاصله سایه از متن در جهت افقی
• مقدار عمودی (vertical offset) → فاصله سایه از متن در جهت عمودی
• رنگ سایه (color) → رنگ سایه
• مقدار محو شدن (blur radius) → میزان تاری یا محو شدن سایه

مثال‌های ساده

۱. سایه افقی و عمودی

h1 {
  text-shadow: 2px 2px;
}

۲. سایه با رنگ قرمز

h1 {
  text-shadow: 2px 2px red;
}

۳. سایه با رنگ و افکت محو (blur)

h1 {
  text-shadow: 2px 2px 5px red;
}

مثال‌های بیشتر

سایه روی متن سفید

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

سایه با افکت نئون قرمز

h1 {
  text-shadow: 0 0 3px #ff0000;
}

چند سایه همزمان (Multiple Shadows)

ویژگی text-shadow می‌تواند چندین سایه را به صورت لیست جداشده با کاما بپذیرد.

مثال: سایه نئون قرمز و آبی

h1 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px red;
}

جدول ویژگی text-shadow