برش و ماسک تصاویر با CSS clip-path — مقدمه‌ای عملی

CSS clip-path و ویژگی‌های ماسک (mask) ابزارهایی قوی برای برش، شکل‌دهی و ماسک‌گذاری روی تصاویر و عناصر هستند. این روش‌ها به طراحان امکان می‌دهند بدون ویرایش تصویری در فوتوشاپ، خروجی‌های بصری پیچیده مانند دایره‌ها، مثلث‌ها، اشکال چندضلعی و ماسک‌های SVG را ایجاد کنند.

چرا از clip-path و mask استفاده کنیم؟

• کاهش حجم و سادگی توسعه: نیازی به فایل‌های تصویر متعدد یا ویرایش دستی نیست.
• تعامل‌پذیری و انیمیشن: قابل ترکیب با transition و transform برای جلوه‌های پویا.
• دقت و انعطاف‌پذیری: می‌توان اشکال دلخواه با polygon یا مسیرهای SVG ایجاد کرد.

اصول پایه clip-path

clip-path عنصری را که داخل آن قرار گرفته، با یک شکل مشخص برش می‌دهد. مقادیر رایج شامل circle()، ellipse()، inset()، polygon() و path() (که از مسیرهای SVG پشتیبانی می‌کند) هستند.

/* نمونه ساده: تصویر دایره‌ای */.img-circle {
  width: 200px;
  height: 200px;
  object-fit: cover;
  clip-path: circle(50% at 50% 50%);
}

این کد تصویر را به شکل دایره‌ای با شعاع 50% و مرکز در میانه برش می‌دهد. object-fit: cover کمک می‌کند تصویر داخل کادر به‌درستی پوشش داده شود.

مثال عملی با polygon برای اشکال پیچیده

/* برش تصویر به شکل شش‌ضلعی */.hex {
  width: 300px;
  height: 300px;
  object-fit: cover;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

در این مثال با polygon() گوشه‌ها با مقادیر درصدی تعیین شده‌اند که باعث می‌شود شکل متناسب با اندازه عنصری مقیاس‌پذیر باقی بماند.

استفاده از SVG برای clipPath و mask

برای ماسک‌ها یا برش‌های پیچیده می‌توان از عناصر SVG استفاده کرد و آنها را با clip-path: url(#myClip) فراخوانی کرد. این رویکرد انعطاف و دقت بیشتری روی مسیرها و فیلترها می‌دهد.

.star-image {
  width: 300px;
  height: 300px;
  object-fit: cover;
  clip-path: url(#starClip);
}

در این نمونه مسیر ستاره‌ای در SVG تعریف شده و سپس با شناسه آن در CSS فراخوانی شده است. clipPathUnits="objectBoundingBox" تضمین می‌کند که مسیر بر اساس اندازه عنصر مقیاس‌پذیر باشد.

ماسک تصاویر با mask-image

ویژگی mask-image یا کوتاه‌شده mask امکان استفاده از تصویر یا گرادیان به‌عنوان ماسک را می‌دهد. برای مثال، یک گرادیان خطی می‌تواند تصویر را تدریجاً محو کند.

/* ماسک با گرادیان برای فید کردن تصویر */.fade {
  width: 400px;
  height: 250px;
  background-image: url('photo.jpg');
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  mask-size: 100% 100%;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); /* برای Safari */}

در این کد، ماسک باعث می‌شود تصویر از بالا کامل دیده شود و به تدریج به سمت پایین محو گردد. توجه کنید نسخه -webkit- برای سازگاری با Safari ضروری است.

نکات سازگاری و fallback

پشتیبانی clip-path در مرورگرهای مدرن خوب است اما برخی نسخه‌های قدیمی‌تر WebKit نیاز به پیشوند -webkit-clip-path دارند. همچنین برای مرورگرهایی که از clip-path پشتیبانی نمی‌کنند، می‌توان fallback ساده‌ای مثل border-radius یا تصویر جایگزین ارائه داد.

عملکرد و بهینه‌سازی

• clip-path معمولاً توسط GPU پردازش می‌شود؛ با این حال اعمال تغییرات پیچیده یا frequent reflows می‌تواند هزینه‌بر باشد.
• برای انیمیشن‌ها از transform و opacity استفاده کنید و از تغییر‌های مربوط به layout اجتناب کنید.
• در صورت نیاز به برش‌سازی‌های ثابت، تولید تصویر از پیش برش‌خورده ممکن است کاراتر باشد.

نمونه بهینه‌تر و قابل دسترس

/* ارائه fallback و پیشوند */.picture {
  width: 320px;
  height: 320px;
  object-fit: cover;
  border-radius: 8px; /* fallback ساده */  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
}

در این مثال برای مرورگرهای قدیمی‌تر از border-radius به‌عنوان fallback استفاده شده و همچنین پیشوند -webkit-clip-path اضافه شده تا سازگاری Safari بهتر شود.

موارد کاربرد واقعی

• پروفایل‌های دایره‌ای یا کارت‌های کاربری با برش‌های نامتقارن.
• قاب‌ها و افکت‌های ماسک‌دار در هدرها و بنرها.
• گالری‌های پاسخگو با اشکال جذاب برای هر آیتم.
• انیمیشن‌های ورود محتوا با تغییر clip-path برای افکت reveal.

چند نکته پایانی

clip-path و mask ابزارهای قدرتمندی برای طراحی‌های مدرن وب هستند، اما همیشه باید به سازگاری و عملکرد توجه کنید. برای پروژه‌های حساس به عملکرد، ابتدا تست روی دستگاه‌های واقعی انجام دهید و برای کاربران قدیمی fallback مناسب در نظر بگیرید.

اگر نیاز به مثال اختصاصی یا تبدیل یک عکس خاص به ماسک دارید، می‌توانم نمونه CSS و SVG سازگار با پروژه شما آماده کنم.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال