CSS Color

CSS Color

  • Яаж өнгийг өгдөг вэ?
  • Өнгөний ойлголтууд болон контраст
  • Арын өнгө

Өнгө таны веб хуудсанд амь оруулж өгдөг.

Өмнө талын өнгө - Color

  • RGB(Red Green Blue) утгууд: Энэ өнгөнд хэр их ногоон, улаан, цэнхэр туяа байгааг хэлдэг. Жишээ нь: RGB(100, 100, 90). Утга нь 0-255 хүртэлх утгаар тодорхойлогддог.
  • HEX Code 6 оронтой улаан, ногоон цэнхэр өнгийн утгыг тодорхойлсон тоонууд юм. Жишээ нь: : #ee3e80. Утгууд нь 0-9, A-F хүртэлх утгуудаар тодорхойлогддог. Бас өмнө нь # тэмдэгт байдаг.
  • COLOR NAMES 147 ширхэг тодорхойлогдсон нэрнүүд байдаг. Жишээ: DarkCyan.

Арын өнгө- background-color

  • CSS нь HTML-ийн элемент бүрийг BOX дотор байгаа мэтээр дизайн үүсгэдэг. Тэгэхээр арын өнгө нь тухайн элементийн хувьд тухайн BOX-ны ар талын өнгийг илэрхийлдэг.
  • CSS-ийн ар талын өнгийг бид нар өмнө талын өнгөтэй адилаар тодорхойлдог. Жишээ нь:
    • background-color: #ee3e80;
    • background-color: rbg(100, 200, 300) ;
    • background-color: blue;
  • Хэрвээ background-color-ийг өгөөгүй бол тухайн элементийн ар талын өнгө нь тунгалаг харагдана.

Өнгийг ойлгох

  • Компьютерийн монитор нь олон сая жижигхэн дөрвөлжин pixel гэж нэрлэгдэх зүйлээс бүрддэг.
  • Хэрвээ screen нь унтарсан бол хар өнгөтэй бөгөөд асаавал гэрэл цацруулвал pixel бүр нь янз бүрийн өнгөөр гэрэл ойлгож нүдэн дээр тухайн дэлгэцэн дээрх зургийг харуулдаг байна.
  • Дэлгэцний pixel бүр нь улаан, ногоон, цэнхэр өнгийн хольцтой өнгийг ялгаруулдаг.
color03

Өнгийг ойлгох

  • Color picker буюу өнгө сонгодог багаж ашиглан бид нар RGB утгуудыг гаргаж авч болдог.
  • https://www.w3schools.com/colors/colors_picker.asp
  • HUE
  • SATURATION өнгөнд хэр их саарал өнгө байгаа эсэхийг хэлж өгдөг.
  • BRIGHTNESS өнгөнд хэр их хар өнгө байгааг хэлж өгдөг. Max BRIGHTNESS дээр хар өнгө байхгүй гэсэн үг.
color03

CSS3 Opacity

  • opacity нь хэр тунгалаг харагдах вэ гэдгийг хэлж өгдөг.
  • 0.0 - 1.0 хооронд утгуудыг авдаг. Жишээ нь: 0.5 нь 50%-ийн нэвт харагдах
  • rgba нь RGB утга дээрээс нь тухайн элементийн бас нэмээд хэр тунгалаг вэ гэдгийг хэлж өгнө. Энэхүү дүрэм нь зөвхөн тухайн элементэд хамаарна. Түүний хүүхдүүдэд хамаарахгүй болно.
  • Зарим нэг хуучин браузерууд нь opacity танихгүй яагаад гэвэл CSS3 мэдэхгүй гэсэн үг юм.
opacity

CSS3 HSL & HSLA

  • HSL CSS3 дээр өөр хэлбэрээр өнгийг дүрслэх аргыг танилцуулсан.
  • HUE 0-оос 360 градусын өнцгөөр илэрхийлэгддэг.
  • SATURATION энэ нь хувиар илэрхийлэгддэг.
  • LIGHTNESS хувиар илэрхийлэгддэг бөгөөд 0% нь цагаан, 50% нь хэвийн, 100%-нь хар өнгийг илэрхийлэх юм.
  • HSLA нь HUE, SATURATION, LIGHTNESS нэмээд хэр нэвт харагдах буюу transparency гэдэг утгыг илэрхийлдэг.
  • ALPHA нь 0-оос 1.0-ийн хооронд байх бөгөөд хэр тунгалаг вэ гэдгийг илэрхийлдэг.
opacity

CSS3 HSL & HSLA

opacity

Summary - Дүгнэлт

  • CSS-ийн өнгө зөвхөн тухайн веб хуудасны өнгийг харагдуулахаас гадна бас өнгөлөг веб хуудсыг харснаараа хүмүүсийн сэтгэл санааг дээшлүүлдэг байна.
  • CSS-ийн өнгийн утгыг 3 аргаар илэрхийлэх боломжтой RGB, HEX, өнгөний нэр. гэсэн хэсгээс бүтдэг.
  • CSS-ийн color picker нь өнгөний утгуудыг гаргахад тусалдаг.
  • Тескт болон арын өнгөний хооронд хангалттай ялгарал байх нь таны веб хуудасны агуулгыг уншихад их тусална.
  • CSS3-нь RGBA гэдэг ойлголтыг оруулж ирэн тухайн өнгөн дээр хэр тунгалаг буюу opacity-тэй вэ гэдгийг нэмдэг болгосон.
  • CSS3-нь HSLA гэдэг ойлголтыг оруулж ирэн тухайн өнгөн дээр хэр тунгалаг буюу нэмэлт opacity-тэй вэ гэдгийг нэмдэг болгосон.