រំកិលរបារដើម្បីកំណត់គម្លាតផ្ដេក បញ្ឈរ ភាពព្រិល (Blur) ភាពរីក (Spread) ពណ៌ និងភាពថ្លានៃស្រមោល ហើយប្រអប់បង្ហាញគំរូនឹងផ្លាស់ប្តូរភ្លាមៗ។ ធីកយក Inset សម្រាប់ស្រមោលខាងក្នុង បន្ថែមស្រមោលរហូតដល់ប្រាំជាន់ដើម្បីបង្កើតជម្រៅបែបធម្មជាតិ និងផ្លាស់ប្តូរពណ៌ប្រអប់ព្រមទាំងផ្ទៃខាងក្រោយឱ្យស៊ីគ្នាជាមួយការរចនារបស់អ្នក។
ចាប់ផ្តើមពី Preset ស្រាប់ៗដូចជា Soft, Card, Hard, Floating ឬ Inner រួចកែសម្រួលបន្ថែម។ កូដ CSS ប្រើប្រាស់ពណ៌ rgba() ដូច្នេះស្រមោលនឹងស៊ីគ្នាជាមួយគ្រប់ផ្ទៃខាងក្រោយ ហើយរួចរាល់សម្រាប់យកទៅបិទភ្ជាប់ក្នុង Stylesheet របស់អ្នក។
របៀបប្រើឧបករណ៍ កម្មវិធីបង្កើត Box Shadow
- ជ្រើសរើស Preset ណាមួយ ឬចាប់ផ្តើមជាមួយស្រមោលលំនាំដើម។
- កែសម្រួល Offset, Blur, Spread, Opacity និងពណ៌។
- បន្ថែមជាន់បន្ថែមទៀតដើម្បីបង្កើនជម្រៅ ឬធីកយក Inset សម្រាប់ស្រមោលខាងក្នុង។
- ចម្លងកូដ
box-shadowCSS។
ហេតុអ្វីប្រើ កម្មវិធីបង្កើត Box Shadow របស់ ToolOrca
- កំណត់ Offset, Blur, Spread, ពណ៌ និង Opacity
- ស្រមោលខាងក្នុង Inset
- ដាក់ស្រមោលត្រួតគ្នាបានរហូតដល់ 5 ជាន់
- មាន Preset សម្រាប់ម៉ូដពេញនិយម
- កំណត់ពណ៌ផ្ទាល់ខ្លួនសម្រាប់ប្រអប់ និងផ្ទៃខាងក្រោយ
- កូដ CSS រួចរាល់សម្រាប់ចម្លងយកទៅប្រើ
ការពន្យល់អំពីទម្រង់ Syntax នៃ box-shadow
box-shadow: inset? x y blur spread color; – x និង y រំកិលស្រមោលទៅស្តាំ និងចុះក្រោម (តម្លៃអវិជ្ជមានរំកិលទៅឆ្វេង និងឡើងលើ), blur ធ្វើឱ្យគែមព្រិលទន់ ហើយ spread ពង្រីក ឬបង្រួមទំហំស្រមោលមុនពេលព្រិល។ ប្រើសញ្ញាក្បៀសដើម្បីបំបែកស្រមោលច្រើនជាន់ ដោយស្រមោលដំបូងគេនឹងបង្ហាញនៅស្រទាប់លើគេបង្អស់។
ស្រមោលដែលមើលទៅធម្មជាតិ ច្រើនតែផ្សំឡើងរវាងស្រមោលតូចងងឹតដែលនៅកៀក Element ជាមួយស្រមោលធំទន់ដែលនៅឆ្ងាយបន្តិច ហើយប្រើភាពថ្លា (Opacity) ទាបជាជាងពណ៌ខ្មៅដិត។
សំណួរដែលសួរញឹកញាប់
តើខ្ញុំត្រូវដាក់ស្រមោលតែម្ខាងយ៉ាងដូចម្តេច?
ប្រើ Offset នៅខាងនោះ ហើយប្រើ Spread ជាតម្លៃអវិជ្ជមានដើម្បីទប់ជ្រុងផ្សេងទៀត ឧទាហរណ៍ 0 8px 6px -6px rgba(0,0,0,.4) សម្រាប់ស្រមោលនៅខាងក្រោមតែមួយមុខ។
តើ box-shadow និង drop-shadow ខុសគ្នាយ៉ាងដូចម្តេច?
box-shadow បង្កើតតាមរាងប្រអប់របស់ Element (រួមទាំង border-radius)។ ចំណែក filter: drop-shadow() បង្កើតតាមទម្រង់រូបភាពដែលមានផ្ទៃថ្លា (Transparent) ហើយមិនគាំទ្រ Spread ឬ Inset ឡើយ។
តើ Box shadow ធ្វើឱ្យទំព័រដើរយឺតដែរឬទេ?
ស្រមោលធម្មតាមិនប៉ះពាល់ល្បឿនឡើយ។ ប៉ុន្តែស្រមោលព្រិលទំហំធំខ្លាំងដែលមាន Animation អាចប៉ះពាល់ដល់ដំណើរការលើទូរសព្ទខ្សោយ ដូច្នេះគួរប្រើ Animation លើ Opacity នៃ Pseudo-element ជំនួសវិញ។
តើខ្ញុំអាចបង្កើតស្រមោលបែប Neumorphism យ៉ាងដូចម្តេច?
ប្រើស្រមោលពីរជាន់លើផ្ទៃខាងក្រោយដែលមានពណ៌ដូចប្រអប់៖ ស្រមោលពណ៌ភ្លឺរំកិលទៅលើ-ឆ្វេង និងស្រមោលពណ៌ងងឹตรំកិលទៅក្រោម-ស្តាំ ឧទាហរណ៍ -8px -8px 16px #fff, 8px 8px 16px #c8ccd6។