clip-path

با استفاده از ویژگی clip-path می توان قسمتی از یک عنصر HTML و یا SVG را برش داد.

Clip path یا مسیر برش یک ناحیه را بر روی یک عنصر بوجود می آورد که هرچه که داخل ناحیه باشد باید نمایش داده شود و هر آنچه که خارج آن باشد قابل مشاهده نخواهد بود و به اصطلاح برش خواهد خورد.

 

 

این مسیر می تواند اشکال پایه ای CSS مانند دایره، بیضی، چندضلغی و غیره باشد.

Polygon

چندضلعی انعطاف پذیرترین روش اما به نوعی پیچیده ترین نیز می باشد از این رو شاید بهتر باشد برای مشخص کردن یک مسیر برش چندضلعی از یک ابزار استفاده کرد که کار را آسان تر می کند.

مشخص کردن یک چندضلعی با مشخص کردن نقطه های مختلف امکان پذیر است. برای تعیین هر نقطه مختصات x و y آن نقطه باید مشخص شود که این کار از طریق هر واحدی امکان پذیر می باشد.

به عنوان مثال فرض کنید میخواهیم یک مسیر برش مثلثی شکل بسازیم، در نتیجه به سه نقطه برای رسم مثلث احتیاج داریم. نقطه اول راس بالایی مثلث است و ما میخواهیم این راس در وسط عنصر از نظر افقی و از لحاظ عمودی در بالاترین نقطه عنصر قرار بگیرد پس کافی است از واحد درصد استفاده کرده و نقطه اول را بصورت (50% 0) مشخص کنیم. راس دوم باید در سمت چپ پایین عنصر و راس سوم در سمت راست پایین عنصر باشد در نتیجه مثلث یا چندضلعی ما بصورت زیر تعریف می شود:

/* برش مثلثی شکل */
.polygon1 {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

همچنین می توان اشکال پیچیده تری مثل حرف X و یا یک ستاره بوجود آورد و عنصر را برش داد:

/* X */
.polygon2 {
  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%);
}

