បន្ថែមពន្លឺទៅធាតុទំព័របណ្តាញសម្រាប់ការសង្កត់ធ្ងន់
ពន្លឺដែលនៅខាងក្រៅទន់ត្រូវបានបន្ថែមទៅធាតុនៅលើទំព័របណ្តាញរបស់អ្នកបណ្តាលអោយធាតុនេះលេចធ្លោអ្នកមើល។ ប្រើ CSS3 និង HTML ដើម្បីអនុវត្តពន្លឺនៅជុំវិញគែមខាងក្រៅនៃវត្ថុសំខាន់។ ប្រសិទ្ធិភាពគឺស្រដៀងគ្នាទៅនឹងពន្លឺដែលនៅខាងក្រៅបានបន្ថែមទៅវត្ថុនៅក្នុង Photoshop ។
ដំបូងបង្កើតធាតុដើម្បីបញ្ចេញពន្លឺ
បែបផែនបញ្ចេញពន្លឺអាចត្រូវបានធ្វើឡើងចំពោះផ្ទៃខាងក្រោយពណ៌ប៉ុន្តែវាមើលទៅល្អបំផុតនៅលើផ្ទៃខាងក្រោយងងឹតពីព្រោះពន្លឺភ្លើងហាក់ដូចជារន្ទះថែមទៀត។ នៅក្នុងប្រអប់រាងចតុកោណកែងរាងមូលនេះធាតុ DIV ត្រូវបានដាក់ក្នុងធាតុ DIV មួយផ្សេងទៀតដែលមានផ្ទៃខាងក្រោយខ្មៅ។ ខាងក្រៅ DIV គឺមិនចាំបាច់សម្រាប់ពន្លឺ, ប៉ុន្តែវាជាការលំបាកក្នុងការមើលពន្លឺនៅលើផ្ទៃខាងក្រោយពណ៌ស។
ផ្តល់ឱ្យ DIV មួយ ថ្នាក់ ពន្លឺ:
កំណត់ទំហំនិងពណ៌របស់ធាតុ
បន្ទាប់ពីអ្នកជ្រើសរើសធាតុដែលអ្នកនឹងតុបតែងដោយពន្លឺភ្លែកទៅមុខហើយ បន្ថែមរចនាប័ទ្មណាមួយដែល អ្នកចង់ធ្វើដូចជាពណ៌ផ្ទៃខាងក្រោយទំហំនិងពុម្ពអក្សរ។ ឧទាហរណ៍នេះគឺជាចតុកោណកែងពណ៌ខៀវ។ ទំហំត្រូវបានកំណត់ជា 147px ដោយ 90px ។ និងពណ៌ផ្ទៃខាងក្រោយត្រូវបានកំណត់ទៅលេខ 1 សុវត្ថិភាពលេខ 1 ពណ៌ខៀវ។ វារួមបញ្ចូលរឹមដើម្បីដាក់ធាតុនៅពាក់កណ្តាលនៃធាតុធុងខ្មៅ។
<រចនាប័ទ្ម>
.glow {
រឹម: ដោយស្វ័យប្រវត្តិ
ទទឹង: 147px;
កម្ពស់: 90px;
ពណ៌ផ្ទៃខាងក្រោយ: # 1f5afe;
}
បង្គត់កៀន
ការបង្កើតចតុកោណជាមួយជ្រុងមូលមានភាពងាយស្រួលជាមួយ CSS3 ។ បន្ថែមលក្ខណសម្បត្តិរចនាប័ទ្មកាំស៊ុមទៅថ្នាក់ពន្លឺរបស់អ្នក។ គ្រាន់តែចាំថាប្រើវាក្យសម្ព័ន្ធ --webkit- និង -moz-prefixes សម្រាប់ភាពឆបគ្នាខ្ពស់បំផុត។
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
កាំស៊ុម: 15px;
បន្ថែមពន្លឺដោយស្រមោលប្រអប់
ពន្លឺរបស់វាត្រូវបានបង្កើតដោយស្រមោលប្រអប់។ ដោយសារតែអ្នកចង់ឱ្យវាភ្លឺថ្លាធាតុទាំងមូលហើយមិនធ្វើគម្រោងពន្លឺដែលបិទមួយចំហៀងដូចជាស្រមោលអ្នកកំណត់ប្រវែងបញ្ឈរនិងបញ្ឈរទៅ 0px ។ ក្នុងឧទាហរណ៍នេះកាំព្រិលត្រូវបានកំណត់ 15 ភីចសែលហើយការរីករាលដាលនៃព្រិលគឺ 5 ភីកសែលប៉ុន្តែអ្នកអាចប្រើការកំណត់ទាំងនេះដើម្បីកំណត់ថាតើអ្នកចង់ឱ្យពន្លឺមានភាពរលូន។ ពណ៌ rgb (255,255,190) គឺជាពណ៌លឿងដែលមានតម្លាភាព RGBa អាល់ហ្វាដែលកំណត់ទៅ 75 ភាគរយ -rgba (255, 255, 190, .75) ។ ជ្រើសរើសពណ៌ពន្លឺដែលមានប្រសិទ្ធភាពបំផុតសម្រាប់គម្រោងរបស់អ្នក។ ដូចជាមួយនឹងការបង្គត់គែមសូមកុំភ្លេចប្រើបុព្វបទនៃកម្មវិធីរុករក (-webkit-and-moz-) សម្រាប់ភាពឆបគ្នាដ៏ល្អបំផុត។
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
ស្រមោលស្រមោល: 0px 0px 15px 5px rgba (255, 255, 190, 75);
សាកល្បងប្រអប់ភ្លឺ
សាកល្បងប្រអប់មានពន្លឺនៅក្នុងកម្មវិធីរុករកមួយរឺច្រើនហើយធ្វើការកែតម្រូវដែលត្រូវការដើម្បីផ្តល់នូវពន្លឺដែលមានប្រសិទ្ធភាពបំផុតសម្រាប់គេហទំព័ររបស់អ្នក។