سبد (0)

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

افکت های متن در 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

آموزش صوتی CSS3

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه