CSS Box Shadow үүсгэгч
Вэб дизайны элементүүдэд гүн болон бодит байдлыг нэмэхийн тулд box-shadow CSS шинж чанарыг өргөн ашигладаг. Энэхүү хэрэгсэл нь гулсууруудын тусламжтайгаар сүүдрийн төрөл бүрийн шинж чанарыг бодит хугацаанд тохируулан, бэлэн болсон CSS кодыг шууд хуулж авах боломжийг олгодог. Сүүдэр бүрийг таны хөтөч дээр дүрсэлдэг бөгөөд таны тохируулсан юуг ч BroBroGo руу хуулж илгээхгүй тул таны өгөгдөл хөтөч дотроо үлдэнэ.
Сүүдрийн шинж чанаруудын ажиллах зарчим
Хайрцагны сүүдрийг үүсгэхдээ хэд хэдэн үндсэн хэмжигдэхүүнийг тохируулдаг бөгөөд тэдгээр нь харагдах байдалд дараах байдлаар нөлөөлдөг:
- Хэвтээ шилжилт: Сүүдрийг зүүн эсвэл баруун тийш хөдөлгөх хэмжээ бөгөөд -50px-ээс 50px хүртэлх мужид тохируулна. Сөрөг утга нь сүүдрийг зүүн тийш, эерэг утга нь баруун тийш шилжүүлнэ.
- Босоо шилжилт: Сүүдрийг дээш эсвэл доош хөдөлгөх хэмжээ бөгөөд -50px-ээс 50px хүртэлх мужид тохируулна. Сөрөг утга нь сүүдрийг дээш, эерэг утга нь доош шилжүүлнэ.
- Сүүдэрлэлт (Blur): Сүүдрийн ирмэгийг зөөлрүүлэх хэмжээ бөгөөд 0px-ээс 100px хүртэлх мужид тохируулна. 0px утгатай үед сүүдрийн ирмэг маш тод, хатуу байх бөгөөд утга ихсэх тусам илүү сарниж зөөлөрнө.
- Тархалт (Spread): Сүүдэр сарнихаас өмнө түүнийг томруулах эсвэл жижигсгэх хэмжээ бөгөөд -50px-ээс 50px хүртэлх мужид тохируулна. Эерэг утга нь сүүдрийг гадагш тэлэх бөгөөд сөрөг тархалт нь сүүдрийг дотогш татдаг.
- Сүүдрийн өнгө ба Тунгалаг байдал: Сүүдрийн өнгийг сонгох болон түүний харагдах байдлыг удирдах тунгалаг байдлын гулсуур.
- Дотоод сүүдэр (Inset): Сүүдрийг элементийн гадна талд биш, дотор талд унахаар эргүүлэх сонголт.
Олон давхаргат сүүдэр ашиглах техник
Вэб дизайнд ганцхан сүүдэр ашиглах нь зарим тохиолдолд хавтгай, хиймэл харагдуулдаг. Бодит амьдрал дээрх гэрлийн тусгал нь олон түвшний сарнилттай байдаг тул гүн болон бодит байдлыг бий болгохын тулд олон сүүдрийн давхаргыг давхарлаж ашиглах шаардлагатай болдог.
Энэхүү хэрэгсэл нь танд таван давхаргыг урьдчилан бэлдэж өгдөг бөгөөд эхний давхарга нь 0 8 24 -4 гэсэн анхны утгатай, 18%-ийн тунгалаг хар өнгөтэй байна. Бусад дөрвөн давхарга нь эхний ээлжинд далдлагдсан байдаг. Та "Давхарга нэмэх" товчийг дарж шинэ давхарга үүсгэх боломжтой бөгөөд шинэ давхарга нь анхны утгатайгаар үүснэ. Шаардлагагүй болсон давхаргыг "Давхаргыг устгах" товчийг дарж устгаж болно. Олон давхарга ашигласан үед үүсэх CSS код нь давхарга бүрийн утгыг таслалаар тусгаарлан нэг дор харуулдаг.
Түгээмэл харагдах байдлыг бий болгох нь
Сүүдрийн шинж чанаруудыг өөрчилснөөр дараах визуал эффектүүдийг үүсгэж болно:
- Нарийн, ойрхон сүүдэр: Сүүдэрлэлт (Blur) болон шилжилтийн утгыг багаар тохируулж, сөрөг тархалтын утга ашиглан сүүдрийг дотогш татсанаар элементийг гадаргууд маш ойрхон, нарийн харагдуулна.
- Зөөлөн, өргөн сүүдэр: Сүүдэрлэлтийн утгыг өндөр (жишээ нь 50px-ээс дээш) болгож, тунгалаг байдлыг багасгаснаар элемент илүү өндөрт өргөгдсөн мэт зөөлөн харагдана.
- Дотогш дарагдсан эффект: "Дотоод сүүдэр (Inset)" сонголтыг идэвхжүүлснээр сүүдэр дотогш эргэж, элемент нь цааш хонхойсон эсвэл дарагдсан мэт харагдана.
Түгээмэл асуулт хариулт
Offset, blur, болон spread нь яг юуг удирддаг вэ?
Offset (шилжилт) нь сүүдрийг зүүн/баруун болон дээш/доош хөдөлгөж, blur (сарнилт) нь ирмэгийг зөөлрүүлж, spread (тархалт) нь сарнихаас өмнө сүүдрийг томруулж эсвэл жижигсгэдэг. Сөрөг тархалт нь сүүдрийг дотогш татдаг бөгөөд энэ нь нарийн, ойрхон сүүдэр үүсгэхэд тустай.
Inset сонголт ямар үүрэгтэй вэ?
Энгийн сүүдэр нь элементийн гадна талд унадаг (жишээ нь, өргөгдсөн картны арын гэрэл шиг). Харин Inset нь сүүдрийг дотогш нь эргүүлдэг тул элемент нь дотогш дарагдсан мэт харагддаг. Энэ нь дотогш хонхойсон оролтын талбар эсвэл дарагдсан товчлууруудад тохиромжтой.
Яагаад нэгээс олон сүүдрийн давхарга ашигладаг вэ?
Ганц сүүдэр тодорхой хэмжээнээс хэтрэхээрээ хавтгай харагддаг. Бодит өндөрлөг байдал нь ихэвчлэн тод, нарийн сүүдрийг зөөлөн, өргөн сүүдэртэй хослуулдаг. Энэ үр дүнд хүрэхийн тулд хоёр дахь давхаргыг нэмж, тус бүрийг нь бие даан тохируулаарай.