illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

0 167 ۲۲ مهر ۹۵

underline

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

استفاده از box-shadow

همونطور که میدونین با استفاده از ویژگی box-shadow میتونیم سایه هایی رو برای المنتهای مورد نظرمون قرار بدیم. سایه ها بصورت پیش فرض خارج از المنت ها قرار میگیرن ولی شما میتونین با قرار دادن مقدار inset اونا رو درونی کنید و با اینکار اون سایه درون خود المنت قرار میگیره. برای اینکه با استفاده از box-shadow یک underline قرار بدیم باید از دو تا سایه inset استفاده کنیم. شما از این نمونه Underline فقط در مواقعی که پس زمینتون یک رنگ و یک دست هست میتونین استفاده کنید و در بقیه موارد با ظاهری زشت مواجه میشید. برای قرار دادن یک Underline ساده و تکی بصورت زیر عمل میکنیم:

کد HTML:

کد CSS:

میبینید که box-shadow مورد نظر رو قرار دادیم. خروجی بصورت زیر خواهد بود:underline 8

دیدید که underline به زیبایی ساخته شده و قرار گرفته. همچنین شما با استفاده از همون ترفند جلسه قبل، از text-shadow برای زیباتر کردن Descender ها استفاده کنید. برای اینکار کلاس text-shadow هم اضافه میکنیم:

کد HTML:

کد CSS:

میبینید که text-shadow مورد نظر رو قرار دادیم. خروجی بصورت زیر خواهد بود:underline 9

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

کد HTML:

کد CSS:

میبینید که بجای رنگ مشکی از رنگ قرمز یا red استفاده کردیم. خروجی بصورت زیر خواهد بود:underline 11

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

کد HTML:

کد CSS:

میبینید که بجای دو سایه از 4 سایه استفاده کردیم. خروجی بصورت زیر خواهد بود:underline 12

دیدید که به راحتی دو Underline برای متن مورد نظر قرار دادیم. حالا میرسیم به مزایا و معایب استفاده از این روش:

مزایا:

  • میتونیم به راحتی موقعیت اون رو در زیر Baseline تغییر بدیم
  • میتونیم استایل Descender ها رو با استفاده از text-shadow درست کنیم
  • میتونیم رنگ و ضخامت اون رو تغییر بدیم
  • بر روی متون چند خطی اعمال میشه

معایب:

  • استایل اون رو نمیتونیم تغییر بدیم
  • بر روی هر پس زمینه ای نمیتونیم از اون استفاده کنیم

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

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

موفق باشید

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram