صورت پیشامد جدید

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

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

پیش نیازها

راه حل اول: بهره بری و استفاده از 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%; می دهیم که باعث می می شود تا عرضش به مقدار و اندازه عرض نگهدارنده اش می شود, در حالی که ما مستلزم و نیاز داریم تا عرض تصویر برابر با قطر نگهدارنده باشد.

با توجه به توضیحاتی که در مطلب راه راه های مورب داده شد, جهت محاسبه قطر نگهدارنده بایستی و حتما مقدار %۱۰۰ را در رادیکال دو ضرب کنیم. که در صورتی که پس نتیجه آن می شود که را به سمت بالا گرد کنیم (جهت اطمینان که تصویر کوچک برش نخورد) پس نتیجه آن می شود که عدد %۱۴۲ خواهد بود.

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

۱٫ می خواهیم تصویر به آن هم مقدار و اندازه %۱۰۰ باقی بماند در صورتی که transform پشتیبانی نشود.

۲٫ زمانی که از ()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.

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

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

منبع