CSS / Box-shadow ба text-shadow

Box-shadow ба text-shadow

Shadow буюу сүүдэр нь элемент болон текстэд гүн, гэрэл, тодрол нэмдэг. CSS-д хоёр төрлийн shadow байдаг: box-shadow ба text-shadow.

box-shadow

Элементийн гадна (эсвэл дотор) сүүдэр нэмнэ:

css

.хайрцаг {
  box-shadow: X Y blur spread өнгө;
}

Утгуудын тайлбар:

| Утга | Тайлбар | | ------ | --------------------------------------------- | | X | Хэвтээ шилжилт — эерэг = баруун, сөрөг = зүүн | | Y | Босоо шилжилт — эерэг = доош, сөрөг = дээш | | blur | Бүдгэрэлтийн хэмжээ — их тоо = илүү бүдэг | | spread | Тэлэлт — эерэг = том, сөрөг = жижиг | | өнгө | Сүүдрийн өнгө |

css

/* Энгийн жишээ */
.энгийн {
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

/* Spread нэмсэн */
.тэлсэн {
  box-shadow: 0 0 0 4px #a78bfa; /* outline шиг хүрээ */
}

/* Бүдгэрсэн, томорсон */
.үүл {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

Offset-ийн утгуудын жишээ

css

/* Баруун доод сүүдэр */
.баруун-доод {
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.4);
}

/* Дээш (дотроос гэрэлтэх эффект) */
.дээш {
  box-shadow: 0 -4px 12px rgba(167, 139, 250, 0.3);
}

/* Бүх талд тэгш */
.тэгш {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

inset — дотор сүүдэр

inset гэж бичвэл сүүдэр элементийн дотор харагдана:

css

.дотор {
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Дотроос гэрэлтэх эффект */
.дотор-гэрэл {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

Олон shadow давхарлах

Таслалаар тусгаарлан хэд хэдэн shadow нэгэн зэрэг бичнэ:

css

.олон-сүүдэр {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 16px 32px rgba(0, 0, 0, 0.1);
}

Давхарласан shadow нь илүү натурал харагддаг — бодит ертөнцийн гэрэл ийм л байдаг.

Glow эффект

Blur их, spread жоохон, өнгөт — гэрэлтүүлэх эффект:

css

.ягаан-гэрэл {
  box-shadow: 0 0 20px rgba(167, 139, 250, 0.5);
}

.цэнхэр-гэрэл {
  box-shadow: 0 0 30px rgba(96, 165, 250, 0.4);
}

/* Хоёр давхарласан glow */
.хүчтэй-гэрэл {
  box-shadow:
    0 0 10px rgba(167, 139, 250, 0.6),
    0 0 40px rgba(167, 139, 250, 0.3);
}

Hover дээр shadow

css

.карт {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.карт:hover {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(167, 139, 250, 0.15);
  transform: translateY(-4px);
}

text-shadow

Текстэд сүүдэр нэмнэ. box-shadow-ийн адил боловч spread ба inset байхгүй:

css

.текст {
  text-shadow: X Y blur өнгө;
}

css

/* Энгийн сүүдэр */
.энгийн-текст {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Glow эффект */
.гэрэлт-текст {
  color: #a78bfa;
  text-shadow: 0 0 20px rgba(167, 139, 250, 0.8);
}

/* Тодрол нэмэх */
.тод-текст {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

text-shadow олон давхарлах

css

.гоё-гарчиг {
  color: #f1f5f9;
  text-shadow:
    0 0 10px rgba(167, 139, 250, 0.8),
    0 0 30px rgba(167, 139, 250, 0.5),
    0 0 60px rgba(167, 139, 250, 0.3);
}

Бодит жишээ: Дизайн системийн карт

css

/* Тайван байдал */
.карт {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 24px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.3);
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

/* Hover */
.карт:hover {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 16px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(167, 139, 250, 0.1);
  transform: translateY(-4px);
}

/* Товчны glow */
.товч-ягаан {
  background: #a78bfa;
  color: #0b1120;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(167, 139, 250, 0.4);
  transition: box-shadow 0.2s ease;
}

.товч-ягаан:hover {
  box-shadow: 0 0 30px rgba(167, 139, 250, 0.6);
}

Гүйцэтгэлийн тайлбар

box-shadow нь border-ийн оронд ашиглаж болно — гэхдээ гүйцэтгэлд ойролцоо
Маш олон, маш том shadow хурдыг бууруулж болно — хэрэгцээтэй хэмжээнд хэрэглэ
will-change: box-shadow → GPU ашиглуулах боломжтой (хэт их бүү бич)

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

gradient — өнгөний шилжилт хэрхэн хийх, linear-gradient(), radial-gradient(), conic-gradient() функцуудыг судална.

← Өмнөх хичээлTransform (rotate, scale, translate)Дараах хичээл →Gradient