ឧបករណ៍បង្កើត CSS Filter

លៃតម្រូវបែបផែនដូចជាភាពព្រិល ឬពន្លឺដោយប្រើគ្រាប់រំកិល ហើយបង្កើតកូដ filter របស់ CSS ខណៈមើលការបង្ហាញជាមុន

ព័ត៌មានធ្វើបច្ចុប្បន្នភាពបានបន្ថែមឧបករណ៍បង្កើត CSS Filter កែតម្រូវភាពព្រិល និងពន្លឺដើម្បីបង្កើតមើលព័ត៌មានអាប់ដេត

លក្ខណៈពិសេស

បែបផែន 9 ប្រភេទតាមគ្រាប់រំកិល

ការបង្ហាញជាមុននិងកូដ CSS ប្តូរភ្លាមៗពេលអ្នកកំពុងរំកិល

អាចសាកល្បងជាមួយរូបភាពផ្ទាល់ខ្លួន

បង្ហាញរូបភាពរបស់អ្នកនៅក្នុងកម្មវិធីរុករកដើម្បីពិនិត្យមើលបែបផែន

បង្ហាញរូបភាពដើមតែពេលចុចសង្កត់

ប្រៀបធៀបមុននិងក្រោយដាក់បែបផែនភ្លាមៗនៅទីនោះ

កែតម្រូវបន្តិចបន្តួចពីគំរូ 8

កែតម្រូវដោយចាប់ផ្តើមពីគំរូដូចជាសេពៀ ឬស្ទីលបុរាណ

របៀបប្រើប្រាស់

ជ្រើសរើសរូបភាព

ជ្រើសរូបភាពផ្ទាល់ខ្លួនតាមរយៈ "ជ្រើសរើសរូបភាពផ្ទាល់ខ្លួន"។ ប្រសិនបើមិនជ្រើសរើស អ្នកអាចសាកល្បងដោយប្រើរូបភាពគំរូដែលមានស្រាប់

លៃតម្រូវបែបផែន

ជ្រើសរើសគំរូដែលមានបរិយាកាសស្រដៀងគ្នា ឬលៃតម្រូវកម្រិតបែបផែនដោយប្រើគ្រាប់រំកិលនីមួយៗ

ប្រៀបធៀបមុននិងក្រោយ

ចុចសង្កត់ "ប្រៀបធៀបជាមួយរូបភាពដើម" ដើម្បីបង្ហាញរូបភាពដែលមិនទាន់ដាក់បែបផែន

ចម្លងកូដ

ចុចប៊ូតុង "ចម្លង" ដើម្បីបិទភ្ជាប់បន្ទាត់ filter ទៅក្នុង CSS ផ្ទាល់ខ្លួនរបស់អ្នក

ករណីប្រើប្រាស់

ភាពងាយអានអក្សរលើរូបថតផ្ទៃខាងក្រោយ

ធ្វើឲ្យរូបថតផ្ទៃខាងក្រោយព្រិលបន្តិច ដើម្បីឲ្យចំណងជើងដែលដាក់ពីលើងាយអាន

ធ្វើឲ្យតោនពណ៌រូបថតឯកភាព

ធ្វើឲ្យរូបថតនៅទំព័រក្រុម ឬវិចិត្រសាលមានពណ៌ស-ខ្មៅ ឬសេពៀដូចគ្នា

កំណត់តម្លៃដោយប្រើរូបថតផ្ទាល់ខ្លួន

កំណត់តម្លៃពណ៌ស្រអាប់ ឬស្ទីលបុរាណដោយសាកល្បងលើរូបថតដែលនឹងប្រើពិតប្រាកដ

លៃតម្រូវរូបភាពសម្រាប់ Dark Mode

កំណត់តម្លៃពន្លឺនិងកម្រិតពណ៌ឲ្យទាបជាងមុន ដើម្បីកុំឲ្យភ្លឺពេកនៅលើផ្ទៃខាងក្រោយងងឹត

ចំណេះដឹងមូលដ្ឋាន

អនុគមន៍និងឯកតារបស់ filter

លក្ខណៈសម្បត្តិ filter របស់ CSS ជាលក្ខណៈសម្បត្តិដែលដាក់បែបផែនលើរូបរាងរបស់រូបភាព ឬធាតុផ្សេងៗ ដោយសរសេរអនុគមន៍ដូចជា blur និង sepia ដាក់ជាប់គ្នាដោយបំបែកដោយចន្លោះមួយ។

px (pixel)：អនុគមន៍ blur ជាអនុគមន៍ដែលកំណត់កាំនៃភាពព្រិលជា px ដូចជាកំណត់ 4px នោះពណ៌នឹងលាយបញ្ចូលគ្នាក្នុងរង្វង់កាំ 4 pixel។
% (ភាគរយ)：អនុគមន៍ brightness និង sepia ជាអនុគមន៍ដែលកំណត់កម្រិតនៃបែបផែនជាភាគរយ ដូចជាក្នុងអនុគមន៍ brightness តម្លៃ 100% គឺពន្លឺដើម ហើយ 120% គឺភ្លឺជាងដើម 20%។
deg (ដឺក្រេ)：អនុគមន៍ hue-rotate ជាអនុគមន៍ដែលកំណត់មុំបង្វិលពណ៌នៅលើរង្វង់ពណ៌ជាដឺក្រេ ដូចជាកំណត់ 180deg ពណ៌នឹងផ្លាស់ទៅពណ៌ផ្ទុយ។

ហេតុអ្វីលទ្ធផលប្រែប្រួលតាមលំដាប់ការសរសេរ

អនុគមន៍ដែលដាក់ក្នុង filter ត្រូវបានអនុវត្តតាមលំដាប់ពីឆ្វេងទៅស្តាំ ហើយបែបផែនបន្ទាប់ត្រូវបានអនុវត្តលើលទ្ធផលនៃបែបផែនមុន ដូច្នេះប្រសិនបើប្តូរលំដាប់ រូបរាងក៏អាចផ្លាស់ប្តូរផងដែរ។ ឧទាហរណ៍ ប្រសិនបើធ្វើឲ្យជាស-ខ្មៅមុនរួចដាក់សេពៀ ពណ៌ត្នោតនឹងនៅសល់ ប៉ុន្តែប្រសិនបើដាក់សេពៀមុនរួចធ្វើឲ្យជាស-ខ្មៅ ពណ៌ត្នោតនឹងបាត់។ ក្នុងឧបករណ៍នេះ លំដាប់នៃការអនុវត្តត្រូវបានកំណត់ជាស្ថេរភាព ប៉ុន្តែអ្នកអាចផ្លាស់ប្តូរលំដាប់ដោយកែកូដ CSS ដែលបានបង្កើត។

ភាពខុសគ្នាជាមួយ backdrop-filter

filter និង backdrop-filter ជាលក្ខណៈសម្បត្តិដែលអាចប្រើអនុគមន៍ដូចគ្នា ប៉ុន្តែគោលដៅដែលដាក់បែបផែនខុសគ្នា។

filter：filter ជាលក្ខណៈសម្បត្តិដែលដាក់បែបផែនលើរូបរាងនៃធាតុដែលបានកំណត់ផ្ទាល់ (ដូចជារូបភាព ឬអក្សរ)។
backdrop-filter：backdrop-filter ជាលក្ខណៈសម្បត្តិដែលដាក់បែបផែនលើផ្នែកដែលមើលឃើញនៅពីក្រោយធាតុដែលបានកំណត់ ត្រូវបានប្រើសម្រាប់បែបផែនដូចកញ្ចក់លាយ។