برش تصاویر بصورت لوزی

صورت مسئله

برش تصاویر بصورت لوزی شکل در طراحی خیلی رایج است اما هنوز در CSS راه حل خیلی راحتی ندارند. قطعا به وسیله ویرایشگرهای تصاویر انجام این کار بسیار آسان خواهد بود, اما راه حل بهتر این است که در فاز پیاده سازی این کار انجام شود تا خود تصاویر دست نخورده باقی بمانند که هر زمان نیاز به تغییر طرح بود این اتفاق به راحتی قابل انجام باشد.

قطعا با توجه به پیشرفت های وب باید راه حلی برای این کار باشد. در این مطلب دو راه حل برای انجام این کار معرفی شده اند.

پیشنیازها

1. CSS Transform
2. ساخت متوازی الاضلاع

 

راه حل اول: استفاده از transform

فرض کنید تصویر زیر را در اختیار داریم:

 

 

در این روش تصویر را در یک عنصر نگهدارنده قرار می دهیم و این دو عنصر را در جهت مخالف هم می چرخانیم:

 

<div class="picture">
  <img src="image.jpg" alt="…" />
</div>

 

.picture {
  width: 400px;
  transform: rotate(45deg);
  overflow: hidden;
}
.picture > img {
  max-width: 100%;
  transform: rotate(-45deg);
}

 

 

همانطور که در تصویر بالا مشاهده می کنید, نتیجه حاصل از کد, لوزی مطلوب نیست. مشکل آنجایی است که به تصویر max-width: 100%; می دهیم که باعث می شود تا عرضش به اندازه عرض نگهدارنده اش شود, در حالی که ما نیاز داریم تا عرض تصویر برابر با قطر نگهدارنده باشد.

با توجه به توضیحاتی که در مطلب راه راه های مورب داده شد, برای محاسبه قطر نگهدارنده باید مقدار %100 را در رادیکال دو ضرب کنیم. که اگر نتیجه را به سمت بالا گرد کنیم (برای اطمینان که تصویر کوچک برش نخورد) نتیجه عدد %142 خواهد بود.

به دلایل زیر استفاده از ()scale برای تغییر اندازه ظاهری تصویر روش بهتری است:

1. می خواهیم تصویر به همان اندازه %100 باقی بماند اگر transform پشتیبانی نشود.

2. زمانی که از ()Scale استفاده می کنیم, بزرگ شدن تصویر از مرکز آن انجام می شود (البته اگر transform-origin همان مقدار پیشفرضش که مرکز است تنظیم شده باشد) در غیر این صورت اگر با استفاده از width اندازه تصویر را تغییر دهیم این تغییر از گوشه بالا سمت چپ انجام می شود و مجبور می شویم تا از margin منفی برای تنظیم محل درست تصویر استفاده کنیم.
 

کد نهایی بصورت زیر خواهد بود:

 

.picture {
  width: 400px;
  transform: rotate(45deg);
  overflow: hidden;
}

.picture > img {
  max-width: 100%;
  transform: rotate(-45deg) scale(1.42);
}

 

در دموی زیر نتیجه نهایی نمایش داده شده است:

 

See the Pen Diamond images — via transforms by Mojtaba Seyedi (@seyedi) on CodePen.

 

 

راه حل دوم: استفاده از برش مسیر (Clipping path)

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

روش بهتر استفاده از ویژگی clip-path می باشد. این ویژگی در CSS از SVG قرض گرفته شده است و بر خلاف سینتکسش در SVG به راحتی می توان در CSS با آن تعامل داشت. شاید با مفهوم و ابزارهای برش مسیر در نرم افزارهای گرافیکی مثل فوتوشاپ آشنا باشید. این روش اجازه می دهد تا عنصر مورد نظرمان را به هر شکلی که مایلیم برش دهیم. که در اینجا از ()polygon برای برش لوزی استفاده می کنیم.

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

 

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

 

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

در زیر با اضافه کردن transition به این ویژگی در زمان hover تصویر را به حالت قبل از برش بر می گردانیم:

img {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: 1s clip-path;
}

img:hover {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

 

دموی زیر برای بررسی بیشتر آماده شده است:
 

See the Pen Diamond images — via clip-path by Mojtaba Seyedi (@seyedi) on CodePen.

 

بهتر است یک بار دیگر تاکید کنیم که در روش دوم نگرانی در مورد مربع یا مستطیل بودن تصویر وجود ندارد. البته قبل از اینکه در مورد این ویژگی خیلی ذوق زده بشویم باید نگاهی به پشتیبانی مرورگرها هم داشته باشیم:

 

 

پشتیبانی مرورگرها جالب نبود نه؟ تا حال گیری بعدی شما رو به خدای بزرگ و مهربون می سپارم :)

منبع

• CSS Secrets By Lea Verou