Хайрцагны сүүдэр үүсгэгч (Box Shadow Generator)

Гулсууруудыг чирж хайрцагны сүүдэр үүсгэн, гүн харагдуулахын тулд давхаргууд нэмж, бэлэн болсон CSS-ийг шууд хуулж аваарай.

Сүүдрийн давхаргууд
Давхарга 1
CSS
Гулсууруудыг тохируулан сүүдрээ үүсгэнэ үү.

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

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

Offset, blur, болон spread нь яг юуг удирддаг вэ?

Offset (шилжилт) нь сүүдрийг зүүн/баруун болон дээш/доош хөдөлгөж, blur (сарнилт) нь ирмэгийг зөөлрүүлж, spread (тархалт) нь сарнихаас өмнө сүүдрийг томруулж эсвэл жижигсгэдэг. Сөрөг тархалт нь сүүдрийг дотогш татдаг бөгөөд энэ нь нарийн, ойрхон сүүдэр үүсгэхэд тустай.

Inset сонголт ямар үүрэгтэй вэ?

Энгийн сүүдэр нь элементийн гадна талд унадаг (жишээ нь, өргөгдсөн картны арын гэрэл шиг). Харин Inset нь сүүдрийг дотогш нь эргүүлдэг тул элемент нь дотогш дарагдсан мэт харагддаг. Энэ нь дотогш хонхойсон оролтын талбар эсвэл дарагдсан товчлууруудад тохиромжтой.

Яагаад нэгээс олон сүүдрийн давхарга ашигладаг вэ?

Ганц сүүдэр тодорхой хэмжээнээс хэтрэхээрээ хавтгай харагддаг. Бодит өндөрлөг байдал нь ихэвчлэн тод, нарийн сүүдрийг зөөлөн, өргөн сүүдэртэй хослуулдаг. Энэ үр дүнд хүрэхийн тулд хоёр дахь давхаргыг нэмж, тус бүрийг нь бие даан тохируулаарай.

CSS Cubic Bezier ҮүсгэгчХурдны муруйг үүсгэхийн тулд хоёр бариулыг чирж, цэг хэрхэн хөдөлж байгааг тогтмол хөдөлгөөнтэй харьцуулан харж, cubic-bezier() утгыг хуулж аваарай.Градиент үүсгэгчШугаман, радиал эсвэл конус градиент үүсгэж, өнгөний цэгүүд нэмж, чиглэлийг тохируулан, 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 түвшинд тэнцэж байгааг харахын тулд текст болон арын өнгийг оруулна уу.