តើខ្ញុំអាចបង្កើត CSS box-shadow និងចម្លងកូដដោយរបៀបណា?

សារ៉េគ្រាប់រំកិលសម្រាប់គម្លាត x និង y, blur, spread, ពណ៌ និងភាពថ្លា (Opacity) ដោយមើលការបង្ហាញផ្ទាល់។ បន្ទាប់មកចុច ចម្លង នៅក្នុងកូដចេញ CSS។ អ្នកក៏អាចចាប់ផ្តើមពី លំនាំដើម ដូចជា ទន់, ភ្លឺ ឬ Material 8 ផងដែរ។

តើខ្ញុំអាចដាក់ស្រមោលច្រើនជាន់លើធាតុតែមួយបានទេ?

បាន។ ចុច + បន្ថែមស្រទាប់ shadow មួយទៀត ដើម្បីបន្ថែមស្រទាប់ទៀត រួចរៀបលំដាប់ឡើងវិញ លាក់ ឬ យកចេញ ស្រទាប់នីមួយៗ។ ស្រទាប់ទាំងនោះត្រូវបានភ្ជាប់គ្នាដោយសញ្ញាក្បៀសនៅក្នុងតម្លៃ box-shadow តែមួយ។

តើខ្ញុំអាចបង្កើតស្រមោលចូលក្នុង (inset shadow) ដោយរបៀបណា?

ជ្រើសរើសស្រទាប់ណាមួយ រួចបើក ស្រមោលចូលក្នុង ឬជ្រើសរើសលំនាំដើម ចូលក្នុង។ កូដដែលទទួលបាននឹងរួមបញ្ចូលពាក្យគន្លឹះ inset សម្រាប់ស្រទាប់នោះ។

តើខ្ញុំអាចទទួលបាន Tailwind class ជំនួសឱ្យ CSS ធម្មតាបានទេ?

បាន។ ក្រៅពីកូដ CSS ឧបករណ៍នេះក៏បង្កើត Tailwind class ដែលមានតម្លៃជាក់លាក់ក្នុងទម្រង់ shadow-[...] ដោយជំនួសដកឃ្លាដោយសញ្ញា (_) រួចជាស្រេចសម្រាប់យកទៅបិទភ្ជាប់ក្នុង markup របស់អ្នក។

តើមានវិធីងាយស្រួលជាងការប្រើគ្រាប់រំកិលដើម្បីកំណត់ទីតាំងស្រមោលដែរឬទេ?

មាន។ អូសប្រអប់មើលសាកល្បងដើម្បីរំកិលស្រមោលរបស់ស្រទាប់សកម្ម ហើយចុច Shift ឱ្យជាប់សម្រាប់ការកំណត់យ៉ាងម៉ត់ចត់។ អ្នកក៏អាចប្តូរ មើលឃើញលើកមុននៃផ្ទៃខាងក្រោយ និង ពណ៌ប្រអប់ ដើម្បីមើលថាតើស្រមោលនោះស៊ីគ្នានឹងការរចនារបស់អ្នកកម្រិតណា។

តើវាឥតគិតថ្លៃពិតមែនទេ?

ពិតប្រាកដណាស់។ ឧបករណ៍ទាំងអស់គឺអាចប្រើបានដោយឥតគិតថ្លៃ ដោយមិនបាច់មានគណនី និងមិនបាច់ប្រើកាតឥណទានឡើយ។ ការងារទាំងអស់ដំណើរការនៅលើឧបករណ៍របស់អ្នកផ្ទាល់ ជាជាងនៅលើម៉ាស៊ីនបម្រើ (server) របស់យើង ដែលនេះហើយជាមូលហេតុធ្វើឱ្យវាដំណើរការដោយឥតគិតថ្លៃ។

វាដំណើរការនៅលើទូរស័ព្ទទេ?

បាទ/ចាស។ វាដំណើរការលើកម្មវិធីរុករកទូរសព្ទទំនើបលើ iOS និង Android ដោយមិនចាំបាច់ដំឡើងអ្វីទេ។

🎨

បង្កើតស្រមោលប្រអប់ CSS ឥតគិតថ្លៃ

Visual builder សម្រាប់ CSS box-shadow ជាមួយការមើលជាមុនផ្ទាល់ ការ stack layer ច្រើន color picker ការ toggle inset និងចម្លងម្ដង។ រួមបញ្ចូល preset Material, neumorphism, និង glow។

ដំណើរការក្នុងកម្មវិធីរុករករបស់អ្នកគ្មានការចុះឈ្មោះ គ្មានបង្អួចលេចឡើងមិនចាំបាច់ចូលគណនីឥតគិតថ្លៃជារៀងរហូត

ធ្វើការក្រៅបណ្តាញនៅពេលបានផ្ទុករួច

មើលឃើញលើកមុននៃផ្ទៃខាងក្រោយ

