CSS / Gradient

Gradient

Gradient нь хоёр буюу түүнээс дэх өнгийн жигд шилжилт юм. CSS-д gradient нь зураг шиг ажилладаг — background-image property-д ашиглана.

linear-gradient() — шугаман шилжилт

Нэг чиглэлд шилжих:

css

.элемент {
  background: linear-gradient(чиглэл, өнгө1, өнгө2);
}

css

/* Дээрээс доош (анхдагч) */
.доош {
  background: linear-gradient(#a78bfa, #60a5fa);
}

/* Зүүнээс баруун */
.баруун {
  background: linear-gradient(to right, #a78bfa, #60a5fa);
}

/* Градусаар */
.ташуу {
  background: linear-gradient(135deg, #a78bfa, #f472b6);
}

Чиглэлийн утгууд

css

.дээш {
  background: linear-gradient(to top, #a78bfa, #60a5fa);
}
.баруун {
  background: linear-gradient(to right, #a78bfa, #60a5fa);
}
.доош {
  background: linear-gradient(to bottom, #a78bfa, #60a5fa);
}
.зүүн {
  background: linear-gradient(to left, #a78bfa, #60a5fa);
}

/* Булан чиглэл */
.баруун-дээш {
  background: linear-gradient(to top right, #a78bfa, #60a5fa);
}
.зүүн-доош {
  background: linear-gradient(to bottom left, #a78bfa, #60a5fa);
}

Олон өнгө

Хоёроос олон өнгө ашиглаж болно:

css

.олон-өнгө {
  background: linear-gradient(135deg, #a78bfa, #f472b6, #60a5fa);
}

/* Дөрвөн өнгө */
.солонго {
  background: linear-gradient(to right, #f87171, #fbbf24, #4ade80, #60a5fa);
}

Color stop — зогсоол тодорхойлох

Өнгө хаана эхлэж, хаана дуусахыг тодорхойлно:

css

.зогсоол {
  background: linear-gradient(
    to right,
    #a78bfa 0%,
    /* эхлэл */ #a78bfa 40%,
    /* энд хүртэл цэвэр ягаан */ #60a5fa 70%,
    /* энд шилжилт эхлэнэ */ #60a5fa 100% /* эцэс */
  );
}

radial-gradient() — тойрог шилжилт

Төвөөс гадагш тархдаг:

css

/* Тойргоор */
.тойрог {
  background: radial-gradient(circle, #a78bfa, #0b1120);
}

/* Эллипс (анхдагч) */
.эллипс {
  background: radial-gradient(ellipse, #a78bfa, #0b1120);
}

Гарал үүслийн цэг

css

/* Дээд хэсгээс */
.дээр {
  background: radial-gradient(circle at top, #a78bfa, #0b1120);
}

/* Зүүн доод буланд */
.булан {
  background: radial-gradient(circle at bottom left, #f472b6, #0b1120);
}

/* Тодорхой байрлалд */
.тодорхой {
  background: radial-gradient(circle at 30% 70%, #a78bfa, #0b1120);
}

Хэмжээ тодорхойлох

css

.ойр {
  background: radial-gradient(circle closest-side, #a78bfa, #0b1120);
}

.хол {
  background: radial-gradient(circle farthest-corner, #a78bfa, #0b1120);
}

conic-gradient() — конус шилжилт

Цэгийн эргэн тойрон өнгө тархдаг — tortoise shell буюу хожуурны хэлбэр:

css

/* Дугуй диаграм */
.дугуй {
  background: conic-gradient(#a78bfa 0% 30%, #60a5fa 30% 70%, #f472b6 70% 100%);
  border-radius: 50%;
}

/* Эхлэх цэгийн өнцөг */
.эргэсэн {
  background: conic-gradient(from 45deg, #a78bfa, #60a5fa, #a78bfa);
}

Repeating gradient

Давтагдсан хэлбэр үүсгэнэ:

css

/* Судал */
.судал {
  background: repeating-linear-gradient(
    45deg,
    #1e293b,
    #1e293b 10px,
    #0f172a 10px,
    #0f172a 20px
  );
}

/* Тойрог давтлага */
.давтагдсан-тойрог {
  background: repeating-radial-gradient(
    circle,
    #1e293b 0px,
    #1e293b 10px,
    #0f172a 10px,
    #0f172a 20px
  );
}

background shorthand-д gradient

css

/* background-image тавихгүйгээр шууд background-д */
.шууд {
  background: linear-gradient(135deg, #a78bfa, #60a5fa);
}

/* Зураг дээр gradient давхарлах */
.зураг-gradient {
  background:
    linear-gradient(rgba(11, 17, 32, 0.7), rgba(11, 17, 32, 0.7)),
    url("/зураг.jpg") center/cover;
}

Бодит жишээ

css

/* Гарчгийн текст gradient */
.gradient-текст {
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Хил хязгаарын gradient */
.gradient-хүрээ {
  border: 2px solid transparent;
  background:
    linear-gradient(#0f172a, #0f172a) padding-box,
    linear-gradient(135deg, #a78bfa, #60a5fa) border-box;
}

/* Товчны gradient */
.gradient-товч {
  background: linear-gradient(135deg, #a78bfa, #818cf8);
  padding: 12px 24px;
  border-radius: 8px;
  color: white;
  transition: opacity 0.2s;
}

.gradient-товч:hover {
  opacity: 0.85;
}

/* Hero хэсгийн дэвсгэр */
.hero {
  background:
    radial-gradient(
      ellipse at 60% 40%,
      rgba(167, 139, 250, 0.15),
      transparent 70%
    ),
    radial-gradient(
      ellipse at 30% 70%,
      rgba(244, 114, 182, 0.1),
      transparent 60%
    ),
    #0b1120;
}

Анхааруулга

Gradient нь зураг тул background-color биш background-image-д тавигдана
background: linear-gradient(...) нь товч бичлэг — дотроо background-image тавина
Хуучин хөтчүүдэд -webkit- prefix шаардагдах тохиолдол байдаг (орчин үеийн хөтчүүдэд хэрэггүй)

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

CSS filter — blur, brightness, grayscale зэрэг зургийн шүүлтүүрийг элементэд хэрхэн хэрэглэхийг судална.

← Өмнөх хичээлBox-shadow ба text-shadow Дараах хичээл →CSS filter