سایه‌دهی متن در CSS یکی از تکنیک‌های پرکاربرد برای بهبود خوانایی و زیبایی ظاهری متون در طراحی وب است. با استفاده از خاصیت text-shadow می‌توانید به راحتی به متن‌های خود سایه اضافه کنید و رنگ آن را نیز تنظیم نمایید.
خاصیت text-shadow چهار مقدار اصلی می‌پذیرد: افست افقی، افست عمودی، میزان محو شدگی و رنگ سایه. این ویژگی به شما امکان می‌دهد تا جلوه‌های بصری جذابی ایجاد کنید و متن‌های خود را از پس‌زمینه متمایز سازید.
کاربردهای عملی text-shadow
از سایه متن می‌توان در موارد مختلفی استفاده کرد:
- افزایش خوانایی متن روی تصاویر پس‌زمینه
- ایجاد افکت‌های سه‌بعدی برای متون
- طراحی تایپوگرافی خلاقانه
- برجسته کردن عناوین و هدینگ‌ها
نمونه کدهای تنظیم رنگ سایه متن
در ادامه چند مثال عملی از تنظیم رنگ سایه متن را مشاهده می‌کنید:
مثال ۱: سایه متن ساده با رنگ مشکی
h1 {
text-shadow: 2px 2px 4px #000000;
}مثال ۲: سایه متن با رنگ قرمز و محو شدگی بیشتر
.title {
text-shadow: 3px 3px 6px rgba(255, 0, 0, 0.5);
}مثال ۳: چند سایه همزمان با رنگ‌های مختلف
.fancy-text {
text-shadow:
1px 1px 2px blue,
-1px -1px 2px yellow,
0 0 10px rgba(255, 0, 255, 0.8);
}خلاصه درس
- برای رنگ‌های نیمه‌شفاف از فرمت rgba استفاده کنید
- مقادیر منفی برای افست‌ها، سایه را در جهت مخالف ایجاد می‌کنند
- می‌توانید چندین سایه با رنگ‌های مختلف را با کاما از هم جدا کنید
- مقدار محو شدگی (blur) هرچه بزرگتر باشد، سایه نرم‌تر دیده می‌شود
- رنگ سایه می‌تواند با رنگ متن متفاوت یا هماهنگ باشد
با ترکیب مناسب این ویژگی‌ها می‌توانید جلوه‌های بصری جذابی برای متون خود ایجاد کنید. دقت داشته باشید که در استفاده از سایه‌ها زیاده‌روی نکنید تا خوانایی متن حفظ شود.
