Градиент үүсгэгч

Шугаман, радиал эсвэл конус градиент үүсгэж, өнгөний цэгүүд нэмж, чиглэлийг тохируулан, CSS-ийг ганц товшилтоор хуулж аваарай.

Градиентын төрөл
Өнгөний цэгүүд
CSS
Градиентаа үүсгэхийн тулд цэгүүд болон чиглэлийг тохируулна уу.

Градиент бүрийг таны хөтөч дээр шууд дүрсэлдэг. Таны тохируулсан юуг ч BroBroGo руу хуулж илгээхгүй.

Түгээмэл асуултууд

Шугаман, радиал болон конус градиентуудын ялгаа юу вэ?

Шугаман (linear) градиент нь таны зааж өгсөн өнцгийн дагуу өнгөнүүдийг шулуун шугамаар уусгадаг. Радиал (radial) градиент нь тэдгээрийг төвөөс гадагш тойрог эсвэл эллипс хэлбэрээр тараадаг. Конус (conic) градиент нь өнгөнүүдийг өнгөний хүрд шиг төвийг тойруулан эргүүлж уусгадаг.

Өнгөний цэгүүд (color stops) гэж юу вэ?

Өнгөний цэг бүр нь градиентын дагуу тодорхой байрлалд бэхлэгдсэн өнгө юм — эхлэлд 0%, төгсгөлд 100%. Өнгөний оргил хэсгийг шилжүүлэхийн тулд цэгийг хөдөлгөх эсвэл илүү баялаг уусалт үүсгэхийн тулд олон цэг нэмнэ үү. Та найм хүртэлх цэг ашиглах боломжтой.

Чиглэлийг хэрхэн удирдах вэ?

Шугаман (linear) эсвэл конус (conic) градиентын хувьд өнцгийн гулсуур нь чиглэлийг тохируулдаг — 0° нь дээшээ, 90° нь баруун тийш заана. Радиал (radial) градиент нь өнцөггүй байдаг; үүний оронд тойрог эсвэл эллипс хэлбэрийг сонгож тархалтыг нь өөрчилнө үү.

CSS Cubic Bezier ҮүсгэгчХурдны муруйг үүсгэхийн тулд хоёр бариулыг чирж, цэг хэрхэн хөдөлж байгааг тогтмол хөдөлгөөнтэй харьцуулан харж, cubic-bezier() утгыг хуулж аваарай.Хайрцагны сүүдэр үүсгэгч (Box Shadow Generator)Гулсууруудыг чирж хайрцагны сүүдэр үүсгэн, гүн харагдуулахын тулд давхаргууд нэмж, бэлэн болсон CSS-ийг шууд хуулж аваарай.Хүрээний радиус үүсгэгчӨнцөг бүрийг гулсуураар дугуйлж, эллипс горимоор органик дусал хэлбэр үүсгэн, CSS-ийг шууд хуулж аваарай.Flexbox ҮүсгэгчFlex контейнер болон түүний элементүүдийг харагдах удирдлагаар тохируулж, бүтцийн өөрчлөлтийг шууд харан, CSS-ийг ганц товшилтоор хуулж аваарай.CSS Grid ҮүсгэгчБагана болон мөрнүүдээ тохируулж, нүднүүд дээгүүр чирж элементүүдээ байршуулан, сүлжээний CSS болон тохирох HTML-ийг ганц товшилтоор хуулж аваарай.CSS clamp() Тооны машинЖижиг болон том дэлгэцийн хэмжээг оруулж, тэдгээрийн хооронд жигд өөрчлөгдөх уян хатан clamp() утгыг аваарай — үсгийн хэмжээ, padding, margin эсвэл gap-д зориулагдсан.Өнгө хөрвүүлэгчHEX, RGB, HSL, HSV, CMYK болон LAB хооронд өнгө хөрвүүлнэ үү — аль ч талбарыг засахад бусад нь шууд шинэчлэгдэнэ.CSS Хэлбэржүүлэгч ба ШахагчЭмх замбараагүй CSS-ийг уншихад хялбар болгож догол мөр оруулах, эсвэл дүрмийн дарааллыг хэзээ ч өөрчилдөггүй аюулгүй горимоор шахаж хэмжээг нь багасгана уу.Тодосгогч шалгагч (Contrast Checker)WCAG тодосгогчийн харьцаа болон аль AA, AAA түвшинд тэнцэж байгааг харахын тулд текст болон арын өнгийг оруулна уу.