01 នៃ 04
បង្កើតបណ្តោះអាសន្នបន្ទាត់កាត់ក្តារចុចជាមួយ CSS3
បណ្តែតលីនេអ៊ែរ
ប្រភេទជម្រាលទូទៅបំផុតដែលអ្នកនឹងឃើញគឺជាពណ៌ជម្រាលលីនេអ៊ែរនៃពណ៌ពីរ។ នេះមានន័យថាជម្រាលនឹងផ្លាស់ប្តូរត្រង់បន្ទាត់ត្រង់ផ្លាស់ប្តូរបន្តិចបន្តួចពីពណ៌ទី 1 ទៅទី 2 តាមបន្ទាត់នោះ។ រូបភាពនៅលើទំព័រនេះបង្ហាញពីជម្រាលពីឆ្វេងទៅស្តាំសាមញ្ញលេខ # 999 (ពណ៌ប្រផេះចាស់) ទៅ #fff (ពណ៌ស) ។
ជម្រាលលីនេអ៊ែរគឺងាយស្រួលបំផុតក្នុងការកំណត់និងមានការគាំទ្របំផុតនៅក្នុងកម្មវិធីរុករក។ អ័ក្សតំរែតំរង់ CSS3 ត្រូវបានគាំទ្រនៅក្នុងប្រព័ន្ធប្រតិបត្តិការ Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ និង Safari 4+ ។ កម្មវិធី Internet Explorer អាចបន្ថែមជម្រាលដោយប្រើតម្រងនិងគាំទ្រពួកវាត្រឡប់ទៅ IE 5.5 ។ នេះមិនមែនជា CSS3 ទេប៉ុន្តែវាជាជម្រើសសម្រាប់ភាពឆបគ្នារវាងកម្មវិធីរុករក។
ពេលអ្នកកំណត់ជម្រាលមួយអ្នកត្រូវកំណត់អ្វីខុស ៗ គ្នាច្រើន:
- ប្រភេទនៃពណ៌ជម្រាលវាជា - លីនេអ៊ែរឬកាំរស្មី
- កន្លែងដែលជម្រាលគួរតែចាប់ផ្តើម
- កន្លែងដែលជម្រាលគួរឈប់
- ពណ៌អ្វីដែលនៅក្នុងជម្រាលនិងកន្លែងដែលពួកគេគួរចាប់ផ្តើមនិងបញ្ឈប់
ដើម្បីកំណត់ជម្រាលលីនេអ៊ែរដោយប្រើ CSS3 អ្នកសរសេរ:
បន្ទាត់លីនេអ៊ែរ ( មុំ ឬ ចំហៀងឬជ្រុង ឈប់ ពណ៌បញ្ឈប់ពណ៌ )
- ដំបូងអ្នកកំណត់ប្រភេទជម្រាលដែលមានឈ្មោះ បន្ទាត់ក ណ្តាល។
- បន្ទាប់មកអ្នកកំណត់ចំណុចចាប់ផ្តើមនិងបញ្ឈប់នៃពណ៌ជម្រាលតាមមធ្យោបាយមួយក្នុងចំណោមពីរយ៉ាង: មុំនៃបន្ទាត់ជាដឺក្រេពី 0 ដល់ 359 ដោយ 0 ដឺក្រេចង្អុលត្រង់។ ឬជាមួយមុខងារ "ចំហៀងឬជ្រុង" ដូចជាឆ្វេង, ស្ដាំ, បាតនិងកំពូល។ ទាំងនេះនឹងត្រូវបានពន្យល់លម្អិតបន្ថែមទៀតនៅទំព័របន្ទាប់។ ប្រសិនបើអ្នកទុកវាចេញជម្រាលនឹងហូរពីកំពូលទៅបាតនៃធាតុ។
- បន្ទាប់មកអ្នកកំណត់ពណ៌ឈប់។ អ្នកកំណត់ពណ៌ឈប់ដោយប្រើលេខកូដនិងភាគរយ។ ភាគរយប្រាប់កម្មវិធីរុករកដែលនៅលើបន្ទាត់ដើម្បីចាប់ផ្តើមឬបញ្ចប់ដោយពណ៌នោះ។ លំនាំដើមគឺដើម្បីដាក់ពណ៌ស្មើៗគ្នាតាមបន្ទាត់។ អ្នកនឹងស្វែងយល់បន្ថែមអំពីការឈប់ពណ៌នៅទំព័រទី 3 ។
ដូច្នេះដើម្បីកំណត់ជម្រាលខាងលើជាមួយ CSS3 អ្នកសរសេរ:
បន្ទាត់លីនេអ៊ែរ (ឆ្វេង # 999999 0%, #ffffff 100%);
និងដើម្បីកំណត់វាជាផ្ទៃខាងក្រោយនៃ DIV អ្នកសរសេរ:
div {
ផ្ទៃខាងក្រោយ - រូបភាព: បន្ទាត់លីនេអ៊ែរ (ខាងឆ្វេង, # 999999 0%, #ffffff 100%;
}
ផ្នែកបន្ថែមនៃកម្មវិធីរុករកសម្រាប់ CSS3 Linear Gradients
ដើម្បីទទួលបានកម្រិតពណ៌របស់អ្នកដើម្បីធ្វើការឆ្លងកម្មវិធីរុករកអ្នកត្រូវប្រើផ្នែកបន្ថែមកម្មវិធីរុករកសម្រាប់កម្មវិធីរុករកភាគច្រើននិងតម្រងសម្រាប់ Internet Explorer 9 និងទាបជាងនេះ (ពិតណាស់ 2 តម្រង) ។ ទាំងអស់នេះយកធាតុដូចគ្នាដើម្បីកំណត់ជម្រាលរបស់អ្នក (លើកលែងតែអ្នកអាចកំណត់ជម្រាល 2 ពណ៌នៅក្នុង IE ប៉ុណ្ណោះ) ។
តម្រងនិងផ្នែកបន្ថែម Microsoft Internet Explorer គឺជាការលំបាកបំផុតក្នុងការគាំទ្រពីព្រោះអ្នកត្រូវការបន្ទាត់ខុសគ្នា 3 ដើម្បីគាំទ្រកំណែកម្មវិធីរុករកផ្សេងទៀត។ ដើម្បីទទួលបានពណ៌ប្រផេះខាងលើទៅជម្រាលពណ៌សអ្នកនឹងសរសេរ:
/ * IE 5.5-7 * /
តម្រង: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
msgstr "តម្រង: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-linear-gradient (ឆ្វេង, # 999999 0%, #ffffff 100%);
ផ្នែកបន្ថែមរបស់ Mozilla - The -moz-extension ដំណើរការដូចជាលក្ខណសម្បត្តិ CSS3 ដោយប្រើផ្នែកបន្ថែម -moz ។ ដើម្បីទទួលបានពណ៌ជម្រាលខាងលើសម្រាប់ Firefox សូមសរសេរ:
-moz-linear-gradient (ឆ្វេង, # 999999 0%, #ffffff 100%);
ផ្នែកបន្ថែមល្ខោនអូប៉េរ៉ា - ផ្នែកបន្ថែម - បន្ថែម - បន្ថែម gradient ទៅកាន់ Opera 11.1+ ។ ដើម្បីទទួលបានពណ៌ខៀវខាងលើចូរសរសេរថា:
-o-linear-gradient (ឆ្វេង, # 999999 0%, #ffffff 100%);
ផ្នែកបន្ថែម Webkit -The-webbit-extension ដំណើរការយ៉ាងច្រើនដូចជាលក្ខណសម្បត្តិ CSS3 ។ ដើម្បីកំណត់ជម្រាលខាងលើសម្រាប់ Safari 5.1+ ឬ Chrome 10+ អ្នកសរសេរ:
-webkit-linear-gradient (ឆ្វេង, # 999999 0%, #ffffff 100%);
មានកំណែចាស់នៃផ្នែកបន្ថែម Webkit ដែលធ្វើការជាមួយ Chrome 2+ និង Safari 4+ ផងដែរ។ នៅក្នុងនោះអ្នកកំណត់ប្រភេទជម្រាលជាតម្លៃជាជាងឈ្មោះអចលនទ្រព្យ។ ដើម្បីទទួលពណ៌ប្រផេះទៅជម្រាលពណ៌សជាមួយផ្នែកបន្ថែមនេះសូមសរសេរ:
- ខៀវស្រាល (លីនេអ៊ិ, កំពូលខាងឆ្វេង, កំពូលស្ដាំ, ឈប់ពណ៌ (0%, # 999999), ពណ៌បញ្ឈប់ (100%, # ffffff));
ក្រម CSS CSS ដែលស្រទាប់ស្រទាប់ពេញ CSS3
សម្រាប់ការគាំទ្រកម្មវិធីរុករកឆ្លងកាត់ពេញលេញដើម្បីទទួលបានពណ៌ប្រផេះដែលមានពណ៌ខៀវខាងលើខាងលើដំបូងអ្នកគួរតែបញ្ចូលពណ៌ដ៏រឹងមាំជំនួសសម្រាប់កម្មវិធីរុករកដែលមិនគាំទ្រជម្រាលហើយធាតុចុងក្រោយគួរតែជារចនាប័ទ្ម CSS3 សម្រាប់កម្មវិធីរុករកដែលមានលក្ខណៈពេញលេញ។ ដូច្នេះអ្នកសរសេរ:
ផ្ទៃខាងក្រោយ: # 999999;
ផ្ទៃខាងក្រោយ: -moz-linear-gradient (ឆ្វេង, # 999999 0%, #ffffff 100%);
ផ្ទៃខាងក្រោយ: -webkit-gradient (លីនេអ៊ិ, កំពូលខាងឆ្វេង, កំពូលស្ដាំ, ពណ៌បញ្ឈប់ (0%, # 999999), ពណ៌បញ្ឈប់ (100%, # ffffff));
ផ្ទៃខាងក្រោយ: -webkit-linear-gradient (ឆ្វេង, # 999999 0%, #ffffff 100%);
ផ្ទៃខាងក្រោយ: -o-linear-gradient (ឆ្វេង, # 999999 0%, #ffffff 100%);
ផ្ទៃខាងក្រោយ: -ms-linear-gradient (ឆ្វេង, # 999999 0%, #ffffff 100%);
តម្រង: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
ផ្ទៃខាងក្រោយ: បន្ទាត់លីនេអ៊ែរ (ឆ្វេង, # 999999 0%, #ffffff 100%);
ទំព័របន្ទាប់នៅក្នុងការបង្រៀននេះពន្យល់ពីផ្នែកនៃពណ៌ជម្រាលលម្អិតបន្ថែមហើយទំព័រចុងក្រោយចង្អុលទៅឧបករណ៍ដែលជាវិធីដ៏ល្អបំផុតដើម្បីបង្កើតជម្រាល CSS3 ដោយស្វ័យប្រវត្តិ។
មើលបន្ទាត់ជម្រាលលីនេអ៊ែរនៅក្នុងសកម្មភាពដោយប្រើតែ CSS ។
02 នៃ 04
ការបង្កើតជម្រាលអង្កត់ទ្រូង - មុំនៃជម្រាល
ចំណុចចាប់ផ្តើមនិងបញ្ឈប់កំណត់មុំរបស់ពណ៌ជម្រាល។ ជម្រាលលីនេអ៊ែរភាគច្រើនគឺពីកំពូលទៅបាតឬពីឆ្វេងទៅស្តាំ។ ប៉ុន្តែវាគឺអាចធ្វើទៅបានដើម្បីបង្កើតជម្រាលមួយដែលផ្លាស់ទីនៅលើបន្ទាត់អង្កត់ទ្រូង។ រូបភាពនៅលើទំព័រនេះបង្ហាញពីជម្រាលសាមញ្ញដែលផ្លាស់ទីក្នុងមុំ 45 ដឺក្រេនៅលើរូបភាពពីស្តាំទៅឆ្វេង។
មុំដើម្បីកំណត់បន្ទាត់ជម្រាល
មុំគឺជាបន្ទាត់នៅលើរង្វង់ស្រមោលនៅកណ្តាលនៃធាតុ។ 0deg ចង្អុលពិន្ទុ 90deg ទៅខាងស្តាំ 180deg ចង្អុលចុះនិង 270deg ចង្អុលទៅខាងឆ្វេង។ អ្នកអាចកំណត់មុំណាមួយពី 0 ទៅ 359 ដឺក្រេ។
អ្នកគួរកត់សម្គាល់ថានៅក្នុងជ្រុងមួយមុំ 45 ដឺក្រេផ្លាស់ទីពីជ្រុងខាងឆ្វេងឆ្វេងទៅខាងស្តាំខាងស្តាំប៉ុន្តែក្នុងចតុកោណចំនុចចាប់ផ្តើមនិងចំនុចខាងក្រៅគឺនៅខាងក្រៅរូបរាងដូចដែលអ្នកអាចឃើញនៅក្នុងរូបភាព។
វិធីសាមញ្ញបំផុតដើម្បីកំណត់ជម្រាលអង្កត់ទ្រូងគឺកំណត់ជ្រុងមួយដូចជាកំពូលស្តាំនិងជម្រាលនឹងផ្លាស់ទីពីជ្រុងទៅជ្រុងផ្ទុយ។ អ្នកអាចកំណត់ពាក្យចាប់ផ្ដើមដែលមានពាក្យគន្លឹះដូចខាងក្រោម:
- កំពូល
- សិទ្ធិ
- បាត
- ឆ្វេង
- កណ្តាល
ហើយពួកវាអាចត្រូវបានបញ្ចូលគ្នាដើម្បីឱ្យជាក់លាក់ជាងដូចជា:
- កំពូលស្តាំ
- កំពូលឆ្វេង
- មជ្ឈមណ្ឌលកំពូល
- នៅខាងស្ដាំផ្នែកខាងក្រោម
- បាតឆ្វេង
- bottom center
- ខាងស្តាំ
- កណ្តាលឆ្វេង
នេះជា CSS សម្រាប់ពណ៌ជម្រាលស្រដៀងទៅនឹងរូបភាពមួយដែលមានពណ៌ក្រហមទៅសដែលផ្លាស់ប្តូរពីជ្រុងខាងស្តាំខាងលើទៅខាងក្រោមផ្នែកខាងឆ្វេង:
ផ្ទៃខាងក្រោយ: ## 901A1C;
រូបភាពផ្ទៃខាងក្រោយ: -moz-linear-gradient (ខាងស្ដាំ, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradient (លីនេអ៊ែរ, កំពូលស្ដាំ, បាតខាងឆ្វេង, ឈប់ពណ៌ (0, # 901A1C), ពណ៌-stop (1, #FFFFFF));
ផ្ទៃខាងក្រោយ: -webkit-linear-gradient (ខាងស្ដាំ, # 901A1C 0%, #ffffff 100%);
ផ្ទៃខាងក្រោយ: -o-linear-gradient (ខាងស្តាំ, # 901A1C 0%, #ffffff 100%);
ផ្ទៃខាងក្រោយ: -ms-linear-gradient (ខាងស្ដាំ, # 901A1C 0%, #ffffff 100%);
ផ្ទៃខាងក្រោយ: លីនេអ៊ែរស្រាល (ខាងស្ដាំ, # 901A1C 0%, #ffffff 100%);
អ្នកប្រហែលជាបានកត់សម្គាល់ឃើញថាគ្មានតម្រង IE នៅក្នុងឧទាហរណ៍នេះទេ។ នោះគឺដោយសារតែ IE អនុញ្ញាតតែពីរប្រភេទនៃតម្រង: ពីលើចុះក្រោម (លំនាំដើម) និងពីឆ្វេងទៅស្តាំ (ជាមួយប្តូរ GradientType = 1) ។
មើលបន្ទាត់ជម្រាលបន្ទាត់អង្កត់ទ្រូងនេះក្នុងសកម្មភាពដោយប្រើតែ CSS ។
03 នៃ 04
ពណ៌ឈប់
ជាមួយនឹងជម្រាលបន្ទាត់លីនុច CSS3 អ្នកអាចបន្ថែមពណ៌ច្រើនទៅជម្រាលរបស់អ្នកដើម្បីបង្កើតបែបផែនព្រិលសូម្បីតែ។ ដើម្បីបន្ថែមពណ៌ទាំងនេះអ្នកបន្ថែមពណ៌បន្ថែមទៅចុងនៃទ្រព្យរបស់អ្នកដែលបំបែកដោយសញ្ញាក្បៀស។ អ្នកគួរតែបញ្ចូលកន្លែងណាដែលនៅលើបន្ទាត់ដែលពណ៌នឹងចាប់ផ្តើមឬបញ្ចប់ផងដែរ។
តម្រងកម្មវិធី Internet Explorer គាំទ្រការឈប់ពណ៌ពីរប៉ុណ្ណោះដូច្នេះនៅពេលដែលអ្នកបង្កើតជម្រាលនេះអ្នកគួរតែបញ្ចូលតែពណ៌ទីមួយនិងទីពីរដែលអ្នកចង់បង្ហាញប៉ុណ្ណោះ។
នេះជា CSS សម្រាប់ពណ៌ជម្រាល 3 ពណ៌ខាងលើ:
ផ្ទៃខាងក្រោយ: #ffffff;
ផ្ទៃខាងក្រោយ: -moz-linear-gradient (ឆ្វេង, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
ផ្ទៃខាងក្រោយ: -webkit-gradient (លីនេអ៊ិ, កំពូលខាងឆ្វេង, កំពូលស្តាំ, ពណ៌បញ្ឈប់ (0%, # ffffff), ពណ៌បញ្ឈប់ (51%, # 901A1C), ពណ៌បញ្ឈប់ (100%, # ffffff));
ផ្ទៃខាងក្រោយ: -webkit-linear-gradient (ឆ្វេង, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
background: -o-linear-gradient (ឆ្វេង, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ផ្ទៃខាងក្រោយ: -ms-linear-gradient (ឆ្វេង, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
តម្រង: ។ : DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
ផ្ទៃខាងក្រោយ: បន្ទាត់លីនេអ៊ែរ (ឆ្វេង #ffffff 0%, # 901A1C 51%, # ffffff 100%);
សូមមើលពណ៌ជម្រាលលីនេអ៊ែរនេះជាមួយនឹងការឈប់ពណ៌ចំនួនបីនៅក្នុងសកម្មភាពដោយប្រើតែ CSS ។
04 នៃ 04
ធ្វើឱ្យអគារល្អប្រសើរជាងមុន
មានតំបន់ពីរដែលខ្ញុំសូមណែនាំសម្រាប់ជួយអ្នកក្នុងការបង្កើតជម្រាលពួកគេម្នាក់ៗមានគុណសម្បត្តិនិងគុណវិបត្តិចំពោះពួកគេខ្ញុំមិនទាន់រកឃើញអ្នកសាងសង់ជម្រាលដែលធ្វើអ្វីៗគ្រប់យ៉ាងនៅឡើយទេ។
កម្មវិធីបង្កើតក្រាហ្វិចជា Ultimate CSS
ម៉ាស៊ីនភ្លើងពណ៌ជម្រាលនេះមានប្រជាប្រិយភាពខ្លាំងណាស់ពីព្រោះវាដំណើរការនៅក្នុងលក្ខណៈស្រដៀងគ្នាទៅនឹងអ្នកសាងសង់ជម្រាលក្នុងកម្មវិធីដូចជា Photoshop ជាដើម។ ខ្ញុំក៏ចូលចិត្តវាដែរព្រោះវាផ្តល់ឱ្យអ្នកនូវកន្ទុយ CSS ទាំងអស់មិនត្រឹមតែ Webkit និង Mozilla ទេ។ បញ្ហាជាមួយម៉ាស៊ីនភ្លើងនេះគឺថាវាគាំទ្រតែពណ៌ជម្រាលផ្ដេកនិងបញ្ឈរប៉ុណ្ណោះ។ ប្រសិនបើអ្នកចង់ធ្វើជម្រាលអង្កត់ទ្រូងអ្នកត្រូវទៅម៉ាស៊ីនភ្លើងផ្សេងទៀតដែលខ្ញុំសូមណែនាំ។
តម្រង CSS3 Gradient
ម៉ាស៊ីនភ្លើងនេះបានធ្វើឱ្យខ្ញុំយល់បានតិចជាងមុនប៉ុន្តែវាគាំទ្រការផ្លាស់ប្តូរទិសដៅទៅអង្កត់ទ្រូង។
ប្រសិនបើអ្នកដឹងអំពីម៉ាស៊ីនភ្លើងប្រភេទ CSS ផ្សេងទៀតដែលអ្នកចូលចិត្តជាងនេះសូម ឱ្យយើងដឹង ។