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

- visibility ۰ mode_comment

در این مطلب با ادامه نکاتی کاربردی در مورد 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

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

نیاز به لاگین

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