1. Home
  2. »
  3. HTML CSS
  4. »
  5. آموزش سایه دار کردن متن با ویژگی text-shadow در CSS3

خلاصه این مطلب :

آموزش سایه دار کردن متن با ویژگی text-shadow در CSS3
آموزش سایه دار کردن متن با ویژگی text-shadow در CSS3

آموزش سایه دار کردن متن با ویژگی text-shadow

یکی از ویژگیهایی که خود من در قالب جدید از آن استفاده کرده ام Text Shadow می باشد

با استفاده از این قابلیت به راحتی می توانیم یک سایه برای متن یا عنوانهای اصلی سایتایجاد کنیم . ویژگی Text Shadow و Word wrap زیر مجموعه Text Effect می باشد .

اینترنت اکسپلورر 10 ، فایرفاکس ، اوپرا ، کروم . سافاری از ویژگی Text Shadow پشتیبانیمی کنند . تمام مرورگرها از ویژگی word warp پشتیبانی می کنند .

ویژگی text-shadow در CSS3

با استفاده از ویژگی Text shadow می توانیم به متن تایپ شده سایه عمودی ، سایه افقی

، میزان محو بودن و رنگ سایه را تغییر بدهیم . روش انجام اینکار در ادامه توضیح داده می شود  .

دو عدد اول فاصله از چپ و راست و بالا و پایین می باشد که من به صورت 1px 1px تایپ کرده ام .

عدد سوم که 10px می باشد ضخامت یا مقدار پراکندگی سایه می باشد .

در پایان هم که درصد رنگ سایه تایپ شده است .

به مثال زیر توجه کنید :

 

{

آموزش سایه دار کردن متن با ویژگی text-shadow در CSS3
آموزش سایه دار کردن متن با ویژگی text-shadow در CSS3

شما می توانید شفافیت سایه را با کم کردن عدد سوم کمتر کنید . برای درک بهتر به

مثال زیر توجه کنید  .

آموزش سایه دار کردن متن با ویژگی text-shadow در CSS3
آموزش سایه دار کردن متن با ویژگی text-shadow در CSS3

مـــــــــــــــنـــــــــــیع

 

5/5 - (2 امتیاز)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

لطفا ابتدا به حساب کاربری خود وارد شوید