របៀបប្រើ CSS ជាមួយ gradient

ជម្រាល CSS (CSS gradient)អនុញ្ញាតឱ្យអ្នកផ្លាស់ប្តូរដោយរលូនរវាងពណ៌ពីរជាក់លាក់។ កាលពីដើមអ្នកបានប្រើរូបភាពសម្រាប់បែបផែនទាំងនេះ។ ទោះជាយ៉ាងណា, ដោយប្រើជម្រាល CSS អ្នកអាចកាត់បន្ថយពេលវេលាទាញយកនិងប្រើប្រាស់កម្រិតបញ្ជូន។ លើសពីនេះទៀតធាតុដោយប្រើជម្រាល (gradient) ដែលមើលទៅល្អប្រសើរជាងមុននៅពេលដែលអ្នកពង្រីក ដោយសារតែជម្រាល (gradient) ត្រូវបានបង្កើតដោយកម្មវិធីមើលវេបសាយ (browser)។

CSS កំណត់ជម្រាល (gradient) ជាពីរប្រភេទ៖

  • លីនេអ៊ែរជម្រាល (linear gradient)  (ទៅក្រោម / ឡើងលើ / ឆ្វេង / ស្ដាំ / អង្កត់ទ្រូង)
  • ជម្រាលរង្វង់ (radial gradient) (កំណត់ដោយចំណុចកណ្ដាលរបស់ពួកគេ)

លីនេអ៊ែរជម្រាល (linear gradient)

ដើម្បីបង្កើតជម្រាលលីនេអ៊ែរមួយអ្នកត្រូវតែកំណត់ពណ៌យ៉ាងហោចណាស់ពីរ។ ពណ៌ទាំងនោះគឺជាពណ៌ដែលអ្នកចង់ផ្លាស់ប្តូរដោយរលូនដើម្បីបង្ហាញនៅក្នុងចំណោមពណ៌ទាំងពីរនោះ។ អ្នកអាចកំណត់ចំណុចចាប់ផ្តើមនិងទិសដៅមួយ (ឬមុំមួយ) រួមជាមួយនឹងបែបផែននៃជម្រាល។

Syntax

background: linear-gradient(direction, color-stop1, color-stop2, …);

លីនេអ៊ែរជម្រាល – កំពូលទៅបាត (នេះគឺជាលំនាំដើម)

ឧទាហរណ៍ខាងក្រោមបង្ហាញជម្រាលលីនេអ៊ែរដែលចាប់ផ្តើមនៅកំពូល។ វាចាប់ផ្តើមពីពណ៌ក្រហមផ្លាស់ប្តូរទៅពណ៌លឿង៖

css-gradient17

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-gradient1

លីនេអ៊ែរជម្រាល – ពីឆ្វេងទៅស្តាំ

ឧទាហរណ៍ខាងក្រោមបង្ហាញជម្រាលលីនេអ៊ែរដែលចាប់ផ្តើមពីឆ្វេង។ វាចាប់ផ្តើមពីពណ៌ក្រហមផ្លាស់ប្តូរទៅពណ៌លឿង៖

css-gradient12

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-gradient3

លីនេអ៊ែរជម្រាល – អង្កត់ទ្រូង

អ្នកអាចធ្វើឱ្យជម្រាលតាមអង្កត់ទ្រូងដោយបញ្ជាក់ពីទីតាំងចាប់ផ្តើមទាំងផ្ដេក (horizontal)និងបញ្ឈរ (vertical)។ ឧទាហរណ៍ខាងក្រោមបង្ហាញជម្រាលលីនេអ៊ែរដែលចាប់ផ្តើមនៅកំពូលខាងឆ្វេង (ហើយទៅខាងក្រោមផ្នែកខាងស្តាំ) ។ វាចាប់ផ្តើមពីពណ៌ក្រហមផ្លាស់ប្តូរទៅពណ៌លឿង៖

css-gradient13

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-gradient5

ការប្រើមុំ

ប្រសិនបើអ្នកចង់គ្រប់គ្រងបន្ថែមលើទិសដៅនៃជម្រាលនេះ អ្នកអាចកំណត់មុំមួយជំនួសឱ្យការកំណត់ទិសដៅដែលបានកំណត់ជាមុន (ទៅបាត, ទៅកំពូល, ទៅស្តាំ, ទៅឆ្វេង, ទៅស្ដាំផ្នែកខាងក្រោម -ល-) ។

Syntax

background: linear-gradient(angle, color-stop1, color-stop2);

មុំត្រូវបានបញ្ជាក់ថាជាមុំរវាងបន្ទាត់ផ្ដេក (horizontal line) និងបន្ទាត់ជម្រាល (gradient line)មួយ។ ឧទាហរណ៍ខាងក្រោមបង្ហាញពីរបៀបប្រើប្រាស់មុំនៅលើជម្រាលលីនេអ៊ែរ៖

css-gradient14

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-gradient7

ការប្រើប្រាស់ពណ៌ច្រើន

ឧទាហរណ៍ខាងក្រោមបង្ហាញជម្រាលលីនេអ៊ែរ (ពីកំពូលទៅបាត) ជាមួយនឹងពណ៌ជាច្រើន៖

css-gradient15

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-gradient9

ឧទាហរណ៍ខាងក្រោមបង្ហាញពីរបៀបដើម្បីបង្កើតជម្រាលលីនេអ៊ែរ (ពីឆ្វេងទៅស្ដាំ) ជាមួយនឹងសម្បុរឥន្ធនូនិងអត្ថបទ៖

css-gradient16

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-gradient11