ویژگی text-shadow در CSS

با ویژگی text-shadow می‌ توان یک سایه برای متن ایجاد کرد.

PNLdev

نمونه کد

آزمایشگاه

پارامترهای text-shadow در CSS

ویژگی text-shadow در CSS، چهار پارامتر دریافت می‌ کند:

  • پارامتر اول (x): موقعیت افقی سایه را مشخص می‌ کند.
  • پارامتر دوم (y): موقعیت عمودی سایه را مشخص می‌ کند.
  • پارامتر سوم (blur): میزان تاری سایه مشخص می‌ کند.
  • پارامتر چهارم (color): رنگ سایه را مشخص می‌ کند.

محل قرارگیری سایه متن در CSS

برای تنظیم موقعیت سایه متن، در جهت های افقی و عمودی از پارامتر اول و دوم این ویژگی استفاده می‌ شود.

نمونه کد

در این نمونه کد، سایه ی متن 3 پیکسل به سمت راست و 4 پیکسل به سمت پایین تنظیم شده است.

آزمایشگاه

میزان تاری سایه متن در CSS

برای تعیین میزان تاری سایه متن، پارامتر سوم را به صورت عددی قرار می‌ دهیم.

نمونه کد

در این نمونه کد، در پارامتر سوم میزان تاری سایه را تنظیم کرده است.

آزمایشگاه

رنگ سایه متن در CSS

برای تعیین رنگ سایه متن، پارامتر چهارم را می‌ توان با رنگ پر کرد.

نمونه کد

آزمایشگاه

 نکته: برای آشنایی با رنگ ها، به درس رنگ ها در CSS مراجعه کنید.

خلاصه درس

در این درس با ویژگی text-shadow در CSS:

  • پارامتر های text-shadow
  • محل قرارگیری سایه متن
  • میزان تاری سایه متن
  • رنگ سایه متن

آشنا شدیم.

توسعه دهندگان
احسان اسلامی