یکی از مواردی که در CSS کمبود اون احساس می شد و  در CSS3 اضافه شده ، قابلیت سایه گذاری برای متن هاست . در مطلب امروز در مورد خصوصیت text-shadow صحبت می کنیم .

 

خصوصیت text-shadow چهار مقدار پشت سر هم رو می گیره . برای مثال اگر بخواید برای همه ی پاراگراف های موجود در صفحه ی وب سایه قرار بدید کافیه چنین سلکتور CSS رو داشته باشید .

در سلکتور فوق برای مقدار text-shadow سه مقدار اول ۱px و مقدار آخر #۰۰۰ قرار داده شده . این چهار مقدار موارد زیر رو نشون میده :

 

  • مقدار اول: میزان سایه ی افقی (در جهت محور X )
  • مقدار دوم: میزان سایه ی عمودی (در جهت محور Y )
  • مقدار سوم: میزان محو بودن سایه
  • مقدار چهارم: رنگ سایه

شما می تونید چندین سایه رو برای یک متن قرار بدید . کافیه این مقادیر ۴ تایی رو با کاما جدا کنید . مثل زیر که دو تا سایه گذاشتیم :

استفاده از اعداد مثبت در مقدار اول، امکان قرار دادن سایه را به صورت افقی در سمت راست نوشته ایجاد می‌کند و استفاده از همین اعداد در مقدار دوم، امکان قرار دادن سایه را به صورت عمودی در پایین نوشته ایجاد می‌نماید.

مقدار سوم- میزان محو شدگی لبه‌ها- مقداری اختیاری است و لزومی ندارد که معین شود. این مقدار، نشان دهنده‌ی تعداد پیکسل‌هایی است که در هنگام انبساط نوشته، باعث ایجاد محو شدگی می‌شود. اگر مقدار آن را مشخص نکنید، خود به خود، صفر در نظر گرفته می‌شود.

همچنین به خاطر داشته باشید که می‌توانید از مقادیر RGBA نیز برای تنظیم رنگ‌ استفاده کنید.
به طور مثال، رنگ سفید با شفافیت %۴۰:

ابزارهای بصری ایجاد سایه و تولید کد css لازم

در آخر هم ابزارهایی رو بهتون معرفی می کنم که به راحتی با استفاده از اون ها و با جلوه های زیبا می تونید سایه ی دلخواه تون رو برای متن انتخاب کنید و کد CSS اون رو دریافت کنید :

http://css3gen.com/text-shadow/
http://westciv.com/tools/shadows/
http://www.cssportal.com/css3-text-shadow-generator/
http://css3generator.com