តើអ្នកទាំងអស់គ្នាធ្លាប់បង្កើត Flipbox ដែរឬទេ?
តាមការសិក្សា សិស្សនិស្សិត និងអ្នករចនាគេហទំព័រ មួយចំនួនបានដឹងថាការបង្កើត Flip page ឬ Flipbox យើងអាចបង្កើតដោយសរសេវាជាមួយភាសា JavaScript ឬ CSS។
ថ្ងៃនេះ Expert Training Center បានលើកយកកំណាត់កូដដែលប្រើសម្រាប់បង្កើត Flip box មកបង្ហាញមិត្តអ្នកអាន។
ខាងក្រោមនេះជាជំហាន និងឧទាហរណ៍សាមញ្ញមួយនៃការបង្កើត :
ជំហានទីមួយ : យើងត្រូវបង្កើត 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
}
——————————————————————————-
Full code:
|
<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>
|
Result
0 comments