ຂ້ອຍຈະສ້າງ CSS box-shadow ແລະ ຄັດລອກໂຄດໄດ້ແນວໃດ?

ປັບແຖບເລື່ອນສຳລັບ x ແລະ y offset, blur, spread, ສີ ແລະ ຄວາມໂປ່ງໃສ (Opacity), ພ້ອມທັງເບິ່ງການສະແດງຜົນຕົວຈິງ. ຈາກນັ້ນກົດ ສຳເນົາ ໃນສ່ວນຜົນລັບ CSS. ທ່ານຍັງສາມາດເລີ່ມຕົ້ນຈາກ ຄ່າຕັ້ງຕົ້ນ ເຊັ່ນ ນຸ່ມ, ສ່ອງ ຫຼື Material 8 ໄດ້ເຊັ່ນກັນ.

ຂ້ອຍສາມາດຊ້ອນເງົາຫຼາຍໆຊັ້ນໃສ່ອົງປະກອບດຽວໄດ້ບໍ?

ໄດ້. ກົດ + ເພີ່ມຊັ້ນ shadow ອີກ ເພື່ອເພີ່ມຊັ້ນເງົາ, ຈາກນັ້ນຈັດລຳດັບຄືນໃໝ່, ເຊື່ອງ ຫຼື ເອົາອອກ ແຕ່ລະຊັ້ນໄດ້. ແຕ່ລະຊັ້ນຈະຖືກເຊື່ອມຕໍ່ດ້ວຍເຄື່ອງໝາຍຈຸດໃນຄ່າ box-shadow ດຽວ.

ຂ້ອຍຈະສ້າງເງົາແບບຝັງເຂົ້າ (inset shadow) ໄດ້ແນວໃດ?

ເລືອກຊັ້ນເງົາແລ້ວເປີດໃຊ້ ເງົາຝັງເຂົ້າ, ຫຼືເລືອກໂຫຼດຈາກຄ່າຕັ້ງຕົ້ນ ຝັງເຂົ້າ. ຜົນລັບຈະໃສ່ຄຳສັບ inset ສຳລັບຊັ້ນດັ່ງກ່າວໂດຍອັດຕະໂນມັດ.

ຂ້ອຍສາມາດເອົາຄລາດ Tailwind ແທນ CSS ທຳມະດາໄດ້ບໍ?

ໄດ້. ນອກຈາກຄ່າ CSS ປົກກະຕິແລ້ວ, ເຄື່ອງມືນີ້ຍັງສ້າງຄລາດ arbitrary-value ຂອງ Tailwind ໃນຮູບແບບ shadow-[...], ໂດຍປ່ຽນຍະຫວ່າງເປັນເຄື່ອງໝາຍຂີດກ້ອງ, ພ້ອມໃຫ້ນຳໄປວາງໃສ່ໂຄດຂອງທ່ານໄດ້ທັນທີ.

ມີວິທີກຳນົດຕຳແໜ່ງເງົາທີ່ງ່າຍກວ່າການໃຊ້ແຖບເລື່ອນບໍ?

ມີ. ລາກກ່ອງສະແດງຜົນຕົວຢ່າງເພື່ອຍ້າຍເງົາຂອງຊັ້ນທີ່ກຳລັງເລືອກຢູ່, ແລະ ກົດ Shift ຄ້າງໄວ້ເພື່ອປັບຕຳແໜ່ງຢ່າງລະອຽດ. ທ່ານຍັງສາມາດປ່ຽນ ພື້ນຫລັງ Preview ແລະ ສີກ່ອງ ເພື່ອເບິ່ງວ່າເງົາເຂົ້າກັບງານອອກແບບຂອງທ່ານຫຼືບໍ່.

ຟຣີແທ້ບໍ?

ແມ່ນແລ້ວ. ທຸກເຄື່ອງມືແມ່ນໃຊ້ຟຣີ, ບໍ່ຕ້ອງມີບັນຊີ ແລະ ບໍ່ຕ້ອງໃຊ້ບັດເຄຣດິດ. ການເຮັດວຽກທັງໝົດແມ່ນດຳເນີນຢູ່ໃນອຸປະກອນຂອງທ່ານແທນທີ່ຈະຢູ່ໃນເຊີບເວີຂອງພວກເຮົາ, ເຊິ່ງເຮັດໃຫ້ເຮົາສາມາດໃຫ້ບໍລິການໄດ້ຟຣີ.

ມັນເຮັດວຽກຢູ່ໃນມືຖືບໍ?

ໄດ້. ມັນເຮັດວຽກໃນບຣາວເຊີມືຖືລຸ້ນໃໝ່ເທິງ iOS ແລະ Android ໂດຍບໍ່ຕ້ອງຕິດຕັ້ງຫຍັງ.

🎨

ຕົວສ້າງ CSS Box Shadow ຟຣີ

ສ້າງ CSS box-shadow ດ້ວຍ visual builder ພ້ອມຕົວຢ່າງ live, ຊັ້ນຫຼາຍ, color picker, inset toggle ແລະ ຄັດລອກດ່ວນ. ລວມ preset Material, neumorphism ແລະ glow.

ເຮັດວຽກໃນບຣາວເຊີບໍ່ຕ້ອງລົງທະບຽນ, ບໍ່ມີໜ້າຕ່າງປັອບອັບບໍ່ຈໍາເປັນຕ້ອງເຂົ້າສູ່ລະບົບຟຣີຕະຫຼອດໄປ

