Үндсэн агуулга руу очих
LibraTool logoLibraTool

CSS хайрцгийн сүүдрийн үүсгэгч — үнэгүй

Шууд урьдчилан харалт, олон давхаргын дамжуулалт, өнгө сонгогч, дотор тохируулах болон нэг товшилтоор хуулах бүхий CSS хайрцгийн сүүдэр барихад зориулсан харааны барилгач. Material, ноеморфизм болон гялбааны урьдчилан тохируулгуудыг агуулна.

Ачаалагдсаны дараа офлайн ажилладаг
Урьдчилсан үзэмжийн дэвсгэр

Идэвхтэй давхаргын сүүдрийг байрлуулахын тулд хайрцгийг чирнэ үү - нарийн тохируулахын тулд Shift дарж барина уу

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Урьдчилсан тохиргоо

Түгээмэл хэрэглээ

  • Card UI сүүдүүдэлэхХөрөнхий сүүдүүдэлэх сүүдүүдэлэх хугаца, бүтээгдэхүүн сүүдүүдэлэх болон инструмент сүүдүүдэлэхийн зориулалтаар баашид.
  • Товчны шахалт үр дүнгүүдБодит дэлхийн гүнээ болон шахалтын төлөв дууслаж сүүдүүдэлэх товч сүүдүүдэлэхийг баашид.
  • Neumorphism Soft UIХос гэрэлтүүлэг + харанхуй сүүдүүдэлэхээр мэргэ UI neumorphism харагдацыг үүсгэх.
  • Модалын & Popover сүүдүүдэлэхСанал болгож, дээшээ харуулалт дээр болон унахын зориулалтаар утсаас өндрөөлөх үндэстэй дэвсгэр үүсгэх.
  • Гялалтай болон фокусын эффектүүдГялалтай эффект, фокусын цагирагууд, неон загварын гэрлүүлэлт үүсгэнэ.

Хэрхэн ажилладаг

box-shadow үүсгэгч бол бүхэлдээ клиент талын React хэрэгсэл — сервер, номын сан хамааралгүй. Энэ нь state-д сүүдрийн давхаргын объектуудын жагсаалт хадгалж, өөрчлөлт бүрт гараар бичсэн rgba() форматлагчийг ашиглан хүчинтэй CSS box-shadow мөрүүдийг угсарч, React-ийн style prop-оор шууд урьдчилан харах элемент дээр хэрэглэж, хөтчийн өөрийн бүдүүвч систем үр дүнг шууд зурдаг.

  1. 1
    Давхаргын параметрүүд форматлагчийг тэжээдэг
    Сүүдрийн давхарга бүр x/y шилжилт, бүдгэрэл, тархалт, hex өнгө, тунгалагийн утга хадгалдаг. Өөрчлөлт бүрт жижиг shadowToCss функц hex өнгийг regex-ээр RGB бүрэлдэхүүн рүү хөрвүүлж, дараа нь rgba() мөрийг угсардаг — жишээ нь, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Олон давхарга таслалаар холбогддог.
  2. 2
    Хөтөч амьд урьдчилан харахыг зурдаг
    Угсарсан мөр div элементийн boxShadow style шинж чанарт JSX-д шууд оноогддог. React DOM атрибутыг шинэчилж, хөтчийн CSS систем сүүдрийг шууд будна — canvas эсвэл WebGL хамааралгүй, зөвхөн уугуул CSS зурлага.
  3. 3
    Чирж-байрлуулах Pointer Events API ашигладаг
    Урьдчилан харах хайрцгийг дарж чирэх нь элемент дээр setPointerCapture-г дуудаж, дараа нь идэвхтэй давхаргын x, y шилжилтийг бодит цагт шинэчлэхийн тулд onPointerMove зөрүүг хянадаг. Shift дарах нь нарийн байрлуулахын тулд 0.25x масштабын коэффициент хэрэглэдэг.
  4. 4
    Гаралт clipboard руу хуулагддаг
    Хэрэгсэл ижил давхаргын өгөгдлөөс хоёр гаралтын формат гаргадаг: стандарт CSS box-shadow declaration, Tailwind-ийн синтаксын дүрмээр зайг доогуур зурас болгон орлуулсан Tailwind дурын-утгын класс (shadow-[...]). Нэг товшилтын хуулбарлалт navigator.clipboard.writeText ашигладаг.

Холбоотой хэрэгслүүд

◖

CSS булангийн радиусын үүсгэгч

Булан бүрийн бие даасан хяналттайгаар дугуй булануудыг харааны байдлаар зохион бүтээх. Органик блоб хэлбэрт зориулсан эллипсийн X/Y синтаксийг дэмждэг.

Туршиж үзэх
🟦

CSS торны үүсгэгч

CSS торыг нүдээр загварчил — мөр, баганын нэгж болон зай — мөн үүссэн CSS ба HTML-ийг хуул.

Туршиж үзэх
↔️

CSS flexbox үйлдвэрлэгч

Flex чиглэл, wrap, justify болон align-ийг амьд элементүүд дээр туршиж — мөн CSS-ийг хуул.

Туршиж үзэх

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