โค้ดนำเมาส์ ชี้ภาพ แล้วภาพเป็นกรอบเฉียง (สวยแนะนำ)

โพสต์โดย: admin | เมื่อ: 2014-10-2 13:05| เปิดอ่าน: 4794| ความคิดเห็น: 0

Code html , code java , โค้ดลิงค์ ชี้เมาส์ ภาพเปลี่ยนเป็นภาพ เฉียงสวยงาม
ตอนนี้จะแจกสองโค้ดเลย 
โค้ดแรก ชี้ภาพแล้วกรอบจะเฉียง กับ ไม่ต้องชี้ภาพก็เฉียงอยู่แล้ว
เป็นยังไงมาดูกันค่ะ !

ตัวอย่าง ที่ 1
เมาส์ชี้ที่ภาพดูนะ

 free unlimited image hosting free unlimited image hosting free unlimited image hosting

CODE
ตัวที่หนึ่ง

<style name="captain" type="text/css">img:hover
{border-top-left-radius: 30px;border-bottom-right-radius: 30px;
.whateveryourpostdivis Img{border-top-left-radius: 30px;border-
bottom-right-radius: 30px;}border-top-left-radius: 30px;border-bottom-right-radius:
30px;webkit-transition: 1s ease-in-out;moz-transition: 1s ease-in-out;ms-transition:
1s ease-in-out; -webkit-transition:0.7s; -moz-transition:0.7s; -o-transition:0.7s;} </style>

ตัวอย่าง 2
ไม่ต้องชี้ภาพมันก็เปลี่ยนเป็นแบบเฉียงเลย
ฝากรูป

CODE

<style name="captain" type="text/css">img {border-top-left-radius:
30px;border-bottom-right-radius: 30px;.whateveryourpostdivis Img{border-top-left-radius:
30px;border-bottom-right-radius: 30px;}border-top-left-radius: 30px;border-bottom-right-
radius: 30px;webkit-transition: 1s ease-in-out;moz-transition: 1s ease-in-out;ms-transition:
1s ease-in-out; </style>

Created By : everythingtumblr


ตอบกระทู้ ขึ้นไปด้านบน ไปที่หน้ารายการกระทู้