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

نکاتی کاربردی در مورد CSS (جلسه 3) : نکاتی در مورد ویژگی های background و clip

0 354 ۲۰ آذر ۹۵

در این مطلب با ادامه نکاتی کاربردی در مورد CSS در خدمتتون هستیم.
css-style

خلاصه نویسی ویژگی background مقادیر جدیدی رو قبول میکنه

درون نسخه CSS 2.1 ویژگی خلاصه نویسی شده background شامل 5 ویژگی میشد که عبارتند از:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

درون CSS 3 و بعد از اون سه ویژگی به اونا اضافه شده و سرجمع هشت ویژگی رو میتونین بصورت خلاصه نویسی شده برای background قرار بدین. ویژگی های background-size و background-origin و background-clip رو هم میتونین بصورت زیر مشخص کنید:

همونطور که با استفاده از / یا slash میتونیم مقادیری رو برای ویژگی های font و border-radius مشخص کنیم، برای ویژگی background هم میتونیم این کار رو بصورت بالا انجام بدیم. همونطور که میبینید بعد از قرار دادن 5 ویژگی قبلی، سه ویژگی جدید رو بعد از / قرار دادیم. پس مثلا میتونیم کد زیر رو قرار بدیم:

اگر بخایم این مورد رو درون مرورگر با هم بررسی کنیم، بصورت زیر خواهد بود:

See the Pen New background shorthand values by SitePoint (@SitePoint) on CodePen.

همونطور که دیدید با کلیک بر روی دکمه Toggle new background values تغییراتی بر روی پس زمینه اعمال میشه. در اینجا اومدیم و با استفاده از Javascript، ویژگی background رو تغییر دادیم. در حالت اولیه background بصورت زیر هست:

و با کلیک بر روی دکمه Toggle این ویژگی بصورت زیر در میاد:

بهمین راحتی.

ویژگی clip فقط برای المنتهای با موقعیت Absolute کار میکنه

همونطور که دیدید در نکته قبلی در مورد background-clip صحبت به میان اومد. علاوه بر این ویژگی، ویژگی clip هم وجود داره که بصورت زیر از اون استفاده میکنیم:

با استفاده از این ویژگی میایم و یک المنت رو بصورتی که مد نظرمون هست برش میزنیم و قسمتهایی که خارج از محدوده مورد نظر هستن، پاک میشن. این ویژگی در اینجا بیشتر توضیح داده شده. اگر کار بالا رو انجام بدین، خواهید دید که به هدف مورد نظر نخواهید رسید و اونم بخاطر اینه که اون المنتی که قرار هست clip بشه، باید حتما موقعیت Absolute داشته باشه. یعنی بصورت زیر:

مثال زیر رو در نظر بگیرید:

همونطور که دیدید در حالت اولیه تصویر clip نشده و اونم به این خاطر هست که المنت مورد نظر Absolute نیست. وقتی بر روی دکمه Toggle کلیک میکنیم، با استفاده از Javascript، ویژگی Absolute به المنت مورد نظر اضافه میشه و Clip مورد نظر انجام میشه. همچنین شما میتونین از fixed بجای absolute نیز استفاده کنید.

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

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

موفق و پیروز باشید.

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram