تخفیف ویژه

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

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۲۳ مهر ۱۳۹۵

underline

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

استفاده از background-image

ویژگی background-image بهترین ویژگی هست که ما رو به همه اهدافی که داریم میرسونه. عیب و ایرادهای این روش کم هستن و به اونا اشاره میکنیم. ایده اصلی این روش اینه که شما با استفاده از ویژگی‌های linear-gradient و background-position، یک تصویر رو بوجود بیارید و اون رو بصورت افقی در زیر متن مورد نظر تکرار کنید. در این روش هم باید از ویژگی display: inline; استفاده کنیم. حالا چنتا مثال با هم کار میکنیم تا بهتر با اون و کاربردش آشنا بشید.

کد HTML:

<p>
  <span class="dashed">Dashed example</span>
</p>

کد CSS:

.dashed {
  background-image: -webkit-linear-gradient(left, blue 75%, transparent 75%);
  background-image: linear-gradient(to right, blue 75%, transparent 75%);
  background-position: 0 1.04em;
  background-repeat: repeat-x;
  background-size: 8px 3px;
}

میبینید که برای span مورد نظر یک کلاس با نام dashed قرار دادیم و بعد درون CSS این کلاس رو استایل دهی کردیم. همونطور که میدونید، با استفاده از ویژگی background-image میتونیم یک تصویر رو بعنوان پس زمینه یک المنت قرار بدیم. حالا این تصویر یا یک تصویر آماده هست و یا تصویری هست که خودمون با استفاده از linear-gradient میسازیم. در بالا ما با استفاده از ویژگی linear-gradient یک گرادیان ساختیم که از سمت چپ به راست هست و 75 درصد اول اون به رنگ آبی و 25 درصد آخر اون بی رنگ و شفاف یا transparent هست. با استفاده از ویژگی background-size سایز افقی و عمودی گرادیان رو به ترتیب برابر با 8 و 3 پیکسل قرار دادیم و با استفاده از ویژگی background-repeat اون رو بصورت افقی تکرار کردیم. در انتها هم با استفاده از ویژگی background-position موقعیت اون رو تغییر داده و اون رو در پایین المنت قرار دادیم. خروجی بصورت زیر خواهد بود:underline 13

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

کد HTML:

<p>
  <span class="dotted">Dotted example</span>
</p>

کد CSS:

.dotted {
  background-image: -webkit-linear-gradient(left, #d534e9 50%, transparent 50%);
  background-image: linear-gradient(to right, #d534e9 50%, transparent 50%);
  background-position: 0 1.04em;
  background-repeat: repeat-x;
  background-size: 6px 3px;
}

دیدید که درصد رنگها در گرادیان و همچنین background-size رو تغییر دادیم. خروجی بصورت زیر خواهد بود:underline 14

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

کد HTML:

<p>
  <span class="double">Double example</span>
</p>

کد CSS:

.double {
  background-image: -webkit-linear-gradient(top, red 33%, transparent 33%, transparent 66%, red 66%, red);
  background-image: linear-gradient(to bottom, red 33%, transparent 33%, transparent 66%, red 66%, red);
  background-position: 0 1em;
  background-repeat: repeat-x;
  background-size: 2px 6px;
}

دیدید که ایندفعه گرادیانمون رو کمی پیشرفته‌تر کردیم و stop color‌های بیشتری به اون اضافه کردیم. خروجی بصورت زیر خواهد بود:underline 15

بهمین راحتی. شما فقط محدود به استفاده از gradient نیستید و میتونین هر تصویر مد نظر خودتون رو هم قرار بدین. مثال زیر رو در نظر بگیرید:

کد HTML:

<p>
  <span class="heart">Heart Underline</span>
</p>

کد CSS:

.heart {
  background-image: url("https://up.7learn.com/ms/png/heart.png");
  background-position: 0 0.95em;
  background-repeat: repeat-x;
  background-size: 15px 9px;
  color: #e8665f;
}

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

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

مزایا:

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

معایب:

  • تصاویری که بعنوان Underline قرار میگیرن در مرورگرهای مختلف یا resolution‌های مختلف یا بزرگنمایی‌های مختلف، بصورت مختلف عکس العمل نشون میدن و رفتار یکسانی ندارن

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

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

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.