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

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

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

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

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

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

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

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

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

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

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

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

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 استفاده شده به صورت زیر است:

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

p {word-wrap:break-word;}

خاصیت	توضیحات	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