/* ستاره */
.polygon3 {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

نتیجه این سه برش بر روی عنصر تصویر زیر اعمال شده است و بصورت زیر می باشد:

 

See the Pen Clip-path: polygon by Mojtaba Seyedi (@seyedi) on CodePen.

 

Circle

برای ساخت مسیربرش دایره باید از تابع دایره در سی اس اس استفاده کرد که سینتکس آن بصورت زیر است:

circle(radius at posX posY)

به عنوان اولین مقدار باید شعاع دایره مشخص شود سپس مقادیر اختیاری مکان مرکز دایره تعیین می شوند که اگر تعیین نشوند مقدار پیشفرض آنها یعنی 50 درصد یا همان مرکز عنصر اعمال خواهد شد.

فرض کنید دایره ای میخواهیم که شعاعش به اندازه نصف اندازه عنصر است پس باید برای مقدار شعاع مقدار 50% را تعیین کنیم و چون می خواهیم مرکز دایره وسط عنصر باشد پس نیازی به تعیین آن نیست و مقدار پیشفرض برای ما کار را انجام خواهد داد:

.circle { 
  clip-path: circle(50%);
}

حال اگر بخواهیم مرکز دایره را بصورت دلخواه و چیزی غیر از مرکز عنصر تعیین کنیم می توانیم بصورت زیر عمل کنیم و همینطور شعاع را افزایش می دهیم:

.circle2 { 
  clip-path: circle(70% at 70% 20%);
}

دو عنصر برش خورده در زیر آمده اند:

 

See the Pen clip-path: circle by Mojtaba Seyedi (@seyedi) on CodePen.

 

Ellipse

مسیر برش می تواند یک بیضی باشد و سینتکس آن مشابه به دایره است با این تفاوت که بیضی دو شعاع دارد. همچنین مشابه به دایره اگر مرکز بیضی مشخص نشود بصورت پیش فرض مرکز عنصر خواهد بود:

.ellipse {
  clip-path: ellipse(50% 35%);
}
.ellipse2 {
  clip-path: ellipse(50% 65% at 70% 50%);
}

 

See the Pen clip-path: ellipse by Mojtaba Seyedi (@seyedi) on CodePen.

 

Inset

به وسیله تابع inset می توان یک مستطیل داخلی بوجود آورد و آن را به عنوان مسیر برش تعیین کرد. این تابع می تواند یک تا چهار مقدار بپذیرد. که مقادیر فاصله لبه های مستطیل از لبه های عنصر می باشند.

مقادیر این تابع شبیه به مقدار دهی مدل مختصر نویسی margin می باشد. به عنوان نمونه اگر می خواهیم یک مستطیل داشته باشیم که از هر طرف 10 پیکسل فاصله داشته باشد کافی است فقط یک مقدار به این تابع بدهیم. و همینطور می توان دو مقدار، سه مقدار و چهار مقدار برای این تابع مشخص کرد:

.inset {
  clip-path: inset(20% 25% 20% 10%);
}

در مثال بالا لبه بالای مستطیل از عنصر 20 درصد، لبه راست 25 درصد، لبه پایین 20 درصد ارتفاع و لبه چپ از لبه چپ عنصر 10 درصد عرض عنصر فاصله خواهد داشت.

همینطور اگر بخواهیم گوشه های مستطیل گرد باشند می توانیم از کلمه کلیدی round استفاده کنیم و بعد از آن مقدار شعاع گردی را مشخص کنیم:

.inset2 {
  clip-path: inset(45% 0% 33% 10% round 10px);
}

با تغییر مقادیر در مثال زیر به درک بهتر موضوع کمک کنید:

 

See the Pen clip-path: inset by Mojtaba Seyedi (@seyedi) on CodePen.

 

اشکال SVG

همچنین می توان برای رسم مسیر برش های پیچیده تر از SVG استفاده کرد کافی است عنصر و شکل و یا مسیری که توسط SVG رسم کرده ایم را درون عنصر <clipPath> قرار دهیم سپس آن را درون عنصر defs بنویسیم، چیزی شبیه زیر:

<svg width="0" height="0">
  <defs>
    <clipPath id="my-shape">
      <path d="M89.6342913,129 C86.6318679,137.611315 85,146.865086 85,156.5 C85,200.767808 119.448105,236.989829 163,239.821749 L163,300 L300,300 L300,163 L251.750745,163 C251.915896,160.855015 252,158.687329 252,156.5 C252,110.384223 214.615777,73 168.5,73 C146.712501,73 126.873981,81.3445721 112.006052,95.0121046 L64.5,0 L0,129 L89.6342881,129 Z">
      </path>
    </clipPath>
  </defs>
</svg>

سپس می توان بصورت زیر با استفاده از تابع url و id عنصر SVG و ویژگی clip-path برش مورد نظر را روی عنصر اعمال کرد:

.svg-shape {
  clip-path: url(#my-shape);
}

 

See the Pen clip-path: url(#svg) by Mojtaba Seyedi (@seyedi) on CodePen.

 

تعامل کاربر و قسمت برش خورده و ناحیه بیرون آن

زمانی که یک عنصر از طریق این ویژگی برش داده می شود ناحیه هایی که در خارج از برش وجود دارند و قابل مشاهده نیستند نباید مواردی مثل کلیک، hover و غیره را بپذیرند و فقط ناحیه داخل مسیر برش باید به این موارد پاسخ دهد.

به عنوان مثال اگر قرار است با کلیک بر روی یک عنصر برش خورده این شکل بزرگ شود، کلیک فقط بر روی ناحیه داخل برش این عمل را انجام می دهد.

متحرک سازی مسیر برش

می توان بر روی مسیر برش ترنزیشن و انیمیشن نیز اعمال کرد اما نکته مهم اینکه همیشه باید مسیر برش در قسمت های مختلف انیمیشن و ترنزیشن دارای مقدار برابری نقطه باشند. به عنوان مثال هیچگاه امکان این وجود ندارد که از یک مسیر برش با چهار نقطه به یک مسیر برش با سه نقطه ترنزیشن یا انیمیشن اعمال کنیم چرا که نقطه ها باید برابر باشند.

ترنزیشن و انیمیشن وقتی روی مسیر برش اعمال می شود که تعداد نقاطه در مسیرهای برش برابر باشند.

به مثال زیر توجه کنید:

@keyframes magic {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  20% {
    clip-path: polygon(28% 0, 73% 0, 100% 100%, 0% 100%);
  }
  40% {
    clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 35%);
  }
  60% {
    clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
  }
  80% {
    clip-path: polygon(0 70%, 100% 0, 100% 32%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

حال بر روی تصویر زیر موس را قرار دهید تا انیمیشن اعمال شود:

 

See the Pen Animating clip-path by Mojtaba Seyedi (@seyedi) on CodePen.

 

ویژگی منسوخ شده clip

قبل از ویژگی clip-path در سی اس اس ویژگی وجود داشت به نام clip که شبیه به clip-path یک عنصر را برش می داد اما این ویژگی خیلی محدود بود طوری که فقط مسیر برش آن یک مستطیل بود. همینطور حتما باید عنصر مربوطه در حالت position از نوع absolute می بود تا میتوانستیم از clip استفاده کنیم. به این دلایل این ویژگی منسوخ شد و سپس ویژگی clip-path در CSS متولد شد.

ابزار Clippy

ابزارهای متعددی از جمله Clip path generator برای این موضوع طراحی شده اند اما Bennett Feely ابزاری به نام Clippy ساخته است که ساخت مسیربرش را برای ما خیلی راحت می کند و می توان به راحتی از این ابزار استفاده کنیم:

دموهای مختلف

می توان با استفاده از جاوااسکریپت کارهای جالبی از طریق این ویژگی انجام داد به عنوان نمونه در مثال زیر مکان نشانگر موس هر لحظه مسیر برش دایره ای شکل را تغییر می دهد و افکت زیر را بوجود می آورد:

 

See the Pen clip-path (periscope) by Mojtaba Seyedi (@seyedi) on CodePen.

 

ساخت یک گالری تصویر با استفاده از این ویژگی: (نمایش مثال بصورت تمام صفحه)

 

See the Pen Hexagon Grid by Mojtaba Seyedi (@seyedi) on CodePen.

 

در مثال های مختلف بالا از یک عنصر تصویر برای اعمال برش استفاده شده است اما همانطور که در اول مطلب گفته شد این ویژگی می تواند بر روی تمام عناصر اعمال شود به عنوان مثال در زیر برش بر روی یک عنصر div اعمال می شود و توجه داشته باشید که این برش شامل تمام فرزندان عنصر نیز خواهد شد و آنها نیز داخل و خارج ناحیه برش قرار خواهند گرفت:

 

See the Pen clip-path example by Mojtaba Seyedi (@seyedi) on CodePen.

 

تفاوت Clip و Mask

در سی اس اس ماژولی وجود دارد به نام Mask که کار آن ماسک کردن عناصر HTML می باشد. ماسک کردن و برش دادن دو مبحث جدا هستند و در موارد متفاوتی استفاده می شوند اما گاهی می توان از هر دو برای یک کار استفاده کرد و نتیجه یکسان داشت. اما باید توجه داشته باشیم که حتی در آنجا هم یک تفاوت بین این دو وجود دارد و آن این است که وقتی قسمتی از یک عنصر توسط ویژگی clip-path برش داده می شود دیگر آن قسمت قابل کلیک کردن یا hover کردن نیست اما در زمان ماسک کردن آن قسمتی که مخفی شده است همچنان به تعامل کاربر جواب می دهد.

تصویر متحرک زیر این موضوع را به نمایش می گذارد:

 

 

پشتیبانی مرورگر ها

مراقب پشتیانی مرورگرها در مورد این ویژگی باشید همچنین همانطور که در سایت Caniuse مشاهده می کنید برخی از مرورگرها نیاز به پیشوند دارند:

بیشتر بخوانید

• Cutting out the inner part of an element using clip-path