ماسک‌گذاری تصاویر و اشکال با CSS Masking و Clip-path

Masking؛ برش هوشمند تصاویر بدون Photoshop

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

۱. clip-path پایه - شکل‌های ساده

ساده‌ترین راه شروع، استفاده از شکل‌های آماده clip-path است:

/* دایره */
.clip-circle {
  clip-path: circle(50%);
}

/* بیضی */
.clip-ellipse {
  clip-path: ellipse(50% 40%);
}

/* مستطیل با گوشه‌های گرد */
.clip-inset {
  clip-path: inset(10% 20% 10% 20% round 20px);
}

/* چندضلعی */
.clip-polygon {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  /* لوزی */
}

۲. شکل‌های چندضلعی خلاقانه

با polygon می‌توانید هر شکل دلخواهی بسازید. هر جفت مختصات یک نقطه از شکل است:

/* مثلث */
.triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

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

/* شش‌ضلعی */
.hexagon {
  clip-path: polygon(
    25% 0%, 75% 0%, 100% 50%,
    75% 100%, 25% 100%, 0% 50%
  );
}

/* پرچم */
.flag {
  clip-path: polygon(
    0% 0%, 100% 0%, 90% 50%,
    100% 100%, 0% 100%
  );
}

/* پیکان */
.arrow {
  clip-path: polygon(
    0% 20%, 60% 20%, 60% 0%,
    100% 50%, 60% 100%, 60% 80%,
    0% 80%
  );
}

۳. کاربرد عملی: کارت تصویر چندضلعی

یک کارت تصویر با شکل جذاب:

.hexagon-card {
  width: 300px;
  height: 340px;
  overflow: hidden;
  clip-path: polygon(
    25% 5%, 75% 5%, 100% 50%,
    75% 95%, 25% 95%, 0% 50%
  );
  transition: transform 0.4s ease;
}

.hexagon-card:hover {
  transform: scale(1.05);
}

.hexagon-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

۴. انیمیشن clip-path

یکی از قدرت‌های clip-path امکان انیمیت کردن آن است:

/* افکت reveal با انیمیشن */
.reveal-image {
  clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
  transition: clip-path 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-image.visible {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* افکت آب موج */
@keyframes wave-reveal {
  0% { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
  100% { clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%); }
}

.wave-image {
  animation: wave-reveal 1.5s ease forwards;
}

/* افکت pull-in */
.pull-in {
  clip-path: circle(0% at center);
  transition: clip-path 0.8s ease;
}

.pull-in.active {
  clip-path: circle(75% at center);
}

۵. ماسک با تصاویر (Mask Image)

با mask-image می‌توانید از یک تصویر PNG شفاف به عنوان ماسک استفاده کنید:

/* ماسک با گرادینت */
.fade-mask {
  mask-image: linear-gradient(to bottom, black 60%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent);
}

/* ماسک با شکل PNG */
.image-mask {
  mask-image: url("brush-shape.png");
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* ماسک گرد */
.circle-mask {
  mask-image: radial-gradient(circle, black 60%, transparent 60%);
  -webkit-mask-image: radial-gradient(circle, black 60%, transparent 60%);
}

/* ماسک راه‌راه */
.stripe-mask {
  mask-image: repeating-linear-gradient(
    45deg,
    black 0px,
    black 20px,
    transparent 20px,
    transparent 40px
  );
}

۶. متن به عنوان ماسک

یکی از جذاب‌ترین کاربردها، استفاده از متن به عنوان ماسک برای تصاویر:

.text-mask {
  background: url("cool-image.jpg");
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 120px;
  font-weight: 900;
  text-align: center;
}

/* با انیمیشن */
.animated-text-mask {
  background: url("animated-bg.gif");
  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: bg-shift 5s linear infinite;
}

@keyframes bg-shift {
  from { background-position: 0% 0%; }
  to { background-position: 200% 200%; }
}

۷. ماسک با SVG

برای شکل‌های پیچیده، استفاده از SVG بهترین گزینه است:

/* SVG inline به عنوان ماسک */
.svg-masked {
  -webkit-mask-image: url('data:image/svg+xml;utf8,');
  mask-image: url('data:image/svg+xml;utf8,');
  mask-size: contain;
}

/* استفاده از فایل SVG خارجی */
.external-svg-mask {
  mask-image: url("shape.svg");
  mask-size: cover;
}

۸. ترکیب چند ماسک

می‌توانید چندین ماسک را با هم ترکیب کنید:

.multi-mask {
  mask-image:
    linear-gradient(black, black),
    radial-gradient(circle, transparent 30%, black 30%);
  mask-composite: subtract;
  -webkit-mask-composite: source-out;
}

/* پنجره در پس‌زمینه */
.window-effect {
  background: linear-gradient(45deg, #660000, #ff4444);
  mask-image:
    radial-gradient(circle at 30% 30%, transparent 20%, black 20%),
    radial-gradient(circle at 70% 70%, transparent 15%, black 15%);
  mask-composite: intersect;
}

۹. Border Radius پیشرفته با clip-path

گاهی می‌خواهید گوشه‌های خاصی داشته باشید که border-radius نمی‌تواند بسازد:

/* گوشه مورب */
.bevel-corner {
  clip-path: polygon(
    20px 0%,   100% 0%,
    100% calc(100% - 20px),
    calc(100% - 20px) 100%,
    0% 100%,   0% 20px
  );
  background: #660000;
  padding: 30px;
  color: #fff;
}

/* گوشه با برش داخلی */
.notched-corner {
  clip-path: polygon(
    0% 0%,   100% 0%,   100% 100%,
    50% 100%,   45% 90%,   55% 90%,
    50% 100%,   0% 100%
  );
}

/* شکل تیکت */
.ticket-shape {
  clip-path: polygon(
    0 0, 100% 0, 100% 40%, 95% 50%,
    100% 60%, 100% 100%, 0 100%,
    0 60%, 5% 50%, 0 40%
  );
}

۱۰. افکت‌های خلاقانه و ترکیبی

چند افکت خلاقانه با ترکیب clip-path و انیمیشن:

/* منوی همبرگری با clip-path */
.menu-reveal {
  clip-path: circle(0% at top right);
  transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-reveal.open {
  clip-path: circle(150% at top right);
}

/* گالری با افکت split */
.split-image {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  transition: clip-path 0.5s ease;
}

.split-image.reveal {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* افکت transitional page */
@keyframes page-transition {
  0% {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

.page-enter {
  animation: page-transition 0.8s ease forwards;
}

۱۱. ابزارها و نکات پرفورمنس

برای طراحی سریع‌تر و بهتر:

• از سایت clippy.css برای ساخت بصری clip-path استفاده کنید
• برای انیمیشن، تعداد نقاط polygon شروع و پایان باید یکسان باشد
• always add overflow: hidden برای کنترل بهتر
• mask-image عملکرد بهتری روی GPU دارد
• برای تصاویر حتماً -webkit- prefix اضافه کنید

جمع‌بندی

ماسک‌گذاری در CSS یکی از قابلیت‌های خلاقانه است که می‌تواند طراحی شما را کاملاً متمایز کند. با ترکیب clip-path، mask-image و انیمیشن‌های CSS، می‌توانید افکت‌های حرفه‌ای بسازید که قبلاً فقط با ابزارهای گرافیکی ممکن بودند. توصیه می‌کنم از این تکنیک‌ها در بخش hero سایت، گالری‌ها و صفحات لندینگ استفاده کنید تا سایتی متمایز و به‌یادماندنی داشته باشید.