در CSS با استفاده از خاصیت text-shadow می توان برای متون یک یا چند سایه ایجاد کرد. این خاصیت بخشی از استاندارد CSS2 می باشد و نیازی به استفاده از پیشوند مخصوص مرورگرهای قدیمی برای پشتیبانی این خاصیت نیست.
قاعده کلی :
text-shadow: h-offset v-offset blur-radius color;
- h-offset: موقعیت افقی سایه را مشخص می کند. مقادیر منفی نیز مجاز می باشند.
- v-offset: موقعیت عمودی سایه را مشخص می کند. مقادیر منفی نیز مجاز می باشند.
- blur-radius: شعاع گسترش سایه را مشخص می کند. یعنی مشخص می کند که سایه باید تا چه فاصله ایی گسترش پیدا کرده و سپس محو شود .(میزان کدر شدن سایه را مشخص می کند). استفاده از مقدار پیش فرض صفر باعث ایجاد یک سایه یکدست می شود. مقادیر منفی مجاز نمی باشند.
- color : این پارامتر یک پارامتر اختیاری بوده و رنگ سایه را مشخص می کند.مقدار پیش فرض این پارامتر برابر با رنگ متن عنصر می باشد. برای ایجاد یک سایه واقعی بهتر است از رنگ های شفاف و توابع rgba() و hsla() برای این پارامتر استفاده شود.
برای پارامترهای خاصیت text-shadow فقط مجاز به استفاده از مقادیر length مثل px و em و … هستیم. استفاده از مقادیر درصدی مجاز نمی باشد.
ترتیب قرار گرفتن مقادیر عددی در خاصیت text-shadow مهم است اما مقدار پارامتر color می تواند در ابتدا و یا انتهای دستور ذکر شود.
مثال :
#crisp{
color: #00AEEF;
text-shadow: 3px 3px rgba(0,0,0,0.5);
}
استفاده از مقدار پیش فرض صفر برای پارامتر blur-radius در مثال فوق یک سایه یکدست ایجاد کرده است.
مثال :
#text-shadow{
color: #00AEEF;
text-shadow: 3px 3px 5px rgba(0,0,0,0.5);
}
برای یک متن می توان چندین سایه تعریف کرد. به منظور ایجاد سایه های چندگانه برای یک متن، هر تعریف باید با یک کاما از دیگری جدا شود.در این حالت اولین سایه تعریف شده در بالا و بر روی باقی سایه ها نمایش داده می شود و باقی سایه ها به ترتیب پشت سرهم لایه بندی می شوند.
مثال : ایجاد حالت outline برای متن با استفاده از سایه های چندگانه
#outline{
color: #fff;
text-shadow: -1px 0 1px #000,
0 1px 1px #000,
1px 0 1px #000,
0 -1px 1px #000;
}
در مثال فوق با اعمال 1px سایه به متن و در چهار جهت مختلف حالت outline برای متن ایجاد شده است.