مقدمه
ویژگی text-shadow در CSS برای ایجاد سایه روی متن استفاده میشود. این ویژگی عملکردی مشابه box-shadow دارد، با این تفاوت که به جای اعمال سایه روی کل عنصر، سایه روی تکتک حروف متن اعمال میشود.
به کمک text-shadow میتوانید جلوههای بصری جذابتری به تیترها، دکمهها و سایر متون سایت اضافه کنید.
نحوه استفاده از text-shadow
یک نمونه ساده:
text-shadow: 2px 2px 1px rgba(0,0,0,0.4);
ترتیب مقادیر به شکل زیر است:
text-shadow: offset-x offset-y blur-radius color;
که در آن:
offset-x→ میزان جابهجایی سایه در محور افقیoffset-y→ میزان جابهجایی سایه در محور عمودیblur-radius→ میزان محوشدگی سایهcolor→ رنگ سایه
مثال ساده
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
در این مثال:
- سایه ۲ پیکسل به سمت راست منتقل میشود.
- ۲ پیکسل به سمت پایین قرار میگیرد.
- میزان محوشدگی آن ۴ پیکسل است.
- رنگ سایه مشکی با شفافیت ۳۰٪ است.
استفاده از چند سایه همزمان
یکی از قابلیتهای جالب text-shadow امکان تعریف چندین سایه برای یک متن است.
مثال:
text-shadow:
45px 25px 4px rgb(25,93,229),
25px 15px 1px rgb(25,93,229);
در این حالت دو سایه مختلف روی متن اعمال میشود.
هر سایه با یک ویرگول از سایه بعدی جدا میشود.
نمونه کاربردی
h1 {
text-shadow:
2px 2px 4px rgba(0,0,0,.3),
4px 4px 8px rgba(0,0,0,.2);
}
این تکنیک باعث میشود متن عمق بیشتری پیدا کند و سهبعدیتر به نظر برسد.
تفاوت text-shadow و box-shadow
text-shadow
روی متن اعمال میشود:
text-shadow: 2px 2px 4px #000;
box-shadow
روی کل عنصر اعمال میشود:
box-shadow: 2px 2px 4px #000;
محدودیتهای text-shadow
برخلاف box-shadow، ویژگی text-shadow از موارد زیر پشتیبانی نمیکند:
مقدار Spread
در box-shadow میتوان میزان گسترش سایه را مشخص کرد:
box-shadow: 0 0 5px 3px #000;
اما در text-shadow چنین قابلیتی وجود ندارد.
کلیدواژه inset
در box-shadow میتوان سایه داخلی ایجاد کرد:
box-shadow: inset 0 0 5px #000;
اما در text-shadow استفاده از inset امکانپذیر نیست.
البته با ترکیب چند سایه میتوان جلوهای شبیه به سایه داخلی ایجاد کرد، اما سایه واقعاً داخلی نخواهد بود.
کاربردهای رایج text-shadow
برجسته کردن تیترها
h1 {
text-shadow: 2px 2px 5px rgba(0,0,0,.3);
}
ساخت متن نئونی
.neon {
color: white;
text-shadow:
0 0 5px #0ff,
0 0 10px #0ff,
0 0 20px #0ff;
}
ایجاد افکت سهبعدی
.title {
text-shadow:
1px 1px #999,
2px 2px #777,
3px 3px #555;
}
جمعبندی
ویژگی text-shadow یکی از سادهترین و در عین حال کاربردیترین ابزارهای CSS برای زیباتر کردن متون است.
مهمترین نکات:
- سایه روی حروف متن اعمال میشود.
- شامل چهار مقدار اصلی است: موقعیت افقی، موقعیت عمودی، میزان محوشدگی و رنگ.
- امکان استفاده از چندین سایه به صورت همزمان وجود دارد.
- برخلاف
box-shadowازspreadوinsetپشتیبانی نمیکند.
با استفاده صحیح از text-shadow میتوانید تیترها و متون سایت را جذابتر و حرفهایتر نمایش دهید.
از همراهی شما با پارمین کلود متشکریم.
نظرات کاربران