آموزش ویژگی clip در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی clip در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی clip در CSS
با استفاده از ویژگی clip در CSS میتوان بخش یا قسمتی از یک عنصر را بُرش زد، یعنی مثلا ما میتونیم با استفاده از این ویژگی و با استفاده از یکسری مختصات بگیم اون تصویر یا عنصر ، فلان بخشش قابل مشاهده باشه و بقیش از دید پنهان باشه.
این ویژگی فقط در صورتی کار میکند که پوزیشن یا position یک عنصر برابر باشد با absolute یا fixed
اگر ویژگی overflow:visible بروی یک عنصر اعمال شده باشد ویژگی clip عمل نخواهد کرد.
این ویژگی در دسته ی ویژگی های بی اعتبار شده می باشد، به همین دلیل پیشنهاد میشه از ویژگی clip-path بجای این ویژگی استفاده نمایید.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی clip را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : قابل مشاهده بودن فقط بخش خاصی از یک عنصر
|
1 2 3 4 5 6 7 8 |
<style> div{ position: absolute; clip: rect(0px,130px,20px,0px); } </style> |
مثال شماره ۲ : در مثال زیر با بردن ماوس بروی تصویر، تصویر بصورت کامل نمایش داده خواهد شد.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> img{ position: absolute; clip: rect(30px,130px,75px,0px); } img:hover{ clip:rect(0px,130px,130px,0px); } </style> |
Free-Learn
جدول مشخصات ویژگی clip در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | auto |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS2 |
| نحوه استفاده در جاوااسکریپت | object.style.clip=”rect(1px,2px,3px,4px)”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی clip در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| clip | ۱٫۰ | ۱٫۰ | ۷٫۰ | ۱٫۰ | ۸٫۰ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
clip: auto|shape|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی clip در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| auto | پیش فرض – هیچ بخش یا قسمتی از عنصر بُرش نخواهد خورد. |
| shape | موقعیت یا محلی یا بخشی را که باید بُرش داده شود را مشخص میکند. تنها مقدار معتبر بصورت زیر می باشد: rect (top, right, bottom, left) یعنی اون بخشی که باید بُرش داده شود فاصله از سمت بالا ، راست ، پایین و چپ تا خوده عنصر |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
جهت استفاده از این ویژگی باید به نکات زیر توجه داشته باشید :
- این ویژگی فقط در صورتی کار میکند که پوزیشن یا position یک عنصر برابر باشد با absolute یا fixed
- اگر ویژگی overflow:visible بروی یک عنصر اعمال شده باشد ویژگی clip عمل نخواهد کرد
- سعی کنید از ویژگی clip-path که ویژگی جدیدتر و کاملتری می باشد، بجای ویژگی clip استفاده نمایید
