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

គ្រាន់តែជ្រើសរើសពណ៌ និងមុំ ក៏អាចបង្កើតកូដ CSS gradient ទាំងមើលការបង្ហាញជាមុនបាន

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

លក្ខណៈពិសេស

ការបង្ហាញជាមុន និងកូដធ្វើបច្ចុប្បន្នភាពជាមួយគ្នា

រាល់ពេលផ្លាស់ប្តូរពណ៌ ឬមុំ រូបរាង និង CSS ប្តូរជាមួយគ្នាភ្លាមៗ

គាំទ្រលីនេអ៊ែរ រង្វង់ និងកោណ

អាចកំណត់លម្អិតតាមប្រភេទនីមួយៗ ទាំងមុំ រូបរាង និងទីតាំងកណ្តាល

លៀនកំណត់ពណ៌រហូតដល់ 10 ដោយអូស

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

គំរូ 8 ប្រភេទ និងការបង្កើតចៃដន្យ

លៀនកែតម្រូវបន្តិចបន្តួចចេញពីការរៀបចំពណ៌ដ៏ពេញនិយម ឬពណ៌ចៃដន្យ

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

ជ្រើសរើសប្រភេទ

ជ្រើសរើសប្រភេទ gradient ពីលីនេអ៊ែរ រង្វង់ ឬកោណ

កំណត់ពណ៌

ជ្រើសរើសពណ៌តាមកូដ ឬគំរូ ហើយចុច「បន្ថែមពណ៌」ដើម្បីបន្ថែមពណ៌ និងកំណត់ទីតាំងនិងកម្រិតថ្លា

កំណត់ទិសដៅ

ប្រភេទលីនេអ៊ែរកំណត់តាមមុំ ឬប៊ូតុងទិសដៅ រីឯប្រភេទរង្វង់ និងកោណកំណត់ទីតាំងកណ្តាល

ចម្លងកូដ

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

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

បង្កើតផ្ទៃខាងក្រោយរូបភាព Hero

កំណត់ពណ៌ផ្ទៃខាងក្រោយនៃផ្នែកខាងលើគេហទំព័រ ឬប៊ូតុងដោយមិនចាំបាច់សរសេរកូដ

ជ្រើសរើសពណ៌សម្រាប់ចំណងជើងប្លុក

ជ្រើសរើសពណ៌ដែលជិតបំផុតពីគំរូដើម្បីរៀបចំផ្ទៃខាងក្រោយចំណងជើងអត្ថបទ

ស្រទាប់ត្រួតលើរូបថត

បង្កើតស្រទាប់ថ្លាពាក់កណ្តាលលើរូបថតដោយប្រើពណ៌ដែលបានកាត់បន្ថយកម្រិតថ្លា

កែតម្រូវ gradient ច្រើនពណ៌

អូសកែតម្រូវទីតាំងព្រំដែននៃពណ៌ 3 ឬច្រើនជាងនេះបន្តិចម្តងៗ

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

ភាពខុសគ្នារវាង linear, radial និង conic

CSS gradient មានអនុគមន៍ចំនួន 3 ដែលមានរបៀបផ្លាស់ប្តូរពណ៌ខុសគ្នា ហើយអនុគមន៍ទាំងអស់ត្រូវសរសេរនៅក្នុងលក្ខណៈសម្បត្តិ background។

linear-gradient：linear-gradient គឺជា gradient លីនេអ៊ែរដែលពណ៌ផ្លាស់ប្តូរទៅតាមបន្ទាត់ត្រង់ដែលមានមុំកំណត់។
radial-gradient：radial-gradient គឺជា gradient រង្វង់ដែលពណ៌រាលដាលជារូបរាងរង្វង់ ឬរាងពងក្រពើពីទីតាំងកណ្តាលទៅខាងក្រៅ។
conic-gradient：conic-gradient គឺជា gradient រាងកោណដែលពណ៌ផ្លាស់ប្តូរនៅពេលវិលជុំវិញទីតាំងកណ្តាលមួយជុំតាមទិសទ្រនិចនាឡិកា។

ការប្រែប្រួលរវាងមុំ និងពាក្យគន្លឹះទិសដៅ

មុំនៃ linear-gradient គឺ 0deg ជាទិសពីក្រោមឡើងលើ ហើយលេខកាន់តែធំកាន់តែវិលតាមទិសទ្រនិចនាឡិកា។ មុំក៏អាចសរសេរដោយប្រើពាក្យគន្លឹះទិសដៅដូចជា「to right」ដែរ ហើយ 90deg ដូចនឹង「to right」 និង 180deg ដូចនឹង「to bottom」។

របៀបសរសេរចំណុចផ្អាកពណ៌ និងកម្រិតថ្លា

ចំណុចផ្អាកពណ៌ (color stop) គឺជាទីតាំងក្នុង gradient ដែលក្លាយទៅជាពណ៌នោះ ដោយ 0% តំណាងឱ្យចំណុចចាប់ផ្តើម និង 100% តំណាងឱ្យចំណុចបញ្ចប់។ ឧទាហរណ៍ 「#3B82F6 0%, #8B5CF6 100%」 គឺជាការកំណត់ដែលពណ៌ប្តូរពីពណ៌ខៀវនៅចំណុចចាប់ផ្តើមទៅពណ៌ស្វាយនៅចំណុចបញ្ចប់។

ទម្រង់ #RRGGBB：ទម្រង់ #RRGGBB គឺជារបៀបសរសេរពណ៌ដោយតំណាងកម្លាំងពណ៌ក្រហម បៃតង និងខៀវជាលេខដប់ប្រាំមួយ (hexadecimal) ពីរខ្ទង់ ដោយ #FF0000 តំណាងឱ្យពណ៌ក្រហមមិនថ្លា។
ទម្រង់ rgba：ទម្រង់ rgba គឺជារបៀបសរសេរពណ៌ដោយបន្ថែមកម្រិតថ្លា (0 ទៅ 1) ទៅលើតម្លៃពណ៌ក្រហម បៃតង ខៀវ (0 ទៅ 255) ដោយកម្រិតថ្លា 0.5 តំណាងឱ្យពណ៌ថ្លាពាក់កណ្តាល។