• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

ترفندهای حرفه ای و پیشرفته Front End (جلسه 8) : استایل دهی به underline - قسمت 6

0 185 ۲۶ مهر ۹۵

underline

در جلسه قبل در مورد استایل دهی به Underline براتون توضیحاتی دادم و شما رو با مزایا و معایب SVG Filter و Underline.js آشنا کردم. در این جلسه میخایم در مورد دیگر روشها با همدیگه بحث کنیم.

استفاده از ویژگی های text-decoration

اگر جلسات قبل رو یادت باشه، در مورد ویژگی text-decoration با همدیگه صحبت کردیم و مزیتها و معایب اون رو بیان کردیم. text-decoration خودش بخوبی کار میکنه ولی شما میتونین از ویژگی های آزمایشی دیگه ای هم استفاده کنید تا به قابلیتهای اون اضافه کنید. این ویژگی ها شامل موارد زیر هستند:

  • text-decoration-color
  • text-decoration-skip
  • text-decoration-style

این موارد ویژگی های مورد نیازمون رو به Underline اضافه میکنن ولی باید به پشتیبانی مرورگرها از اونا توجه داشته باشید و خیلی خوب نیست. برای مشاهده پشتیبانی مرورگرها به این لینک میریم. همونطور که میبینید مرورگر Firefox پشتیبانی خوبی از این ویژگی ها داره و مرورگر Safari میتونه با اضافه شدن vendor prefix این ویژگی رو پشتیبانی کنه. این ویژگی ها بر روی نسخه های اخیر منتشر شده مرورگرهای Opera و Chrome قرار داده شده ولی بصورت پیش فرض فعال نیستن. شما برای فعال سازی این موارد عبارت chrome://flags رو در آدرس مرورگر خودتون بزنید تا به صفحه مورد نظر وارد بشید. در اونجا بدنبال مورد Experimental Web Platform feature باشید و اون رو Enable کنید. بعد از اینکار باید مرورگرتون رو یک بار Restart کنید تا بتونین از این ویژگی ها استفاده کنید.

ویژگی text-decoration-color

با استفاده از این ویژگی میتونین رنگ Underline رو جدا از رنگ متن، تغییر بدین. مثلا اگر بخاهیم رنگ Underline رو قرمز رنگ قرار بدیم، بصورت زیر عمل میکنیم:

کد HTML:

کد CSS:

خروجی در مرورگر Firefox بصورت زیر خواهد بود:underline 18

همچنین خروجی در مرورگر Safari بصورت زیر میشه:underline 19

میبینید که در Safari خط Underline بر روی متن قرار گرفته.

ویژگی text-decoration-skip

با استفاده از این ویژگی میتونین استایل Descender ها بهینه سازی کنید. این ویژگی فقط در مرورگر Safari پشتیبانی میشه و بصورت پیش فرض فعال هستند و اعمال میشن. اگر از ابزارهایی مثل Normalize.css استفاده میکنید، این ابزار این ویژگی رو غیرفعال میکنه تا استایل Underline در همه مرورگرها شبیه به هم بشه. شما میتونین در این مواقع دستی اون رو فعال کنید. این ویژگی در مرورگر Safari بصورت زیر نمایش داده میشه:underline 20

ویژگی text-decoration-style

با استفاده از این ویژگی میتونین استایل Underline خودتون رو تغییر بدین و از ویژگی هایی شبیه به Border-bottom برای اون استفاده کنیم. مقادیری که برای این ویژگی میتونیم قرار بدیم، به شرح زیر هستن:

  • dashed
  • dotted
  • dobule
  • solid
  • wavy

باید با همه این موارد از قبل آشتا شده باشید، اما مقدار wavy جدیده و یک Uderline بصورت موجی در زیر متن مورد نظر قرار میده. استایل اون در مرورگر Firefox بصورت زیر هست:underline 21

قرار بود که دو ویژگی text-decoration-width و text-decoration-position هم به این موارد اضافه بشن ولی نظرات کاربران رو به خودش جلب نکردن و اجرایی نشدن.

خب شاید این سوالو از خودتون بپرسید که کدوم روش بهترینه؟

برای متنهای با سایز کوچک از ویژگی text-decoration استفاده کنید و با استفاده از ویژگی های گفته شده در بالا اون رو برای مرورگرهای مدرن آماده سازی و بهینه کنید. وقتی که شما از text-decoration استفاده میکنید، مطمئنید که این مورد بهینه هست و در آینده هم بهینه میمونه و نمیخاد مدام حواستون به تغییرات باشه. برای متنهای اصلی و محتوا میتونین از background-image استفاده کنید. این مورد هم خوب جواب میده و هم ظاهر زیبایی داره. یک mixin زبان sass هم برای اون قرار داده شده که میتونین استفاده کنید. شما میتونین از Text-shadow هم برای استایل دادن به Descender ها استفاده کنید. برای متون تک خطی میتونین از border-bottom استفاده کنید. در آینده و با پشتبانی بیشتر مرورگرها، استفاده از text-decoration خیلی بیشتر میشه. شما میتونین برای مطالعه بیشتر در این زمینه به این لینک مراجعه کنید.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram