CSS / Clip-path ба mask

Clip-path ба mask

Элементийг хайрцаг хэлбэрт биш, дурын хэлбэрт тайрах боломж олгодог хоёр хүчирхэг арга: clip-path ба mask-image.

clip-path — хэлбэрт тайрах

clip-path нь элементийн харагдах хэсгийг тодорхойлно. Хэлбэрийн гадна хэсэг нуугдана.

inset() — тэгш өнцөгт тайрах

Дөрвөн талаас тайрна:

css

/* inset(дээш баруун доош зүүн) */
.тайрсан {
  clip-path: inset(10px 20px 10px 20px);
}

/* Товч бичлэг */
.тэгш {
  clip-path: inset(20px);
}

/* Булан дугуйлсан */
.дугуй-булан {
  clip-path: inset(0 round 16px);
}

circle() — тойрог

css

/* clip-path: circle(радиус at X Y) */
.тойрог {
  clip-path: circle(50%); /* голд, ширхэгт бол бүрэн тойрог */
}

.жижиг-тойрог {
  clip-path: circle(40% at 50% 50%); /* голд 40% радиустай */
}

.булангийн-тойрог {
  clip-path: circle(60% at 0% 100%); /* зүүн доод буланд */
}

ellipse() — эллипс

css

.эллипс {
  clip-path: ellipse(60% 40% at 50% 50%);
  /* X радиус, Y радиус, байрлал */
}

polygon() — олон өнцөгт

Цэгүүдийг жагсааж дурын хэлбэр үүсгэнэ:

css

/* Гурвалжин */
.гурвалжин {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Ромб */
.ромб {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Зургаан өнцөгт */
.зургаан {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* Одны хэлбэр */
.од {
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

/* Налуу тайрах */
.налуу {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

path() — SVG зам

Нарийн дурын хэлбэрт:

css

.дурын-хэлбэр {
  clip-path: path("M 10 10 L 90 10 L 50 90 Z");
}

clip-path animate хийх

css

.хувирах {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.5s ease;
}

.хувирах:hover {
  clip-path: circle(100% at 50% 50%);
}

Hover дэлгэрэх эффект:

css

.зураг {
  clip-path: inset(0 50% 0 50%); /* голоос хоёр тал агшсан */
  transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.зураг:hover {
  clip-path: inset(0 0% 0 0%); /* бүрэн дэлгэрнэ */
}

mask-image — зургаар нуух

mask-image нь зураг буюу gradient-аар элементийн харагдах хэсгийг тодорхойлно. Цагаан хэсэг харагдана, хар хэсэг нуугдана.

css

.маск {
  mask-image: url("/маск.svg");
  mask-size: cover;
  mask-repeat: no-repeat;
}

Gradient маск

Gradient-аар нуух — жишээ нь доод хэсэг аажим нуугдах:

css

/* Доод хэсэг нуугдах */
.аажим-нуугдах {
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* Хоёр талаас нуугдах */
.хоёр-тал {
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  );
}

/* Тойрог маск — голд харагдаж, захаас нуугдах */
.тойрог-маск {
  mask-image: radial-gradient(circle, black 50%, transparent 75%);
}

Текстийн маск — gradient текст

css

.gradient-текст {
  background: linear-gradient(135deg, #a78bfa, #f472b6, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

mask-size ба mask-position

background-size, background-position-тай ижил синтакс:

css

.маск {
  mask-image: url("/дугуй-маск.svg");
  mask-size: 80% 80%;
  mask-position: center;
  mask-repeat: no-repeat;
}

SVG clip — нарийн хяналт

SVG <clipPath> элементийг HTML-тай хослуулж ашиглаж болно:

html

<svg width="0" height="0">
  <defs>
    <clipPath id="миний-маск">
      <circle cx="100" cy="100" r="80" />
    </clipPath>
  </defs>
</svg>

<div style="clip-path: url(#миний-маск)">
  <!-- энэ div тойрог хэлбэрт тайрагдана -->
</div>

css

.svg-clip {
  clip-path: url(#миний-маск);
}

clip-path vs overflow: hidden

css

/* overflow: hidden — зөвхөн тэгш өнцөгт (border-radius-тай) */
.хайрцаг {
  overflow: hidden;
  border-radius: 50%; /* тойрог */
}

/* clip-path — дурын хэлбэр */
.дурын {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* гурвалжин */
}

overflow: hidden нь хүүхэд элементүүдийн тоглоомыг нуудаг. clip-path нь зөвхөн тухайн элементийн харагдах хэсгийг тайрдаг — хүүхдүүдэд нөлөөлдөг ч арга өөр.

Бодит жишээ

css

/* Hero хэсгийн налуу хил */
.hero {
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  background: linear-gradient(135deg, #0b1120, #0f172a);
  padding: 120px 24px 160px;
}

/* Дугуй зургийн аватар */
.аватар {
  width: 80px;
  height: 80px;
  clip-path: circle(50%);
}

/* Хуудасны шилжилтийн эффект */
.хуудас {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.6s ease;
}

.гарах {
  clip-path: inset(0 0 100% 0); /* дээш нуугдана */
}

/* Текстийн доод хэсгийн аажим нуугдах */
.урт-текст {
  max-height: 200px;
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  overflow: hidden;
}

Дараагийн хичээлд:

CSS функцүүд — calc(), min(), max(), clamp() — динамик, уян хатан утгуудыг хэрхэн тооцоолохыг судална.

← Өмнөх хичээлZ-index ба stacking context Дараах хичээл →CSS функцүүд (calc, clamp, min)