មេរៀនទី៥: Flip box ជាមួយ CSS

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

តើអ្នកទាំងអស់គ្នាធ្លាប់បង្កើត Flipbox ដែរឬទេ?តាមការសិក្សា សិស្សនិស្សិត និងអ្នករចនាគេហទំព័រ មួយចំនួនបានដឹងថាការបង្កើត Flip page ឬ Flipbox យើងអាចបង្កើតដោយសរសេវាជាមួយភាសា JavaScript ឬ CSS។ ខាងក្រោមនេះជាជំហាន និងឧទាហរណ៍សាមញ្ញមួយ នៃការបង្កើត :
ជំហានទីមួយ : យើងត្រូវបង្កើត Div ដែលមាន ID ឈ្មោះ Box នៅក្នុង <Body> tag
<body>
<div id=”box”> Testing
</div>
</body>
ជំហានទីពីរ : 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
}
————–
<html>
<head>
<title>Flip page </title>
<style>
body{background-color:#F4F4F4;}
#box{background-color: #FFFFFF;
border: 1px solid #CCCCCC;
cursor: pointer;
height: 200px;
width: 200px;}
#box:hover{border-bottom-left-radius:50% 30px;
box-shadow:-5px 10px 15px rgba(0, 0, 0, 0.25);
}
</style>
</head>
<body>
<div id=”box”>s
</div>
</body>
1———————————————————————–
មជ្ឈមណ្ឌល អាយធី ខេប៊ូ-IT CAMBO
បង្កើតកម្មវិធីសម្រាប់ក្រុមហ៊ុន អង្កការ ក្នុងតម្លៃសមរម្យ:

–     រចនាវ៉ិបសាយ & Hosting គ្រប់គ្រងក្រុមហ៊ុន…
–     បង្កើតកម្មវិធីគ្រប់គ្រងទិន្នន័យ គ្រប់គ្រងស្តុក លក់ទំនិញ
–     ដំឡើងប្រព័ន្ធ ណែតវឺក Networking និងសេវាជួសជុលកុំព្យូទ័រ
www.itcambo.com

កម្មវិធីសិក្សាបើកវគ្គខ្លី(សិស្សចាប់ពី ១០ឡើងទៅ)
–  វគ្គរចនាវ៉ិបសាយ HTML,CSS, Javascript, PHP, ASP.NET
–  វគ្គដំឡើងកុំព្យូទ័រណែតវឺក Networking
–   វគ្គជួសជុលកុំព្យូទ័រ Computer Repairing
–   វគ្គសរសេរកម្មវិធីលើ iOS (កម្មវិធី iPhone, iPAD)
ទំនាក់ទំ​នង 0977778647-077778647-070778647
Email: chhunnan@gmail.com
Chat: yahoo, skype: chhunnan
www.itcambo.com
ITCAMBO-NEW