• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6246 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

15284 ۱۶ دی ۹۱

یکی از مواردی که در 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/

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 3 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

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

  • ‏‏

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

  • ‏‏

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram