آموزش سایه دار کردن متن با ویژگی text-shadow
یکی از ویژگیهایی که خود من در قالب جدید از آن استفاده کرده ام Text Shadow می باشد
با استفاده از این قابلیت به راحتی می توانیم یک سایه برای متن یا عنوانهای اصلی سایتایجاد کنیم . ویژگی Text Shadow و Word wrap زیر مجموعه Text Effect می باشد .
اینترنت اکسپلورر 10 ، فایرفاکس ، اوپرا ، کروم . سافاری از ویژگی Text Shadow پشتیبانیمی کنند . تمام مرورگرها از ویژگی word warp پشتیبانی می کنند .
ویژگی text-shadow در CSS3
با استفاده از ویژگی Text shadow می توانیم به متن تایپ شده سایه عمودی ، سایه افقی
، میزان محو بودن و رنگ سایه را تغییر بدهیم . روش انجام اینکار در ادامه توضیح داده می شود .
دو عدد اول فاصله از چپ و راست و بالا و پایین می باشد که من به صورت 1px 1px تایپ کرده ام .
عدد سوم که 10px می باشد ضخامت یا مقدار پراکندگی سایه می باشد .
در پایان هم که درصد رنگ سایه تایپ شده است .
به مثال زیر توجه کنید :
1 2 3 4 5 |
H1 } ;text-shadow: 1px 1px 10px #0036FF |
{
شما می توانید شفافیت سایه را با کم کردن عدد سوم کمتر کنید . برای درک بهتر به
مثال زیر توجه کنید .
1 2 3 4 5 6 7 |
h1 } ;text-shadow: 1px 1px 2px #FFC000 { |
مـــــــــــــــنـــــــــــیع