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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

0 153 ۲۰ مهر ۹۵

در این جلسه با یه ترفند حرفه ای و پیشرفته دیگه در خدمتتون هستیم و امیدواریم که بتونید از اون استفاده کنید. ترفندی که در این جلسه به اون میپردازیم، استایل دهی به Underline هست و در اینجا تقریبا همه روشهای ممکن برای انجام این کار بیان میشه.underline

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

استایل دهی به Underline خیلی سخت هست و اگر راهی هم پیدا بشه، احتمالش کم هست که درون همه مرورگرها بخوبی نمایش داده بشه. هدف ما از این آموزش اینه که یک Underline بهینه برای متون خودمون بسازیم. قاعدتا روشی که همه خوبی ها رو داشته باشه پیدا نخواهیم کرد، اما میتونیم در هر شرایطی بهترین رو انتخاب کنیم.

ما در اینجا روشهای متداولی که برای قرار دادن Underline هستن رو بیان میکنیم و برای هر کدوم مثالهایی رو قرار میدیم و شما رو با اونا آشنا میکنیم. در آخر مزایا و معایب هر مورد رو بیان میکینم و دیگه انتخاب رو به عهده خودتون میزاریم. روشها بصورت زیر هستن:

  • استفاده از text-decoration
  • استفاده از border-bottom
  • استفاده از box-shadow
  • استفاده از background-image
  • استفاده از SVG Filter
  • استفاده از ابزار Underline.js
  • استفاده از ویژگیهای text-decoration-*

روشهای دیگه ای همچون Pseudo class یا کلاسهای کاذب هم وجود دارن که میشه این کار رو باهاشون انجام داد. حالا یکی یکی موارد بالا رو با هم دیگه چک میکنیم تا بهتر با اونا آشنا بشیم.

استفاده از text-decoration

ویژگی text-decoration سر راست ترین راه برای قرار دادن Underline برای متون هست. شما به راحتی یک ویژگی رو مشخص میکنید و قرار میدید و بعد از اون همه کارها بصورت اتوماتیک انجام میشه و Underline مورد نظر قرار میگیره و نیاز به هیچ چیز دیگه ای نداره. در فونت با سایزهای کوچک خیلی خوب نمایش داده میشه ولی هر چه سایز فونت رو بزرگتر میکنیم، خروجی اون بدریختر میشه.

حالا مثالهایی رو براتون میزنم که با استفاده از اونا میتونیم بهتر با قضیه آشنا شیم.

کد HTML:

کد CSS:

خروجی بصورت زیر میشه:underline 1

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

کد CSS:

خروجی:underline 2

همونطور که باید متوجه شده باشید، بزرگترین مشکل text-decoration اینه که نمیشه اون رو سفارش سازی یا Customize کرد. اون اندازه و رنگشو با توجه به متن تغییر میده و خودشو مطابقت میده و نمیشه اون رو مطابق به سلیقه تغییر داد. اگر راهی هم باشه درون همه مرورگرها پشتیبانی نمیشه. حالا میرسیم به مزایا و معایب استفاده از این روش:

مزایا:

  • استفاده راحت
  • محل قرارگیری در زیر Baseline
  • نمایش خوب Descender ها در مرورگرهای Safari و iOS.
  • بخوبی به متون چندخطی اعمال میشه
  • بر روی هر پس زمینه ای اعمال میشه

معایب:

  • Descender در بقیه مرورگرها خوب نمایش داده نمیشن
  • نمیشه رنگ، سایز و استایل اونا رو تغییر داد

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

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

موفق باشید

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram