គន្លឹះពិសេសៗ ជាមួយ CSS3 Hover

មួយរយៈនេះ សំបុកអាយធី និយមលើកយកអត្ថបទ ដែលទាក់ទងនឹង Style CSS មកជម្រាបជូន ដោយសារ​តែ​ការបង្កើត​គេហទំព័រ ទាមទារជាចាំបាច់នូវ CSS ដើម្បីបន្ថែម និងលើករូបរាង ព្រមទាំងទាក់ទាញ​អ្នកទស្សនា ឲ្យចង់មើល ឬចង់បានគំរូតាម ជាដើម ។ ថ្ងៃនេះ​សំបុកអាយធី នឹងបន្តលើកយក​ CSS3 មកធ្វើការបង្ហាញជូន ដែលអាចមាននាទីជំនួស JQuery បាន ដូចខាងក្រោម៖

ចំណាំ៖ ដើម្បីអាចសាកល្បង Style ទាំងនេះបាន លោកអ្នកត្រូវប្រើវាផ្គួបជាមួយ HTML ។

ក. ការដាក់ស្រមោលលើប្រអប់ (Box Shadow)
div.shadow {
	width: 300px;
	margin: 20px;
	border: 1px solid #ccc;
	padding: 10px;
	}

div.shadow:hover {
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	}
box-shadow
ខ. ការកំណត់ភាពច្បាស់ (Opacity)
img.opacity {
	opacity: 0.5;
	filter: alpha(opacity=50);
	}	

img.opacity:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	}

img-hover

ហើយប្រសិនបើ​លោកអ្នក ចង់ឲ្យវាធ្វើការ Smooth ល្អនោះ សូមវាយកូដ CSS ដូចក្រោម

ចំណាំ៖ វិធីនេះ អាចដំណើរការបាន​ជាមួយ Webkit Browsers ដូចជា Chrome និង​ Safari តែប៉ុន្នោះ ។

img.opacity {
	opacity: 0.5;
	filter: alpha(opacity=50);
 	-webkit-transition: opacity 1s linear;
	}	

img.opacity:hover {
	opacity: 1;
	filter: alpha(opacity=100);
 	-webkit-transition: opacity 1s linear;
	}

 សំបុកអាយធី នឹងបន្តលើកយកអត្ថបទ ទាក់ទងនឹង Style មកបង្ហាញជូន​ថែមទៀត!

អានថែមទៀត

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

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

Leave a Reply