Text Effect در Css3

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

text-shadow

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


ویژگی text-shadow در CSS3 
با استفاده از ویژگی Text shadow می توانیم به متن تایپ شده سایه عمودی ، سایه افقی ، میزان محو بودن و رنگ سایه را تغییر بدهیم . روش انجام اینکار در ادامه توضیح داده می شود  . 
دو عدد اول فاصله از چپ و راست و بالا و پایین می باشد که من به صورت 1px 1px تایپ کرده ام .
عدد سوم که 10px می باشد ضخامت یا مقدار پراکندگی سایه می باشد .
در پایان هم که درصد رنگ سایه تایپ شده است .
به مثال زیر توجه کنید 

 

h1
{
text-shadow: 1px 1px 10px #0036FF;
}

 

کد اصلی قسمت بالا . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)

 

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>
<h1>افکت بر روی متن</h1>
<p><b>نکته:</b> اینترنت اکسپلورر ورژن 9 و نسخه های قدیمی از این ویژگی پشتیبانی نمی کنند</p>
</body>
</html> 



text-shadow-1

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


h1
{
 text-shadow: 1px 1px 2px #FFC000;
}

 

کد اصلی قسمت بالا . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)


<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
h1
{
 text-shadow: 1px 1px 2px #FFC000;
}
</style>
</head>
<body>
<h1>افکت بر روی متن</h1>
<p><b>نکته:</b> اینترنت اکسپلورر ورژن 9 و نسخه های قدیمی از این ویژگی پشتیبانی نمی کنند</p>
</body>
</html>

 

text-shadow-2

مثال دیگر


h1
{
 text-shadow: 5px 5px 5px red;
}

 

کد اصلی قسمت بالا . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)


<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
h1
{
 text-shadow: 5px 5px 5px red;
}
</style>
</head>
<body>
<h1>افکت بر روی متن</h1>
<p><b>نکته:</b> اینترنت اکسپلورر ورژن 9 و نسخه های قدیمی از این ویژگی پشتیبانی نمی کنند</p>
</body>
</html>

 

text-shadow-3

ویژگی word-wrapping در CSS3
تا به حال شده متنی را تایپ کنید و از کادر مشخص شده بیرون بزند ؟ با استفاده از word-wrapping متن تایپ شده فقط داخل کادر نوشته می شود و در صورت بیشتر شدن از عرض کادر به خط بعدی منتقل می شود


p {word-wrap:break-word;}

 

کد اصلی قسمت بالا . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)


<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
p.test
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class='test'> Css3 ورژن جدید همان Css است اما با قابلیت ها و ویژگیهای بیشتر که بسیار کار طراحان را راحت تر کرده است . ویژگیهای مثل سایه دار کردن متن تایپ شده همانند عنوانهایی که برای آموزشهای سایت آسا رایان استفاده شده است  .
منحنی کردن لبه های کادرهایی که در Css وجود نداشت ولی در Css3 گنجانده شده است . </p>
</body>
</html>

 

text-shadow-4

آخرین بروز رسانیپنج شنبه, 31 ارديبهشت 1394 23:01

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا