Posted on Wednesday 14 November 2012 at @ Wednesday, November 14, 2012 , you can leave your comment (17)
MY OWN CODING.PLEASE CREDIT IF YOU USE THIS.Hai! Assalamualaikum!
Sebelum kita memulakan tutorial,Aimad ucapkan Salam Maal Hijrah 1434h :D
P/S:THIS CODE IS VERY SENSITIVE,DON'T CHANGE ANY CODING JIKA ANDA TIDAK PANDAI BERMAIN DENGAN KOD.HANYA UBAH APA YANG HENDAK DILETAKKAN DI DALAM BULATAN TERSEBUT.HANYA YANG DIHIGHTLIGHTKAN (OREN) SAHAJA BOLEH DI-EDIT.
Preview:
put your stuff here such as cbox and another else.don't forget to adjust the left,top,width k....
Template Designer:
1)Paste dekat HTML/Javascript,kiranya dekat mana korang nak benda ni muncul.
Blogskins:
1)Paste dekat mana yang korang nak benda ni muncul.
<style>.ch-item {
width:350px;height:350px;
border-radius:350px;
-moz-border-radius: 350px;
-webkit-border-radius: 350px;
position: relative;
box-shadow: pink;
}
.ch-thumb {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: absolute;
box-shadow: inset 0 0 0 15px pink;
-webkit-transform-origin: 95% 40%;
-moz-transform-origin: 95% 40%;
-o-transform-origin: 95% 40%;
-ms-transform-origin: 95% 40%;
transform-origin: 95% 40%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ch-thumb:after {
content: '';
width: 8px;
height: 8px;
position: absolute;
border-radius: 50%;
top: 40%;
left: 95%;
margin: -4px 0 0 -4px;
background:rgb(14,14,14);
background: -moz-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%, rgba(125,126,125,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(14,14,14,1)), color-stop(100%,rgba(125,126,125,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
box-shadow: 0 0 1px rgba(255,255,255,0.9);
box-shadow:pink;
}
.ch-img-1 {
background-image: url(http://www.pastelpatterns.com/large/largepattern-2.png);
z-index: 12;
}
.ch-info {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
background:url(http://www.pastelpatterns.com/large/largepattern-14.png);
box-shadow: inset 0 0 0 5px pink;
}
.ch-item:hover .ch-thumb {
box-shadow:inset 0 0 0 15px pink, 0 1px 3px pink;
-webkit-transform: rotate(-110deg);
-moz-transform: rotate(-110deg);
-o-transform: rotate(-110deg);
-ms-transform: rotate(-110deg);
transform: rotate(-110deg);
}
</style>
<center><div class="ch-item">
<div class="ch-info"><center><div style="margin-left:-80px;margin-top:140px;width:250px;">put your stuff here such as cbox and another else.don't forget to adjust the left,top,width k....</center></div>
<div class="ch-thumb ch-img-1"></div></div></center>
