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

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

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

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

کد HTML:

کد CSS:

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

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

کد HTML:

کد CSS:

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

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

کد HTML:

کد CSS:

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

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

کد HTML:

کد CSS:

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

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

کد HTML:

کد CSS:

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

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

مزایا:

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

معایب:

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

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

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

موفق باشید

یا علی

Source