این آموزش در تاریخ ۱۴۰۰/۱۱/۳۰ آپدیت شده است.
آموزش ویژگی clip-path در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی clip-path در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی clip-path در CSS
با استفاده از ویژگی clip-path در CSS میتوان بخش یا قسمتی از یک عنصر را بُرش زد، یعنی به راحتی میتونیم عناصر ( مثه یه باکس یا تصویر ) رو در اشکال ( چند ضلعی ، دایره ای و.. ) به نمایش درآوریم.
یه ویژگی به اسم clip داریم که هم منسوخ شده می باشد و هم برای استفاده ازش باید حتما موقعیت / Position عنصر absolute باشد ولی ویژگی clip-path نیاز نیست حتما Position داشته باشد.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی clip-path را در زبان CSS مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.img1{ clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); } .img2{ clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%); } .img3{ clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .img4{ clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } |
مثال شماره ۲ : استفاده از url ( فراخوانی شناسه تگ svg )
|
1 2 3 4 5 6 7 |
<style> .img1{ clip-path: url(#MyClip); } </style> |
Free-Learn
جدول مشخصات ویژگی clip-path در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | none |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS Masking Module Level 1 |
| نحوه استفاده در جاوااسکریپت | object.style.clipPath=”circle(50%)”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی clip-path در CSS پشتیبانی میکنند یا خیر.
» عددی که در کنار -webkit- وجود دارد ، یعنی از آن نسخه به بالا باید از این پیشوند استفاده نمایید. ( درباره پیشوندها بیشتر بخوانید )
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| clip-path | ۵۵ | ۵۴ | ۴۲ ۱۵ تا ۴۱ -webkit- |
۹٫۱ ۷ تا ۹ -webkit- |
۷۹ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
clip-path: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|none; |
Free-Learn
جدول مقادیر ویژگی clip-path در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| clip-source | استفاده از آدرس / مسیر URL که با استفاده از SVG ایجاد شده است مثال : ( مشاهده مثال )
|
||||||||
| basic-shape | استفاده از اشکال هندسی دایره ای ( circle ) مثال :
بیضی ( ellipse ) مثال :
چند ضلعی ( polygon ) مثال :
مستطیل یا مربع ( inset ) مثال :
|
||||||||
| margin-box | استفاده از حالت های مدل باکس | ||||||||
| border-box | استفاده از حالت های مدل باکس | ||||||||
| padding-box | استفاده از حالت های مدل باکس | ||||||||
| content-box | استفاده از حالت های مدل باکس | ||||||||
| none | هیچ گونه بُرشی بروی عناصر زده نمیشه |
Free-Learn
نکات و توضیحات
- برخی از مرورگرها در نسخه های قدیمی تر از این ویژگی پشتیبانی نمی کنند لذا باید برای حل این مشکل از یسری دستورات پیشوندی از نسخه مشخص شده آن مرورگر ( که در جدول پشتیبانی مرورگرها مشخص شده ) استفاده نمایید.
- -webkit- برای مرورگر سافاری و اُپرا
