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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

0 182 ۲۴ مهر ۹۵

underline

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

استفاده از SVG Filter

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

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

کد HTML:

کد CSS:

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram