افکت های متن در CSS3
افکت های متن در CSS3
در CSS3 چند خاصیت جدید برای متن، اضافه شده است.
در این قسمت با خاصیت های زیر آشنا می شوید:
- text-shadow
- word-wrap
پشتیبانی مرورگرها
| خاصیت | پشتیبانی مرورگرها | ||||
|---|---|---|---|---|---|
| text-shadow |  |
 |
 |
 |
 |
| word-wrap | |
|
|
|
|
مرورگرهای Internet Explorer 10, Firefox, Chrome, Safari, Opera خاصیت های افکت متن را پشتیبانی می کنند.
توجه: Internet Explorer 9 و نسخه های قبلی آن، خصوصیت text-shadow را پشتیبانی نمی کنند.
سایه دار کردن متن در CSS3
با استفاده از خاصیت text-shadow می توانید به نوشته های خود افکت بدهید.
شما میتوانید سایه عمودی، سایه افقی، میزان محو بودن و رنگ سایه را تعیین کنید:
مثال (افکت های متن در CSS3)
اضافه کردن سایه به تمام عناصر <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.
با استفاده خاصیت word-wrapping در CSS3 می توانید لغت بسیار بلند را مجبور کنید که کوتاه شود و به خط بعدی برود:
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
کد CSS استفاده شده به صورت زیر است:
مثال (افکت های متن در CSS3)
اجازه می دهد تا کلمات بلند بتوانند شکسته شوند و ادامه آنها در خط بعدی قرار گیرد:
خاصیت های متن در CSS3
| خاصیت | توضیحات | 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 |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 21276
