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

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



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

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

0 153 ۲۳ مهر ۹۵

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram