ondragstart="return false" onselectstart="return false" oncopy="return false" oncut="return false"ตัวอย่าง
<body ondragstart="return false" onselectstart="return false" oncopy="return false" oncut="return false" >
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
Friday, October 16, 2015
Disable Copy/Paste - หาก Copy ห้ามเลือก ห้ามคลิกขวา ในหน้าเว็บ
แทรกโค๊ดด้านล่างใน Tag body หรือ Tag อื่นๆที่ไม่ต้องการให้ Copy หรือคลิกขวา
Friday, April 17, 2015
Center and crop thumbnails with CSS ครอปรูปภาพด้วย css
CSS
ตัวอย่างการใช้งาน
Credit : http://jonathannicol.com/blog/2014/06/16/centre-crop-thumbnails-with-css/
.thumbnail {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.thumbnail img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
width: 100%;
height: auto;
}
ตัวอย่างการใช้งาน
<div class="thumbnail"> <img src="landscape-img.jpg" alt="Image" /> </div> <div class="thumbnail"> <img src="portrait-img.jpg" class="portrait" alt="Image" /> </div>
Credit : http://jonathannicol.com/blog/2014/06/16/centre-crop-thumbnails-with-css/
Thursday, April 16, 2015
CSS ข้อความซ้อนบนรูปภาพ
<style type="text/css">
.holder_wrap{
position:relative;
margin:auto;
display:block;
height:120px; /* กำหนดความสูงส่วนพื้นที่คลุมเนื้อหาทั้งหมด */
}
.holder_wrap_img{
position:absolute;/* กำหนดการจัดตำแหน่งส่วนพื้นที่คลุมเนื้อหารุปและข้อความซ้อนทับ */
}
.holder_wrap_img img{
position:relative; /* กำหนดการจัดตำแหน่งของรูป */
}
/* css ซ้อนทับ ชิดขอบบน */
.inner_position_top{
position:absolute;
display:block;
background-color:#CC99FF;
height:50px; /* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ */
width:100%; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
top:0px; /* css กำหนดชิดด้านบน */
z-index:999;
}
/* css ซ้อนทับ ชิดขอบด้านซ้าย */
.inner_position_left{
position:absolute;
display:block;
background-color:#99FFCC;
height:100%;/* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
width:50px; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ */
top:0px; /* css กำหนดชิดด้านบน */
left:0px; /* css กำหนดชิดซ้าย */
z-index:999;
}
/* css ซ้อนทับ ชิดขอบล่าง */
.inner_position_bottom{
position:absolute;
display:block;
background-color:#FFCCCC;
height:50px; /* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ */
width:100%; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
bottom:0px; /* css กำหนดชิดด้านล่าง */
z-index:999;
}
/* css ซ้อนทับ ชิดขอบด้านขวา */
.inner_position_right{
position:absolute;
display:block;
background-color:#FFFF99;
height:100%;/* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
width:50px; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ */
top:0px; /* css กำหนดชิดด้านบน */
right:0px; /* css กำหนดชิดขวา */
z-index:999;
}
</style>
เอาไปใช้งาน
<div class="holder_wrap"> <div class="holder_wrap_img"> <img src="http://www.ninenik.com/userfiles/12/image/1.jpg" /> <div class="inner_position_top"> ซ้อนทับ ชิดขอบบน </div> </div> </div>Credit : www.ninenik.com/การใช้งาน_css_จัดตำแหน่ง_ซ้อนข้อความบนรูปภาพอย่างง่าย-426.html
Subscribe to:
Posts (Atom)