افکت های متن در CSS3

Wiki

در CSS3 چند خاصیت جدید برای متن، اضافه شده است.

در این قسمت با خاصیت های زیر آشنا می شوید:

  • text-shadow
  • word-wrap

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

Wiki

خاصیتپشتیبانی مرورگرها
text-shadow
word-wrap

مرورگرهای Internet Explorer 10, Firefox, Chrome, Safari, Opera خاصیت های افکت متن را پشتیبانی می کنند.

توجه: Internet Explorer 9 و نسخه های قبلی آن، خصوصیت text-shadow را پشتیبانی نمی کنند.

سایه دار کردن متن در CSS3

Wiki

با استفاده از خاصیت text-shadow می توانید به نوشته های خود افکت بدهید.

Text shadow effect!

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

مثال (افکت های متن در CSS3)

اضافه کردن سایه به تمام عناصر <h1>

h1
{
text-shadow: 5px 5px 5px #FF0000;
}
خودتان امتحان کنید »

 بسته بندی کلمات (Word Wrapping) در CSS3

Wiki

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

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

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

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

کد CSS استفاده شده به صورت زیر است:

مثال (افکت های متن در CSS3)

اجازه می دهد تا کلمات بلند بتوانند شکسته شوند و ادامه آنها در خط بعدی قرار گیرد:

p {word-wrap:break-word;}
خودتان امتحان کنید »

خاصیت های متن در CSS3

Wiki

خاصیتتوضیحاتCSS
text-align-last زمانی که از خاصیت text-align با مقدار "justify" برای هم تراز کردن متن استفاده شود، خاصیت text-align-last، چگونگی هم تراز شدن خط آخر را مشخص می کند. 3
text-emphasis علامت های تأکید (emphasis) و رنگ پیش زمینه آنها را در متن، مشخص می کند. 3
text-justify زمانی که از خاصیت text-align با مقدار "justify" برای هم تراز کردن متن استفاده شود، خاصیت text-justify، روش هم تراز کردن متن را مشخص می کند. 3
text-outline برای متن، یک outline مشخص می کند. 3
text-overflow زمانی که متن، از اندازه عنصری که در آن قرار دارد، سرریز (overflow) می کند، چه اتفاقی بیافتد. 3
text-shadow به متن سایه اضافه می کند. 3
text-wrap قوانین شکستن خطوط متن را مشخص می کند. 3
word-wrap اجازه می دهد لغات بسیار بلند، کوتاه شوند و به خط بعدی بروند. 3