មេរៀនទី៥: បង្កើត Flip box ជាមួយនិង CSS


តើអ្នកទាំងអស់គ្នាធ្លាប់បង្កើត Flipbox ដែរឬទេ?តាមការសិក្សា សិស្សនិស្សិត និងអ្នករចនាគេហទំព័រ មួយចំនួនបានដឹងថាការបង្កើត Flip page ឬ Flipbox យើងអាចបង្កើតដោយសរសេវាជាមួយភាសា JavaScript ឬ CSS។ ខាងក្រោមនេះជាជំហាន និងឧទាហរណ៍សាមញ្ញមួយ នៃការបង្កើត :
ជំហានទីមួយ : យើងត្រូវបង្កើត Div ដែលមាន ID ឈ្មោះ Box នៅក្នុង tag

Testing


ជំហានទីពីរ : Apply CSS ទៅឲ្យ ID របស់ Div ដែលមានឈ្មោះ box
#box
{
background-color: #FFFFFF;  //ដាក់ពណ៌ឲ្យផ្ទៃប្រអប់
border: 1px solid #CCCCCC; // ដាក់ស៊ុំឲ្យប្រអប់
cursor: pointer; // ផ្លាស់ប្តូរទម្រង់ Cursor
height: 200px; // កំណត់ប្រវែងប្រអប់
width: 200px;// កំណត់ប្រវែងបណ្តយប្រអប់
​​​​ }
ជំហានទី៣: បង្កើត Event  mouse hover (ពេលជ្រលរ)លើDiv  ដែលមាន ID ឈ្មោះ box
#box:hover
{
border-bottom-left-radius:50% 30px;//ធ្វើឲ្យប្រអប់បត់ផ្នែកខាង       ឆ្វេងនៃផ្នែកខាងក្រោម។
box-shadow:-5px 10px 15px rgba(0, 0, 0, 0.25); //ដាក់
ស្រមោលឲ្យ Box
}
————–


Flip page



s



1