ទាញប្រអប់ដើម្បីដាក់ទីតាំងស្រមោលស្វគ្មៈសកម្ម - ចាប់ Shift សម្រាប់ការគ្រប់គ្រងល្អ

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

លំនាំដើម

ពណ៌ប្រអប់

កាំកែងជ្រុង (16px)

x (0px)

y (4px)

ព្រិល (12px)

រាលដាល (0px)

ពណ៌

ភាពថ្លា (15%)

ស្រមោលចូលក្នុង

ការប្រើប្រាស់ទូទៅ

លម្អិតលម្អិតលម្អិតលម្អិតលម្អិត។
លម្អិតលម្អិតលម្អិតលម្អិតលម្អិត។
Neumorphism Soft UIលម្អិតលម្អិតលម្អិត។
លម្អិតលម្អិតលម្អិតលម្អិតលម្អិត។
ឥទ្ធិពលពន្លឺ និងរង្វង់ផ្តោតទទួលបានការបង្កើតលម្អាង ឥទ្ធិពល ព្រាង ហើយ ស្ទើ់របាំង មានលក្ខណៈជម្រើសបង្ហាញរូបភាព។

វាដំណើរការដោយរបៀបណា

កម្មវិធីបង្កើតស្រមោលប្រអប់ជាឧបករណ៍ React ចំហៀងអតិថិជនទាំងស្រុង — គ្មានម៉ាស៊ីនមេ គ្មានបណ្ណាល័យទេ។ វារក្សាបញ្ជីវត្ថុស្រទាប់ស្រមោលនៅក្នុងស្ថានភាព ប្រកប string CSS box-shadow ត្រឹមត្រូវនៅរាល់ការផ្លាស់ប្តូរដោយប្រើកម្មវិធីធ្វើទ្រង់ទ្រាយ rgba() សរសេរដោយដៃ និងអនុវត្តពួកវាដោយផ្ទាល់ទៅធាតុមើលជាមុនតាមទ្រព្យសម្បត្តិ style របស់ React ដូច្នេះម៉ាស៊ីនបង្ហាញផ្ទាល់របស់កម្មវិធីរុករកគូរលទ្ធផលភ្លាមៗ។

1
ប៉ារ៉ាម៉ែត្រស្រទាប់ផ្គត់ផ្គង់កម្មវិធីធ្វើទ្រង់ទ្រាយ
ស្រទាប់ស្រមោលនីមួយៗរក្សា x/y offsets, blur, spread, ពណ៌ hex និងតម្លៃស្រអាប់។ នៅរាល់ការផ្លាស់ប្តូរ អនុគមន៍ shadowToCss តូចមួយប្តូរពណ៌ hex ទៅសមាសធាតុ RGB ជាមួយកន្សោមធម្មតា រួចប្រកប string rgba() — ឧទាហរណ៍ 0px 4px 12px 0px rgba(0, 0, 0, 0.15)។ ស្រទាប់ច្រើនត្រូវបានភ្ជាប់ជាមួយសញ្ញាក្បៀស។
2
កម្មវិធីរុករកបង្ហាញការមើលជាមុនផ្ទាល់
string ដែលបានប្រកបត្រូវបានប្រគល់ទៅទ្រព្យសម្បត្តិរចនាប័ទ្ម boxShadow របស់ធាតុ div ដោយផ្ទាល់ក្នុង JSX។ React ធ្វើបច្ចុប្បន្នភាពគុណលក្ខណៈ DOM ហើយម៉ាស៊ីន CSS របស់កម្មវិធីរុករកគូរស្រមោលភ្លាមៗ — គ្មាន canvas ឬ WebGL ពាក់ព័ន្ធទេ គ្រាន់តែជាការបង្ហាញ CSS ដើម។
3
អូសទៅទីតាំងប្រើ Pointer Events API
ការចុច និងអូសប្រអប់មើលជាមុនហៅ setPointerCapture លើធាតុ រួចតាមដាន onPointerMove deltas ដើម្បីធ្វើបច្ចុប្បន្នភាព offsets x និង y របស់ស្រទាប់សកម្មក្នុងពេលវេលាពិត។ ចុច Shift ជាប់អនុវត្តកត្តាមាត្រដ្ឋាន 0.25x សម្រាប់ការកំណត់ទីតាំងលម្អិត។
4
លទ្ធផលត្រូវបានចម្លងទៅក្ដារតម្បៀតខ្ទាស់
ឧបករណ៍ផលិតទម្រង់លទ្ធផលពីរពីទិន្នន័យស្រទាប់ដូចគ្នា៖ ប្រកាស CSS box-shadow ស្តង់ដារ និងថ្នាក់តម្លៃបំពាន Tailwind (shadow-[...]) ដែលចន្លោះត្រូវបានជំនួសដោយសញ្ញាបន្ទាត់ក្រោមតាមច្បាប់វាក្យសម្ព័ន្ធ Tailwind។ ការចម្លងចុចម្តងប្រើ navigator.clipboard.writeText។