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

- visibility ۰ mode_comment

underline

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

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

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

کد HTML:

کد CSS:

میبینید که برای 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:

کد CSS:

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

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

کد HTML:

کد CSS:

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

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

کد HTML:

کد CSS:

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

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

مزایا:

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

معایب:

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

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

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

موفق باشید

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

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