در جلسه قبل در مورد استایل دهی به Underline براتون توضیحاتی دادم و شما رو با مزایا و معایب border-bottom آشنا کردم. در این جلسه میخایم در مورد دیگر روشها با همدیگه بحث کنیم.
همونطور که میدونین با استفاده از ویژگی box-shadow میتونیم سایه هایی رو برای المنتهای مورد نظرمون قرار بدیم. سایه ها بصورت پیش فرض خارج از المنت ها قرار میگیرن ولی شما میتونین با قرار دادن مقدار inset اونا رو درونی کنید و با اینکار اون سایه درون خود المنت قرار میگیره. برای اینکه با استفاده از box-shadow یک underline قرار بدیم باید از دو تا سایه inset استفاده کنیم. شما از این نمونه Underline فقط در مواقعی که پس زمینتون یک رنگ و یک دست هست میتونین استفاده کنید و در بقیه موارد با ظاهری زشت مواجه میشید. برای قرار دادن یک Underline ساده و تکی بصورت زیر عمل میکنیم:
کد HTML:
<p> <span class="underline">Single underline</span> </p> |
کد CSS:
1 2 3 4 5 6 | .underline { background-size: 1px 1em; box-shadow: inset 0 -0.14em white, inset 0 -0.18em #000; display: inline; font-size: 56px; } |
میبینید که box-shadow مورد نظر رو قرار دادیم. خروجی بصورت زیر خواهد بود:
دیدید که underline به زیبایی ساخته شده و قرار گرفته. همچنین شما با استفاده از همون ترفند جلسه قبل، از text-shadow برای زیباتر کردن Descender ها استفاده کنید. برای اینکار کلاس text-shadow هم اضافه میکنیم:
کد HTML:
<p> <span class="text-shadow underline">Single underline</span> </p> |
کد CSS:
1 2 3 4 5 6 7 8 9 10 | .text-shadow { text-shadow: -2px -2px white, -2px 2px white, 2px -2px white, 2px 2px white; } .underline { background-size: 1px 1em; box-shadow: inset 0 -0.14em white, inset 0 -0.18em #000; display: inline; font-size: 56px; } |
میبینید که text-shadow مورد نظر رو قرار دادیم. خروجی بصورت زیر خواهد بود:
دیدید که حرف g که یک descender هست چقد زیبا Underline رو قطع کرده. همچنین به راحتی میتونیم رنگ Underline رو تغییر بدیم. برای اینکار بصورت زیر عمل میکنیم:
کد HTML:
<p> <span class="text-shadow underline">My underline even wraps. It’s super impressive. You’re impressed, right?</span> </p> |
کد CSS:
1 2 3 4 5 6 7 8 9 10 | .text-shadow { text-shadow: -2px -2px white, -2px 2px white, 2px -2px white, 2px 2px white; } .underline { background-size: 1px 1em; box-shadow: inset 0 -0.14em white, inset 0 -0.18em red; display: inline; font-size: 56px; } |
میبینید که بجای رنگ مشکی از رنگ قرمز یا red استفاده کردیم. خروجی بصورت زیر خواهد بود:
اینم از رنگ تغییر دادن Underline. همونطور که میبینید این روش بخوبی بر روی متونی که چندخطی هستن هم اعمال میشه. همچنین میتونیم با کم و زیاد کردن سایه ها، دو یا بیشتر Underline قرار بدیم. بصورت زیر:
کد HTML:
<p> <span class="text-shadow underline">Double Underline</span> </p> |
کد CSS:
1 2 3 4 5 6 7 8 9 10 | .text-shadow { text-shadow: -2px -2px white, -2px 2px white, 2px -2px white, 2px 2px white; } .underline { background-size: 1px 1em; box-shadow: inset 0 -0.075em white, inset 0 -0.1em red, inset 0 -0.15em white, inset 0 -0.175em red; display: inline; font-size: 56px; } |
میبینید که بجای دو سایه از 4 سایه استفاده کردیم. خروجی بصورت زیر خواهد بود:
دیدید که به راحتی دو Underline برای متن مورد نظر قرار دادیم. حالا میرسیم به مزایا و معایب استفاده از این روش:
مزایا:
معایب:
در جلسه بعد با ادامه این موضوع در خدمتتون هستم.
امیدوارم از این مطلب خوشتون اومده باشه.
موفق باشید
یا علی
سون لرن • آموزش...برچسب : ترفندهای حرفه ای تلگرام,ترفندهای حرفه ای فیسبوک,ترفندهای حرفه ای فتوشاپ,ترفندهای حرفه ای کامپیوتر,ترفندهای حرفه ای ویندوز 7,ترفندهای حرفه ای اکسل,ترفندهای حرفه ای لاین,ترفندهای حرفه ای واتس اپ,ترفندهای حرفه ای ورد,ترفندهای حرفه ای پاورپوینت, نویسنده : استخدام کار 7learn بازدید : 336