ជ្រើសរើសពណ៌ពីពីរទៅប្រាំ កំណត់ទីតាំង តម្រង់មុំ ហើយមើលការបង្ហាញ Gradient ផ្ទាល់នៅលើផ្ទាំងមើលជាមុនដ៏ធំ។ ប្តូររវាង linear, radial និង conic ឬចុច Random ដើម្បីទទួលបានគំនិតថ្មីៗ។ កូដ CSS ខាងក្រោមរួចរាល់សម្រាប់យកទៅបិទភ្ជាប់ក្នុង Stylesheet របស់អ្នក ហើយមានរួមបញ្ចូលទាំង Solid colour fallback ផងដែរ។
Gradient ដែលបង្កើតដោយ CSS គឺច្បាស់លើគ្រប់អេក្រង់ មិនធ្ងន់ដូចរូបភាព និងងាយស្រួលកែប្រែនៅពេលក្រោយ។ ប្រើប្រាស់វាសម្រាប់ Hero sections, ប៊ូតុង, កាត, Text highlights និងផ្ទៃខាងក្រោយរបស់កម្មវិធី។
របៀបប្រើឧបករណ៍ កម្មវិធីបង្កើត CSS Gradient
- ជ្រើសរើស Linear, Radial ឬ Conic។
- កំណត់មុំ (ឬទ្រង់ទ្រាយសម្រាប់ Radial gradient)។
- ផ្លាស់ប្តូរពណ៌នីមួយៗ និងរំកិលទីតាំងរបស់វា។ បន្ថែមពណ៌បានរហូតដល់ប្រាំ។
- ចម្លងកូដ CSS។
ហេតុអ្វីប្រើ កម្មវិធីបង្កើត CSS Gradient របស់ ToolOrca
- បង្កើត Linear, Radial និង Conic gradient
- កំណត់ពណ៌បានរហូតដល់ 5 ពណ៌ជាមួយទីតាំង
- បញ្ចូលលេខកូដ HEX និងផ្ទាំងរើសពណ៌
- ប៊ូតុង Random gradient បង្កើតដោយចៃដន្យ
- មាន Solid colour fallback ក្នុងកូដ CSS
- ផ្ទាំងមើលផ្ទាល់ទំហំធំ
ទម្រង់ Syntax នៃ CSS gradient
linear-gradient(135deg, #0f6fde 0%, #ff6b6b 100%) បង្កើតពណ៌តាមបន្ទាត់ត្រង់តាមមុំដែលបានកំណត់ ដោយ 0deg បែរទៅលើ និង 90deg បែរទៅស្តាំ។ radial-gradient(circle, …) បញ្ចេញពណ៌ជារង្វង់ចេញពីចំណុចកណ្តាល ហើយ conic-gradient(from 0deg, …) បង្វិលពណ៌ជុំវិញចំណុចកណ្តាលដូចកង់ពណ៌ ឬតារាងចំណិតនំ។
Gradient ត្រូវបានចាត់ទុកជារូបភាពក្នុង CSS ដូច្នេះសូមប្រើវាជាមួយ background ឬ background-image មិនមែន background-color ទេ។ ដើម្បីដាក់ Gradient លើអក្សរ សូមប្រើវាជាមួយ background-clip: text និងកំណត់ពណ៌អក្សរជា Transparent។
សំណួរដែលសួរញឹកញាប់
តើខ្ញុំត្រូវបន្ថែមផ្ទៃខាងក្រោយ Gradient ក្នុង CSS យ៉ាងដូចម្តេច?
ចម្លងកូដពីឧបករណ៍នេះទៅក្នុង Rule របស់អ្នក ឧទាហរណ៍ body { background: linear-gradient(135deg, #0f6fde, #ff6b6b); }។
តើ CSS gradients ដំណើរការលើគ្រប់ Browser ដែរឬទេ?
Linear និង Radial gradient ដំណើរការលើគ្រប់ Browser ទំនើប។ ចំណែក Conic gradient ដំណើរការលើកំណែបច្ចុប្បន្នទាំងអស់នៃ Chrome, Edge, Firefox និង Safari។
ហេតុអ្វីបានជា Gradient របស់ខ្ញុំលោតត្រួតគ្នា ឬដាច់ពាក់កណ្តាល?
ប្រសិនបើ Element ខ្លីជាងទំព័រ នោះ Gradient នឹងបង្ហាញត្រួតដដែលៗ។ សូមបន្ថែម min-height: 100vh ទៅក្នុង Element ឬប្រើ background-attachment: fixed។
តើខ្ញុំអាចធ្វើឱ្យពណ៌ដាច់ពីគ្នាជំនួសឱ្យការរលាយចូលគ្នាបានទេ?
បាន។ គ្រាន់តែដាក់ពណ៌ពីរនៅទីតាំងភាគរយដូចគ្នា ឧទាហរណ៍ ពណ៌ក្រហម 50% និងពណ៌ខៀវ 50% ដើម្បីទទួលបានគែមដាច់ច្បាស់ល្អ។