در جلسه قبل در مورد استایل دهی به Underline براتون توضیحاتی دادم و شما رو با مزایا و معایب text-decoration آشنا کردم. در این جلسه میخایم در مورد دیگر روشها با همدیگه بحث کنیم.
استفاده از ویژگی 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 قرار گرفت. حالا فرض کنید بخایم رنگ اون رو عوض کنیم. برای اینکار بصورت زیر عمل میکنیم:
کد HTML:
<p> <span class="underline underline--red">Look at me wrapping across these lines of text!</span> </p> |
کد CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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 برای متون چندخطی هم بخوبی نمایش داده خواهد شد یا خیر. خروجی بصورت زیر خواهد بود:
دیدید که چقد راحت هم تونستیم رنگ اون رو تغییر بدیم و هم اینکه این ویژگی در متونی که چند خطی هستن به خوبی قرار میگیره. حالا میتونیم این border رو سفارشی تر هم بکنیم و مثلا اون رو خط خطی نمایش بدیم. برای اینکار بصورت زیر عمل میکنیم:
کد HTML:
<p> <span class="underline">Dashed underline</span> </p> |
کد CSS:
.underline { border-bottom: 2px dashed red; font-size: 48px; } |
دیدید که ایندفعه بجای استفاده از مقدار solid، از مقدار dashed استفاده کردیم. خروجی بصورت زیر خواهد بود:
همونطور که از روی تصاویر بالا هم میتونین اون رو بفهمید، این نوع Underline بصورت کامل در زیر Descender ها قرار میگیره. Descender ها رو همونطور که در جلسه قبل هم گفتم، همون کاراکترهایی هستن که در قسمتی از اونا در زیر baseline قرار میگیره. شما میتونین این مشکل رو به سادگی حل کنید و اونم اینه که المنت رو بصورت inline-block در بیارید و با استفاده از line-height، خط underline رو بالاتر بیارید. اما با اینکار یه مشکل دیگه بوجود میاد و اونم اینه که دیگه نمیتونین برای متونی که چند خطی هستن Underline قرار بدین. این ترفند برای متنهایی که تک خطی هستن کاربرد داره و نمیشه در جاهای دیگه ازش استفاده کرد. مثال زیر رو در نظر بگیرید:
کد HTML:
<p> <span class="underline">Tricky handgloves</span> </p> |
کد CSS:
1 2 3 4 5 6 | .underline { border-bottom: 2px solid currentColor; display: inline-block; line-height: 0.85; font-size: 48px; } |
دیدید که line-height رو کمتر کردیم تا underline بالاتر بیاد. خروجی بصورت زیر خواهد بود:
دیدید که Descender ها در این نمونه با Underline برخورد کرد و کمی بهتر از قبل شده. حالا میتونین از text-shadow هم استفاده کنید و ظاهر اون قسمتهایی که Descender بر روی Underline قرار میگیره رو بهتر کنید. فقط اینجا نکته ای که باید به اون توجه کنید اینه که باید رنگ text-shadow رو برابر با رنگ پس زمینه قرار بدین وگرنه ظاهر بدی پیدا میکنه. پس این نمونه فقط بر روی پس زمینه هایی که رنگ ثابت و یک دست دارن قابل اجرا هست و نمیشه از اون بر روی تصاویر و گرادیان و ... استفاده کرد.
کد HTML:
<p> <span class="underline">Tricky handgloves</span> </p> |
کد CSS:
1 2 3 4 5 6 7 8 9 10 11 | .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 پیکسل سایه سفید رنگ در همه جهات برای متن مورد نظر قرار دادیم. خروجی بصورت زیر خواهد بود:
میبینید که Descender ها چقد قشنگتر شدن. همونطور که دیدید برای انجام اینکار باید تقریبا از 4 ویژگی استفاده کنیم. این کار در مقایسه با ویژگی text-decoration کار بیشتری داشت.
مزایا:
معایب:
در جلسه بعد با ادامه این موضوع در خدمتتون هستم.
امیدوارم از این مطلب خوشتون اومده باشه.
موفق باشید
یا علی
سون لرن • آموزش...برچسب : ترفندهای حرفه ای تلگرام,ترفندهای حرفه ای فیسبوک,ترفندهای حرفه ای فتوشاپ,ترفندهای حرفه ای کامپیوتر,ترفندهای حرفه ای ویندوز 7,ترفندهای حرفه ای اکسل,ترفندهای حرفه ای لاین,ترفندهای حرفه ای واتس اپ,ترفندهای حرفه ای ورد,ترفندهای حرفه ای پاورپوینت, نویسنده : استخدام کار 7learn بازدید : 425