ពណ៌នៅក្នុង CSS
ពណ៌គឺជាផ្នែកសំខាន់បំផុតមួយក្នុងការរចនាគេហទំព័រ ។ CSS អនុញ្ញាតឲ្យយើងកំណត់ពណ៌ប្រើវិធីសាស្ត្រផ្សេងៗគ្នា ជាច្រើនប្រភេទដូចជា ឈ្មោះពណ៌, Hexadecimal (HEX), RGB, RGBA, HSL និង HSLA ។
១. ឈ្មោះនៃពណ៌ (Color Names)
ឈ្មោះនៃពណ៌គឺជាវិធីដែលសាមញ្ញបំផុតក្នុងការកំណត់ពណ៌ ។ HTML/CSS គាំទ្រឈ្មោះពណ៌ស្ដង់ដារចំនួន១៤០ប្រភេទដូចជា red, blue, green, black, white, yellow, orange ជាដើម ។
គុណសម្បត្តិ CSS ដែលប្រើពណ៌
color- កំណត់ពណ៌អត្ថបទbackground-color- កំណត់ពណ៌ផ្ទៃខាងក្រោយborder-color- កំណត់ពណ៌គែម
ចំណាំ: ឈ្មោះពណ៌មានចំនួនកំណត់ ហើយមិនអាចបង្កើតពណ៌តាមចិត្តបានទេ ។ ប្រើវិធីផ្សេងសំរាប់ពណ៌កាន់តែច្រើន ។
២. HEX Color (Hexadecimal)
HEX color គឺជាតម្លៃពណ៌ដែលប្រើលេខក្នុងប្រព័ន្ធគោល១៦ (hexadecimal) ដែលមានទម្រង់ #RRGGBB ។ វាជាវិធីដែលពេញនិយមបំផុតក្នុងការកំណត់ពណ៌ ។
រចនាសម្ព័ន្ធនៃ HEX
- ចាប់ផ្តើមដោយសញ្ញា
# - តាមដោយលេខ ៦ខ្ទង់ (0-9, A-F)
- ២ខ្ទង់ដំបូង = Red (RR)
- ២ខ្ទង់កណ្តាល = Green (GG)
- ២ខ្ទង់ចុងក្រោយ = Blue (BB)
ឧទាហរណ៍: #FF0000 = ក្រហម, #00FF00 = បៃតង, #0000FF = ខៀវ, #000000 = ខ្មៅ, #FFFFFF = ស
HEX ខ្លី (3 ខ្ទង់)
នៅពេលដែលគូខ្ទង់នីមួយៗដូចគ្នា អាចសរសេរខ្លីបាន ។
#FF0000 = #F00, #00FF00 = #0F0, #0000FF = #00F
៣. RGB Color
RGB color ប្រើតម្លៃ Red, Green, Blue ដែលមានទម្រង់ rgb(red, green, blue) ។ តម្លៃនីមួយៗអាចពី ០ ដល់ ២៥៥ ។
រចនាសម្ព័ន្ធ RGB
- ចាប់ផ្តើមដោយ
rgb( - លេខទី១ = តម្លៃ Red (០-២៥៥)
- លេខទី២ = តម្លៃ Green (០-២៥៥)
- លេខទី៣ = តម្លៃ Blue (០-២៥៥)
- បិទដោយ
)
rgb(255, 0, 0) = ក្រហម, rgb(0, 255, 0) = បៃតង, rgb(0, 0, 255) = ខៀវ
៤. RGBA Color (RGB + Alpha)
RGBA ដូចនឹង RGB តែមានបន្ថែម Alpha channel សំរាប់កំណត់ភាពថ្លា (transparency) ។ Alpha មានតម្លៃពី ០.០ (ថ្លាទាំងស្រុង) ដល់ ១.០ (មិនថ្លា) ។
រចនាសម្ព័ន្ធ RGBA
- ទម្រង់:
rgba(red, green, blue, alpha) - Red, Green, Blue: ០-២៥៥
- Alpha: ០.០-១.០ (ឬ ០%-១០០%)
ចំណាំ: RGBA ពិសេសសំរាប់បង្កើតស្រទាប់ដែលថ្លា (overlay) និងបង្កើតផលប៉ះពាល់គ្នា (blend effects) ។
៥. HSL Color
HSL color ប្រើ Hue (លាន់ពណ៌), Saturation (ភាពឆ្អែត), Lightness (ភាពភ្លឺ) ។ វាងាយស្រួលជាងក្នុងការកែពណ៌ឲ្យភ្លឺជាង ឬងងឹតជាង ។
រចនាសម្ព័ន្ធ HSL
- ទម្រង់:
hsl(hue, saturation, lightness) - Hue (លាន់ពណ៌): ០-៣៦០ អង្សាលើវង់ពណ៌
- ០° ឬ ៣៦០° = ក្រហម
- ១២០° = បៃតង
- ២៤០° = ខៀវ
- Saturation (ភាពឆ្អែត): ០%-១០០%
- ០% = ពណ៌ប្រផេះ
- ១០០% = ពណ៌ពេញលេញ
- Lightness (ភាពភ្លឺ): ០%-១០០%
- ០% = ខ្មៅ
- ៥០% = ពណ៌ធម្មតា
- ១០០% = ស
ការប្រើ Hue ផ្សេងៗ
៦. HSLA Color (HSL + Alpha)
HSLA ដូចនឹង HSL តែមានបន្ថែម Alpha channel សំរាប់កំណត់ភាពថ្លា ។
រចនាសម្ព័ន្ធ HSLA
- ទម្រង់:
hsla(hue, saturation, lightness, alpha) - Hue: ០-៣៦០
- Saturation: ០%-១០០%
- Lightness: ០%-១០០%
- Alpha: ០.០-១.០
៧. ការប្រៀបធៀបប្រភេទពណ៌
| ប្រភេទ | ឧទាហរណ៍ | គុណសម្បត្តិ | គុណវិបត្តិ |
|---|---|---|---|
| ឈ្មោះពណ៌ | red |
ងាយចាំ, ងាយប្រើ | ជម្រើសមានកំណត់ |
| HEX | #FF0000 |
ពេញនិយម, ខ្លី | ពិបាកអាន |
| RGB | rgb(255, 0, 0) |
ងាយយល់ | វែងជាង HEX |
| RGBA | rgba(255, 0, 0, 0.5) |
មានភាពថ្លា | មិនគាំទ្រក្នុង IE8 |
| HSL | hsl(0, 100%, 50%) |
ងាយកែភាពភ្លឺ | មិនពេញនិយម |
| HSLA | hsla(0, 100%, 50%, 0.5) |
ងាយកែ + មានភាពថ្លា | មិនគាំទ្រក្នុង IE8 |
៨. ឧទាហរណ៍ប្រើប្រាស់ជាក់ស្តែង
ពាក្យសំខាន់ៗ
- Color Names: ងាយស្រួលប្រើ តែមានជម្រើសកំណត់
- HEX: វិធីពេញនិយមបំផុត ខ្លីនិងមានពណ៌គ្រប់ប្រភេទ
- RGB/RGBA: ងាយយល់ RGBA មានភាពថ្លា
- HSL/HSLA: ងាយក្នុងការកែភាពភ្លឺនិងភាពឆ្អែត
- ប្រើពណ៌ដែលសមស្របជាមួយរចនាគេហទំព័រ
- ពណ៌ថ្លា (transparency) ល្អសំរាប់ស្រទាប់ដែលគ្របលើគ្នា