انتخاب رنگ سبز انتخاب رنگ آبی انتخاب رنگ قرمز

Text Effect یا افکت نوشته در CSS

CSS3 Text Effect

CSS3 جتد ویژگی جدید برای نوشته های زیبای شما دارد !

در این درس شما با ویژگی های زیر آشنا می شوید :

  • text-shadow
  • word-wrap

پشتیبانی مرورگر ها
پشتیبانی مرورگر ها از CSS3 Border

اینترنت اکسپلورر هنوز از text-shadow پشتیبانی نکرده است .
فایرفاکس ، کروم ، سافاری و اپرا از این ویژگی پشتیبانی میکنند .
تمامی مرورگر های شناخته شده از word-wrap پشتیبانی می کنند .
ویژگی text-shadow در CSS3

با استفاده از text-shadow میتوانید به نوشته های خود افکت دهید .
شما میتوانید سایه عمودی ، سایه افقی ، میزان محو بودن و رنگ سایه را تعیین کنید :


نمونه (افزودن سایه به نوشته)
Internet ExplorerFirefoxChromeSafariOpera
h1 {
text-shadow: 5px 5px 5px #FF0000;
}
ویژگی word-wrapping در CSS3

وقتی یک نوشته از میزان تعیین شده عرض آن بیشتر باشد از آن بیرون می زند :

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.


با استفاده از سی اس اس 3 و ویژگی word-wrapping میتوانید لغت بسیار بلند را مجبور کنید که کوتاه شود و به خط بعدی برود :

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.


سی اس اسی که استفاده شد به صورت زیر است :
نمونه (word-wrap)
Internet ExplorerFirefoxChromeSafariOpera

p {word-wrap:break-word;}

شرح دادن ویژگی های فوق

برای دیدن صفحه مخصوص هر یک از ویژگی های فوق روی نام آن ها کلیک کنید :

وی بی ایران در Facebook

صفحه رسمی وی بی ایران در فیس بوک قصد دارد تا بهترین مطالب را به Stream شما ارسال کند . اگر میخواهید :
  • استایل های جدید
  • هک های جدید
  • مقاله های محبوب
  • خبر های جدید ویبولتین
  • و ..
برای شما ارسال شود ، هم اکنون پیج ما را لایک کنید .
برای ورود به صفحه رسمی وی بی ایران روی آیکن فیس بوک کلیک کنید .