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

- visibility ٣ mode_comment

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

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

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

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

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

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

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

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

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

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

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

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

comment دیدگاه کاربران
MR.Ali

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

ajavan

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

moshi98

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.