🎓 آموزش 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
| ویژگی | توضیح |
|---|---|
| text-shadow | تعیین افکت سایه برای متن |