صورت مسئله
برش تصاویر بصورت لوزی شکل در طراحی خیلی رایج است اما هنوز در 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%;
می دهیم که باعث می شود تا عرضش به اندازه عرض نگهدارنده اش شود, در حالی که ما نیاز داریم تا عرض تصویر برابر با قطر نگهدارنده باشد.
با توجه به توضیحاتی که در مطلب راه راه های مورب داده شد, برای محاسبه قطر نگهدارنده باید مقدار %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.
بهتر است یک بار دیگر تاکید کنیم که در روش دوم نگرانی در مورد مربع یا مستطیل بودن تصویر وجود ندارد. البته قبل از اینکه در مورد این ویژگی خیلی ذوق زده بشویم باید نگاهی به پشتیبانی مرورگرها هم داشته باشیم:
پشتیبانی مرورگرها جالب نبود نه؟ تا حال گیری بعدی شما رو به خدای بزرگ و مهربون می سپارم :)
با سلام و عرض ادب
جسارتا اگه براتون مقدور بود یه مقالهی جامعی در این رابطه بنویسید.
مثل این : https://css-tricks.com/clip…
با تشکر
سلام
حتما وقت و شرایط دیگه درست شه انجام میدم.
ممنون واسه پیشنهاد خوبتون
سلام خسته نباشید اقای سیدی
یه اسلاید شو ساده با clip-path درس کردم
اگه مشکلی نداره معرفی کنید به دوستان که بدونن با این ویژگی میشه کار های فوق العاده ای کرد
https://codepen.io/MahdiBag…