ເຮັດວຽກແບບອອບໄລນ໌ໄດ້ຫຼັງໂຫຼດແລ້ວ

ພື້ນຫລັງ Preview

ລາກກ່ອງເພື່ອວາງຕຳແໜ່ງເງາຂອງຊັ້ນທີ່ຕັ້ງ - ຖື Shift ສໍາລັບການຄວບຄຸມທີ່ດີ

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

ຄ່າຕັ້ງຕົ້ນ

ສີກ່ອງ

ຮັດມູມ (16px)

x (0px)

y (4px)

ເບລີ (12px)

ກະຈາຍ (0px)

ສີ

ຄວາມໂປ່ງໃສ (15%)

ເງົາຝັງເຂົ້າ

ການນຳໃຊ້ທົ່ວໄປ

Card UI Shadowsສ້າງ card shadows ທີ່ສະສົມກັບ dashboards product grids ແລະ dashboards.
Button Press Effectsສ້າງ button shadows ທີ່ຈໍາລອງ depth ພາສາຈິງ ແລະ press states.
Neumorphism Soft UIສ້າງ soft-UI neumorphism ຫາບລຸກກັບ paired light + dark shadows.
Modal & Popover Shadowsສ້າງ elevated floating feel ສໍາລັບ dialogs ແລະ dropdowns.
ຜົນກະທົບວົງແຫວນແລະໂຟກັສສ້າງຜົນກະທົບວົງແຫວນ, ວົງແຫວນໂຟກັສ, ແລະຮາລາຍເສັ້ນສະຕາຍ.

ມັນເຮັດວຽກແນວໃດ

ຕົວສ້າງ box-shadow ແມ່ນເຄື່ອງມື React ຝັ່ງລູກຄ້າເຕັມຮູບແບບ — ບໍ່ມີເຊີບເວີ, ບໍ່ມີໄລບຣາຣີ. ມັນຮັກສາລາຍການອົງປະກອບຊັ້ນເງົາໃນ state, ປະກອບສະຕຣິງ CSS box-shadow ທີ່ຖືກຕ້ອງທຸກຄັ້ງທີ່ປ່ຽນແປງໂດຍໃຊ້ຕົວຈັດຮູບແບບ rgba() ທີ່ຂຽນເອງ, ແລະ ນຳໃຊ້ພວກມັນໂດຍກົງກັບອົງປະກອບຕົວຢ່າງຜ່ານ style prop ຂອງ React ດັ່ງນັ້ນເອັນຈິນສະແດງຜົນຂອງບຣາວເຊີເອງແຕ້ມຜົນລັບທັນທີ.

1
ພາຣາມິເຕີຊັ້ນປ້ອນຕົວຈັດຮູບແບບ
ຊັ້ນເງົາແຕ່ລະອັນເກັບການເລື່ອນ x/y, ເບລີ, ການກະຈາຍ, ສີ hex, ແລະ ຄ່າຄວາມໂປ່ງໃສ. ທຸກຄັ້ງທີ່ປ່ຽນແປງ, ຟັງຊັນ shadowToCss ນ້ອຍໆ ແປງສີ hex ເປັນອົງປະກອບ RGB ດ້ວຍ regex, ແລ້ວປະກອບສະຕຣິງ rgba() — ຕົວຢ່າງ 0px 4px 12px 0px rgba(0, 0, 0, 0.15). ຊັ້ນຫຼາຍອັນຖືກເຊື່ອມດ້ວຍຈຸດຈຸລະພາກ.
2
ບຣາວເຊີສະແດງຜົນຕົວຢ່າງສົດ
ສະຕຣິງທີ່ປະກອບແລ້ວຖືກກຳນົດເປັນຄຸນສົມບັດ style boxShadow ຂອງອົງປະກອບ div ໂດຍກົງໃນ JSX. React ອັບເດດ DOM attribute, ແລະ ເອັນຈິນ CSS ຂອງບຣາວເຊີແຕ້ມເງົາທັນທີ — ບໍ່ມີ canvas ຫຼື WebGL ທີ່ກ່ຽວຂ້ອງ, ພຽງແຕ່ CSS ພື້ນເມືອງ.
3
ການລາກເພື່ອຈັດຕຳແໜ່ງໃຊ້ Pointer Events API
ການກົດ ແລະ ລາກກ່ອງຕົວຢ່າງເອີ້ນ setPointerCapture ເທິງອົງປະກອບ, ແລ້ວຕິດຕາມ onPointerMove deltas ເພື່ອອັບເດດການເລື່ອນ x ແລະ y ຂອງຊັ້ນເຄື່ອນໄຫວໃນເວລາຈິງ. ການກົດ Shift ຄ້າງນຳໃຊ້ປັດໄຈຂະໜາດ 0.25x ສຳລັບການຈັດຕຳແໜ່ງແບບລະອຽດ.
4
ຜົນອອກຖືກສຳເນົາໄປຄລິບບອດ
ເຄື່ອງມືຜະລິດຮູບແບບຜົນອອກສອງອັນຈາກຂໍ້ມູນຊັ້ນດຽວກັນ: ການປະກາດ CSS box-shadow ມາດຕະຖານ, ແລະ ຄລາສ Tailwind arbitrary-value (shadow-[...]) ບ່ອນທີ່ຊ່ອງຫວ່າງຖືກແທນທີ່ດ້ວຍຂີດລຸ່ມຕາມກົດໄວຍາກອນ Tailwind. ການສຳເນົາຄັ້ງດຽວໃຊ້ navigator.clipboard.writeText.