គន្លឹះងាយៗ ជាមួយ CSS3 Effect Zoom

CSS3 ជាកំណែប្រែចុងក្រោយគេមួយ ដែលជាភាសាប្រើសម្រាប់រចនា​គេហទំព័រ​ឲ្យមានភាពទាក់ទាញ និងស្រស់ស្អាត ។ លោកអ្នកពិតជា​មិនអាចធ្វើឲ្យ វ៉ិបសាយរបស់អ្នក ស្រស់ស្អាត និងដំណើរការល្អបានទេ ប្រសិនបើអ្នក មិនប្រើប្រាស់ CSS ។

ចំណាំ៖ ដើម្បីសាកល្បង CSS3 លោកអ្នកគ្រាន់តែដំណើរការ File HTML គឺជាការស្រេច។

លោកអ្នកអាចប្រើប្រាស់ CSS3 ជំនួស Javascript បានយ៉ាងងាយស្រួលបំផុត ដោយលោកអ្នកពុំចាំបាច់ មានចំណេះដឹង​ក្នុងការសរសេរកូដ ឬ Function អ្វីឡើយ ។ ប៉ុន្តែចំពោះ IE Browser មិនអាចគាំទ្រ បាននៅឡើយទេ ។

តោះ! សូមចាប់ផ្តើមជាមួយ សំបកអាយធី ឥឡូវនេះ៖

ជាដំបូងលោកអ្នកគ្រាន់តែ បង្កើត File CSS ឬអាចសរសេរនៅក្នុង File HTML ក៏បានដែរ ដែលស្ថិតនៅក្នុង Block tag head (<head>) រួចចម្លងកូដ ខាងក្រោម

<style type="text/css">

.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}

</style

សូមមើលការពន្យល់នៅក្នុង CSS comment /*……*/

បន្តមកទៀត លោកអ្នកគ្រាន់តែបំពេញ HTML Code ដូចខាងក្រោម៖

<div class="hovergallery">
<img src="coconut.jpg" />
<img src="sunbreakthrough.jpg" />
<img src="desert.jpg" />
<img src="sunflower.jpg" />
<img src="forest.jpg" />
<img src="duck.jpg" />
</div>
បញ្ជាក់៖ លោកអ្នកត្រូវមានរូបភាពគំរូ ដើម្បីអាចសាកល្បងនូវដំណើរការនេះបាន ហើយវាត្រូវស្ថិតនៅក្នុង Folder តែមួយ (លោកអ្នកអាច​ដាក់នៅ Folder ផ្សេងបាន តែត្រូវកែកូដត្រង់ <img src=/your_folder/img.jpg) ។

តែប៉ុន្នេះ លោកអ្នកនឹងទទួលបាន Effect ដ៏ស្អាត និងគួរឲ្យទាក់ទាញសម្រាប់បំពេញ​ក្នុងវ៉ិបសាយរបស់អ្នក ។

css3-zoom-effect

សូមមើលគំរូ និងលម្អិតនៅ ទីនេះ ។

អានថែមទៀត

របៀបលុប Malware ចេញពី WordPress Site

ដើម្បីបង្ការ និងបញ្ចៀស​ឲ្យបាន​នូវការវាយប្រហារ មកលើគេហទំព័រ​ ឬប្លក់​របស​លោកអ្នក មានច្រើនវិធី និងមិនជាពិបាកណាស់ណាទេ ។ លោកអ្នក​គ្រាន់តែ​ដឹង​ឲ្យបាន​ច្បាស់ នូវគន្លឹះសុវត្ថិភាព និងចន្លោះប្រហោង​មួយចំនួន ដែលលោកអ្នក​ត្រូវមាន​ការប្រុងប្រយ័ត្ន តែប៉ុណ្ណោះ។ ប្រសិនបើ​លោកអ្នក​ធ្វេស​ប្រហែស នឹង​បញ្ហា​នេះ គេហទំព័រ …

មាន ១មតិ

  1. បកប្រែបានល្អណាស់

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.