ជម្រាល CSS (CSS gradient)អនុញ្ញាតឱ្យអ្នកផ្លាស់ប្តូរដោយរលូនរវាងពណ៌ពីរជាក់លាក់។ កាលពីដើមអ្នកបានប្រើរូបភាពសម្រាប់បែបផែនទាំងនេះ។ ទោះជាយ៉ាងណា, ដោយប្រើជម្រាល CSS អ្នកអាចកាត់បន្ថយពេលវេលាទាញយកនិងប្រើប្រាស់កម្រិតបញ្ជូន។ លើសពីនេះទៀតធាតុដោយប្រើជម្រាល (gradient) ដែលមើលទៅល្អប្រសើរជាងមុននៅពេលដែលអ្នកពង្រីក ដោយសារតែជម្រាល (gradient) ត្រូវបានបង្កើតដោយកម្មវិធីមើលវេបសាយ (browser)។
CSS កំណត់ជម្រាល (gradient) ជាពីរប្រភេទ៖
- លីនេអ៊ែរជម្រាល (linear gradient) (ទៅក្រោម / ឡើងលើ / ឆ្វេង / ស្ដាំ / អង្កត់ទ្រូង)
- ជម្រាលរង្វង់ (radial gradient) (កំណត់ដោយចំណុចកណ្ដាលរបស់ពួកគេ)
លីនេអ៊ែរជម្រាល (linear gradient)
ដើម្បីបង្កើតជម្រាលលីនេអ៊ែរមួយអ្នកត្រូវតែកំណត់ពណ៌យ៉ាងហោចណាស់ពីរ។ ពណ៌ទាំងនោះគឺជាពណ៌ដែលអ្នកចង់ផ្លាស់ប្តូរដោយរលូនដើម្បីបង្ហាញនៅក្នុងចំណោមពណ៌ទាំងពីរនោះ។ អ្នកអាចកំណត់ចំណុចចាប់ផ្តើមនិងទិសដៅមួយ (ឬមុំមួយ) រួមជាមួយនឹងបែបផែននៃជម្រាល។
Syntax
background: linear-gradient(direction, color-stop1, color-stop2, …);
លីនេអ៊ែរជម្រាល – កំពូលទៅបាត (នេះគឺជាលំនាំដើម)
ឧទាហរណ៍ខាងក្រោមបង្ហាញជម្រាលលីនេអ៊ែរដែលចាប់ផ្តើមនៅកំពូល។ វាចាប់ផ្តើមពីពណ៌ក្រហមផ្លាស់ប្តូរទៅពណ៌លឿង៖
នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖
លីនេអ៊ែរជម្រាល – ពីឆ្វេងទៅស្តាំ
ឧទាហរណ៍ខាងក្រោមបង្ហាញជម្រាលលីនេអ៊ែរដែលចាប់ផ្តើមពីឆ្វេង។ វាចាប់ផ្តើមពីពណ៌ក្រហមផ្លាស់ប្តូរទៅពណ៌លឿង៖
នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖
លីនេអ៊ែរជម្រាល – អង្កត់ទ្រូង
អ្នកអាចធ្វើឱ្យជម្រាលតាមអង្កត់ទ្រូងដោយបញ្ជាក់ពីទីតាំងចាប់ផ្តើមទាំងផ្ដេក (horizontal)និងបញ្ឈរ (vertical)។ ឧទាហរណ៍ខាងក្រោមបង្ហាញជម្រាលលីនេអ៊ែរដែលចាប់ផ្តើមនៅកំពូលខាងឆ្វេង (ហើយទៅខាងក្រោមផ្នែកខាងស្តាំ) ។ វាចាប់ផ្តើមពីពណ៌ក្រហមផ្លាស់ប្តូរទៅពណ៌លឿង៖
នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖
ការប្រើមុំ
ប្រសិនបើអ្នកចង់គ្រប់គ្រងបន្ថែមលើទិសដៅនៃជម្រាលនេះ អ្នកអាចកំណត់មុំមួយជំនួសឱ្យការកំណត់ទិសដៅដែលបានកំណត់ជាមុន (ទៅបាត, ទៅកំពូល, ទៅស្តាំ, ទៅឆ្វេង, ទៅស្ដាំផ្នែកខាងក្រោម -ល-) ។
Syntax
background: linear-gradient(angle, color-stop1, color-stop2);
មុំត្រូវបានបញ្ជាក់ថាជាមុំរវាងបន្ទាត់ផ្ដេក (horizontal line) និងបន្ទាត់ជម្រាល (gradient line)មួយ។ ឧទាហរណ៍ខាងក្រោមបង្ហាញពីរបៀបប្រើប្រាស់មុំនៅលើជម្រាលលីនេអ៊ែរ៖
នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖
ការប្រើប្រាស់ពណ៌ច្រើន
ឧទាហរណ៍ខាងក្រោមបង្ហាញជម្រាលលីនេអ៊ែរ (ពីកំពូលទៅបាត) ជាមួយនឹងពណ៌ជាច្រើន៖
នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖
ឧទាហរណ៍ខាងក្រោមបង្ហាញពីរបៀបដើម្បីបង្កើតជម្រាលលីនេអ៊ែរ (ពីឆ្វេងទៅស្ដាំ) ជាមួយនឹងសម្បុរឥន្ធនូនិងអត្ថបទ៖
នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