For Android device For iOS device

កក្កដា

​បង្កើត​ចលនារីករួមដោយ​ប្រើ CSS3

កែ​សម្រួល​អត្ថបទឡើងវិញនៅខែ កក្កដា ឆ្នាំ ២០១៦

នៅ​ក្នុង​លេខនេះ​ទស្សនាវដ្ដី​អាន-ANT www.antkh.com នឹងលើកយកកូដ CSS 3 ដែល​ធ្វើការ​បង្កើត​ចលនា​ឲ្យ Menu យ៉ាង​ងាយស្រួល​ដូចទៅនឹង flash animation ដែរ ។

♦ កូដរបស់ HTML

​ជាដំបូង​យើងលើកយក HTML មក​បង្ហាញ​ជាមុនសិន៖

​សម្រាប់​បន្ទាត់ទី ៨ ដល់ ១២: គ្រាន់តែ​ជា​កំណត់​ចំណាំ​ដែល​បង្ហាញ​នៅលើ Web មានន័យថា​វាមិន support ជាមួយ browser IE ទេ ចំណែក​ឯនៅ​ក្នុង block head ជាកន្លែង​សម្រាប់​សរសេរ CSS ។

​ខាងក្រោម​នេះជាលិទ្ធផលនៃកូដ​ខាងលើ លិទ្ធផលនេះមាន​លក្ខណៈ​ធម្មតា​ដោយសារ​មិនទាន់​បាន​បន្ថែម CSS ទៅ​ឲ្យ HTML នោះ ។

♦ របៀប​បង្កើត​ឲមានចលនា

នៅ​ក្នុង CSS 3 អ្នកធ្វើអក្សរ​ឲ្យ​មានចលនាបាន​តាមរយៈ property របស់ CSS ថ្មីនេះ ។

Transition ជា property ថ្មីមួយទៀតរបស់ CSS3 ដែល​មាននាទី​សម្រាប់​កំណត់​ឲ្យ block ធ្វើចលនាពង្រីក បង្រួម​ជាមួយនឹង​ល្បឿន ទៅតាម​ចំនួននាទី​ដែល​អ្នកបាន​កំណត់​នៅ​ក្នុង property នោះ ។

Property នេះបានចែកជាបួនដូច​ខាងក្រោម ៖

-  Duration: ជា​រយៈពេល​ដែល transition ធ្វើការ​អាស្រ័យ​ទៅនឹងប្រវែង​ដែល​វាបានដកចាប់ពី​ចំណុច​ចាប់ផ្តើមទៅ​ចំណុច​បញ្ចប់ ។

-  Property: ជាទិសដៅ​សម្រាប់​ឲ្យ transition នេះ​ធ្វើការ ដែល​តម្លៃ​របស់វាអាចជា height និង width ។

-  Delay: ជា​រយៈពេល​ដែល transition ពន្យាពេលមុននឹង​ដំណើរ​ការ property ផ្សេងទៀត ។

-  Timing-Function: ជា property មួយ​សម្រាប់​កំណត់​នៅពេល​ដែល​យើងដក mouse ចេញ​ឲ្យ​វា ធ្វើការ​ដែល​មាន​តម្លៃ​ចំនួន ២ គឺ ease និង linear ។

​បង្កើត Menu ជាប្រអប់មានចលនា

​ខ្ញុំ​នឹង​បង្ហាញ​ពីការ​ប្រើ List សម្រាប់​ធ្វើ Menu ដូច​ខាងក្រោម ៖

នៅ​ក្នុង​កូដ​ខាងក្រោម​នេះ​ខ្ញុំ​បានលើកយក​ប្រភេទ​មួយនៃ List មក​ធ្វើជា​ប្រអប់ ។

នៅបន្ទាត់ទី ៨: Property list-style-type: none មានន័យថា​កំណត់​ឲ្យ list របស់យើងមិនមាន​បង្ហាញ​អ្វី​ទាំងអស់​នៅពីខាងមុខ ។

បន្ទាត់ទី ៩: សម្រាប់​ដាក់ border ជុំវិញប្រអប់​នីមួយ​ៗ ដែល​មាន​លក្ខណៈ​ជាបន្ទាត់ដិត កំរាស់ 1px និងមានពណ៌ខៀវ ។

បន្ទាត់ទី ១០: កំណត់​កម្ពស់​របស់ box នីមួយ​ៗ ដោយ​កំណត់​កម្ពស់ 25px ។

បន្ទាត់ទី ១១: កំណត់ padding លើក្រោមចំនួន 5px និង ឆ្វេង​ស្ដាំ 10px ។

បន្ទាត់ទី ១២: កំណត់​ពណ៌របស់ background មានពណ៌ទឹកប្រាក់ ។

​សម្រាប់​បន្ទាត់ទី ១៣: យើង​ប្រើ float ដើម្បី​ធ្វើការ​ទាញ​នូវ អ្វី​ដែល​នៅ​ខាងក្រោម​ឲ្យ​មក​នូវ​ខាង​ស្ដាំ ។

បន្ទាត់ទី ១៤: ដាក់គម្លាត​ឲ្យ​ប្រអប់​នីមួយ​ៗ ផ្នែក​ខាង​ស្ដាំ 5px ។

♦ កូដ​សម្រាប់ Box នីមួយៗ​នៅពេល Mouse Over

​ខាងក្រោម​នេះជា​កម្ពស់​ដែល​ត្រូវពង្រីក​នូវ​ពេល​ដែល​យើងយក Mouse ដាក់ពីលើវា ។

​បន្ទាប់ពី​យើង​សរសេរ CSS ខាងហើយយើងត្រូវយក CSS នោះដាក់ជាមួយ File HTML នៅ​ក្នុង block head ​ព្រោះ​ខាងក្រោម​នេះជាកូដ HTML ​វានឹង​បង្ហាញ​លក្ខណៈ​ជា bullet ​ដោយសារ​ក្នុង​នោះមានការ​ប្រើ list (ul) តែ​បន្ទាប់ពី​អ្នក បានហៅ CSS ចូលមក​ក្នុង file នេះ​វានឹង​បង្ហាញ​ជា​លក្ខណៈ menu ដូច​បង្ហាញ​ខាងលើ ។

​ចំណាំ​៖ កូដ​ខាងលើ​មិន​ដំណើរ​ការ ជាមួយ Internet Explorer នោះទេ ។

*** ដកស្រង់ចេញពី​ទស្សនាវដ្ដី​អាន-ANT ច្បាប់​ទី ២៨ ប្រចាំខែ កក្កដា ឆ្នាំ ២០១១

មតិ និង​យោបល់​ទៅលើ​អត្ថបទ​នេះ (តាម Facebook)

ខាងក្រោម​នេះ​ជា​យោបល់​ផ្សេងៗ​របស់​អ្នកទស្សនា