โ ค้ ด แ ม ว

ลำดับตอนที่ #9 : (T h e c a t*) ; ชี้ภาพแล้วเป็นกรอบเฉียง (สวยแนะนำ)

` THE CAT โค้ดแมวๆ ●

นำโค้ดไปใช้ อย่าลืม คอมเม้น ในตอนนี้เลย
และ อย่าลืม ติดเครดิต ร้านโค้ดแมวๆ ด้วยน้า


 

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

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

   

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

<style name="captain" type="text/css">

img{-webkit-transition:0.7s; -moz-transition:0.7s; -o-transition:0.7s;}

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>

 

T H E M E
◈ B L & W H ◈