سبد (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 می توانید به نوشته های خود افکت بدهید.

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

مثال (افکت های متن در 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مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان