تخفیف ویژه

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

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۲۴ مهر ۱۳۹۵

underline

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

استفاده از SVG Filter

در اینجا میخایم قرار دادن Underline با استفاده از فیلترهای SVG رو بهتون آموزش بدیم. شما میتونین یک فیلتر SVG بصورت Inline بسازید که یک خط رو رسم کنه و بعد با استفاده از mask کاری میکنیم که Descender‌ها بخوبی نمایش داده بشن. در آخر میتونین به فیلتری که با استفاده از SVG ساختید یک id بدین و درون CSS به اون مثل filter: url(‘#svg-underline’) آدرس دهی کنید و اون رو به متن مورد نظر اعمال کنید.

مزیتی که این روش داره اینه که میتونیم Descender هارو بخوبی نمایش بدیم بدون اینکه از text-shadow استفاده کنیم. پس یعنی میتونیم از این ویژگی بر روی هر پس زمینه ای استفاده کنیم و در همه جا از قبیل گرادیان و تصویر بخوبی نمایش داده میشه. این نمونه فقط به متن تک خطی اعمال میشه و نمیشه از اون برای متون چندخطی استفاده کرد. مثال زیر رو در نظر بگیرید:

کد HTML:

<svg class="visuallyHidden">
  <filter id="svg-underline" primitiveUnits="objectBoundingBox">
    <feMorphology in="SourceGraphic" operator="dilate" radius="0.0075 0.05" result="outline"></feMorphology>
    <feFlood flood-color="blue" width="1" height="0.03" x="0" y="0.85" result="underline"></feFlood>
    <feComposite in="underline" in2="outline" operator="out" result="underline"></feComposite>

    <feMerge>
      <feMergeNode in="underline"></feMergeNode>
      <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
  </filter>
</svg>

<p>
  <span class="underline">Tricky handgloves</span>
</p>

کد CSS:

.underline {
	-webkit-filter: url("#svg-underline");
	    filter: url("#svg-underline");
}

میبینید که در کدهای HTML در ابتدا یک تگ SVG با class برابر با vissualyHidden ساختیم و درون CSS اون رو مخفی کردیم. درون تگ SVG یک فیلتر بنام svg-underline ساختیم و تعدادی فیلتر درون اون قرار داده شده که ورودی هر مرحله خروجی مرحله قبل اون هست. کار این فیلتر اینه که Underline در زیر متن مورد نظر قرار بده. در نهایت هم درون کد CSS با استفاده از ویژگی filter، به فیلتر مورد نظر آدرسی دهی کردیم و اون رو برای متن در نظر گرفتیم. خروجی بصورت زیر خواهد بود:underline 17

این مورد در همه مرورگرها بخوبی پشتیبانی نمیشه و Chrome و Firefox اون رو بخوبی نمایش میدن. اگر بخایم مزایا و معایب SVG Filter رو بگیم، بصورت زیر خواهد بود:

مزایا:

  • میتونیم اون در زیر baseline قرار بدیم
  • Descender‌ها بخوبی نمایش داده میشن
  • میتونیم استایل، رنگ و ضخامت اون رو تغییر بدیم
  • بر روی همه پس زمینه‌ها بخوبی نمایش داده میشه

معایب:

  • بر روی متون چند خطی اعمال نمیشه
  • بر روی مرورگرهای Safari و IE و Edge کار نمیکنه و میتونین در این مواقع از text-decoration: underline استفاده کنید. همونطور که قبلا گفتیم text-desocration در مرورگر Safari به خوبی نمایش داده میشه.

استفاده از Underline.js

Underline.js خیلی حرفه ای هست و با استفاده از Javascript و کارای دیگه Underline‌های حرفه ای برای متن‌ها قرار میده. اگر شما قبلا با این ابزار بخورد نداشتید میتونین به این صفحه دمو رفته و نمونه هایی از قدرت این ابزار رو مشاهده کنید. شما میتونین با مشاهده این ویدیو با کارکرد اون آشنا بشید. کاری که این ابزار انجام میده اینه که با استفاده از Canvas یک Underline در زیر متن مورد نظر قرار میده. برای استفاده از این ابزار در سایت خودتون باید ابتدا تغییراتی رو درون اون بوجود بیارید و باید در ابتدا ویدیوی مورد نظر و مستندات اون رو مطالعه کنید.

در جلسه بعد با ادامه این موضوع در خدمتتون هستم.

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

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.