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

‏  5 دقیقه
۲۱ مهر ۱۳۹۵

underline

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

استفاده از border-bottom

استفاده از ویژگی border-bottom یک راه سریع و قابل سفارشی شدن رو در اختیار ما قرار میده که میتونیم با استفاده از اون Underline برای متون خودمون قرار بدیم. چون که ما داریم از border درون css استفاده میکنیم، پس میتونیم استایل، رنگ و ضخامت اون رو به آسونی تغییر بدیم. حالا فرض کنید تعدادی المنت از نوع inline داریم و میخایم با استفاده از border-bottom برای اونا underline قرار بدیم.

کد HTML:

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

کد CSS:

.underline {
  border-bottom: 2px solid currentColor;
  font-size: 48px;
}

میبینید که برای Span مورد نظر یک کلاس بنام underline قرار دادیم و بعد درون css، ویژگی border-bottom رو قرار دادیم. میبینید که ضخامت اون رو 2 پیکسل و نوع اون رو solid و رنگ اون رو هم رنگ فعلی قرار دادیم. اگر در مورد currentcolor نمیدونید میتونین این مطلب رو مشاهده کنید. خروجی بصورت زیر خواهد بود:underline 3

دیدید که Underline قرار گرفت. حالا فرض کنید بخایم رنگ اون رو عوض کنیم. برای اینکار بصورت زیر عمل میکنیم:

کد HTML:

<p>
  <span class="underline underline--red">Look at me wrapping across these lines of text!</span>
</p>

کد CSS:

p {
	margin: 100px auto;
	width: 400px;
}

.underline {
  border-bottom: 2px solid currentColor;
  font-size: 48px;
}

.underline--red {
  border-bottom-color: red;
}

میبینید که هنوز کلاس underline با همون کدهای قبلی وجود داره. یک کلاس بنام underline-red اضافه شده و با استفاده از ویژگی border-bottom-color رنگ border متن رو به قرمز تبدیل کردیم. همچنین برای اینکه متنمون در چند خط قرار بگیره، عرض پاراگراف رو برابر با 400 پیکسل قرار دادیم. میخایم ببینیم ویژگی border-bottom برای متون چندخطی هم بخوبی نمایش داده خواهد شد یا خیر. خروجی بصورت زیر خواهد بود:underline 4

دیدید که چقد راحت هم تونستیم رنگ اون رو تغییر بدیم و هم اینکه این ویژگی در متونی که چند خطی هستن به خوبی قرار میگیره. حالا میتونیم این border رو سفارشی‌تر هم بکنیم و مثلا اون رو خط خطی نمایش بدیم. برای اینکار بصورت زیر عمل میکنیم:

کد HTML:

<p>
  <span class="underline">Dashed underline</span>
</p>

کد CSS:

.underline {
  border-bottom: 2px dashed red;
  font-size: 48px;
}

دیدید که ایندفعه بجای استفاده از مقدار solid، از مقدار dashed استفاده کردیم. خروجی بصورت زیر خواهد بود:underline 5

همونطور که از روی تصاویر بالا هم میتونین اون رو بفهمید، این نوع Underline بصورت کامل در زیر Descender‌ها قرار میگیره. Descender‌ها رو همونطور که در جلسه قبل هم گفتم، همون کاراکترهایی هستن که در قسمتی از اونا در زیر baseline قرار میگیره. شما میتونین این مشکل رو به سادگی حل کنید و اونم اینه که المنت رو بصورت inline-block در بیارید و با استفاده از line-height، خط underline رو بالاتر بیارید. اما با اینکار یه مشکل دیگه بوجود میاد و اونم اینه که دیگه نمیتونین برای متونی که چند خطی هستن Underline قرار بدین. این ترفند برای متنهایی که تک خطی هستن کاربرد داره و نمیشه در جاهای دیگه ازش استفاده کرد. مثال زیر رو در نظر بگیرید:

کد HTML:

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

کد CSS:

.underline {
  border-bottom: 2px solid currentColor;
  display: inline-block;
  line-height: 0.85;
  font-size: 48px;
}

دیدید که line-height رو کمتر کردیم تا underline بالاتر بیاد. خروجی بصورت زیر خواهد بود:underline 6

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

کد HTML:

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

کد CSS:

.underline {
  border-bottom: 2px solid currentColor;
  display: inline-block;
  line-height: 0.85;
  font-size: 48px;
  text-shadow:
    2px 2px white,
    2px -2px white,
    -2px 2px white,
    -2px -2px white;
}

میبینید که به اندازه 2 پیکسل سایه سفید رنگ در همه جهات برای متن مورد نظر قرار دادیم. خروجی بصورت زیر خواهد بود:underline 7

میبینید که Descender‌ها چقد قشنگتر شدن. همونطور که دیدید برای انجام اینکار باید تقریبا از 4 ویژگی استفاده کنیم. این کار در مقایسه با ویژگی text-decoration کار بیشتری داشت.

مزایا:

  • میتونیم با استفاده از text-shadow استایل descender‌ها رو درست کنیم
  • میتونیم رنگ و ضخامت و استایلشونو تغییر بدیم
  • میتونیم رنگ و ضخامت اونا رو انیمیشنی کنیم
  • برای خطوط چند خطی هم اعمال میشه، مگر اینکه از ویژگی inline-block استفاده کنید
  • بر روی همه پس زمینه‌ها قابل اعمال هست، مگر اینکه از ویژگی text-shadow استفاده کنید

معایب:

  • موقعیتش خیلی پایینتر از متن هست و به سختی تغییر موقعیت میده
  • باید از ویژگی‌های نامربوط زیادی استفاده کنیم تا به هدف برسیم
  • زمانی که از text-shadow استفاده میکنیم، اگر متن مورد نظر رو انتخاب کنیم ظاهر خوبی نداره

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

نیاز به لاگین

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

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

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