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

- visibility ٠ mode_comment

در این جلسه با یه ترفند حرفه ای و پیشرفته دیگه در خدمتتون هستیم و امیدواریم که بتونید از اون استفاده کنید. ترفندی که در این جلسه به اون میپردازیم، استایل دهی به Underline هست و در اینجا تقریبا همه روشهای ممکن برای انجام این کار بیان میشه.underline

همونطور که در تصویر بالا مشاهده میکنید، قسمتهایی از متن دارای Underline هستن. میبینید که استایل این Underline خیلی زیبا هست. اون قسمتهایی از کاراکترها که ار Underline پایینتر قرار گرفتن، به زیبایی استایل دهی شده و اونو قطع کردن. به این قسمتها descender گفته میشه. حالا ما قصدمون اینه که چنین Underline رو بسازیم.

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

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

  • استفاده از text-decoration
  • استفاده از border-bottom
  • استفاده از box-shadow
  • استفاده از background-image
  • استفاده از SVG Filter
  • استفاده از ابزار Underline.js
  • استفاده از ویژگیهای text-decoration-*

روشهای دیگه ای همچون Pseudo class یا کلاسهای کاذب هم وجود دارن که میشه این کار رو باهاشون انجام داد. حالا یکی یکی موارد بالا رو با هم دیگه چک میکنیم تا بهتر با اونا آشنا بشیم.

استفاده از text-decoration

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

حالا مثالهایی رو براتون میزنم که با استفاده از اونا میتونیم بهتر با قضیه آشنا شیم.

کد HTML:

کد CSS:

خروجی بصورت زیر میشه:underline 1

همونطور که میبینید Underline قرار گرفته. حالا برای مثال رنگ متن رو تغییر میدیم و همچنین مقدار سایز فونت رو بیشتر میکنیم برای اینکار کدهای CSS رو بصورت زیر تغییر میدیم:

کد CSS:

خروجی:underline 2

همونطور که باید متوجه شده باشید، بزرگترین مشکل text-decoration اینه که نمیشه اون رو سفارش سازی یا Customize کرد. اون اندازه و رنگشو با توجه به متن تغییر میده و خودشو مطابقت میده و نمیشه اون رو مطابق به سلیقه تغییر داد. اگر راهی هم باشه درون همه مرورگرها پشتیبانی نمیشه. حالا میرسیم به مزایا و معایب استفاده از این روش:

مزایا:

  • استفاده راحت
  • محل قرارگیری در زیر Baseline
  • نمایش خوب Descender ها در مرورگرهای Safari و iOS.
  • بخوبی به متون چندخطی اعمال میشه
  • بر روی هر پس زمینه ای اعمال میشه

معایب:

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

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

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

موفق باشید

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

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