سایه‌ دادن به نوشته‌ها در CSS

دسته بندی: آموزش
زمان مطالعه: 2 دقیقه
۱۶ دی ۱۳۹۱

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

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

p { text-shadow: 1px 1px 1px #000; }

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

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

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

p { text-shadow: 1px 1px 1px red , 3px 3px 5px blue; }

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

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

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

p { text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); }

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

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

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

امیدوارم که این ابزار‌های خوب بدردتون بخوره ...

چه امتیازی به این مقاله می دید؟
نویسنده علیرضا رحیم‌زاده
دانشجوی مدیریت صنعتی دانشگاه علامه. علاقه‌مند به وبلاگ‌نویسی و ترجمه.

نظرات کاربران

moshi98

سلام
لطفا آموزش های سی اس اس را کامل کنید.خیلی عالیه

ajavan

ازمطالب مفید شما تشکر میکنم

MR.Ali

خیلیییییییییییییییییییییییییییییییییییی جالب بود 😉
ممنون از مطلب مفیدتون :X

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :