Myscript2010: 12/20/15

Circle Hover Effects

Circle Hover Effects
Memasang Kode Circle Hover Effects
kode ini cukup menarik untuk menghiasi blog, selain itu kode ini juga dapat diterapkan link yang menuju kestu postingan, kode ini menggunakan link gambar dengan format JPG, PNG dan GIF, dibawah ini kode tersebut serta cara penerapannya.

Login ke akun blog klik tombol blog baru buat satubuah
link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus smua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Bila sudah selesai klik entri halaman baru HTML pada link tersebut
copy kode berikut : pastekan ke area entri halaman baru dan klik simpan selesai

<style type="text/css">
.my2010-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
cursor: default;
}
.my2010-info-wrap,
.my2010-info{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;
}
.my2010-info-wrap {
top: 20px;
left: 20px;
background:url(http://Link Gambar.jpg) no-repeat center center;
box-shadow: 0 0 0 20px rgba(255,255,255,0.2),inset 0 0 3px rgba(115,114, 23, 0.8);}
.my2010-info {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.my2010-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.my2010-info .my2010-info-front {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
z-index: 100;
box-shadow:
inset 2px 1px 4px rgba(0,0,0,0.1);
}
.my2010-info .my2010-info-back {
background: rgba(230,132,107,0);
}
.my2010-img-1 {
background-image: url(http://Link Gambar.jpg);
}
.my2010-img-2 {
background-image: url(http://Link Gambar.jpg);
}
.my2010-img-3 {
background-image: url(http://Link Gambar.jpg);
}
.my2010-info h3 {
color: lime;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
margin: 0 25px;
padding: 40px 0 0 0;
height: 90px;
font-family: Helvetia;
text-shadow: 2px 2px 2px red,0 1px 2px #080;}
.my2010-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: -2.5em 20px;
font-size: 12px;}
.my2010-item:hover .my2010-info-front {
-webkit-transform: rotate3d(1,0,0,-180deg);
-moz-transform: rotate3d(1,0,0,-180deg);
-o-transform: rotate3d(1,0,0,-180deg);
-ms-transform: rotate3d(1,0,0,-180deg);
transform: rotate3d(1,0,0,-180deg);
box-shadow:
inset 0 0 5px rgba(255,255,255,0.2),
inset 0 0 3px rgba(0,0,0,0.3);
}
.my2010-grid {
margin: 15px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.my2010-grid:after,
.my2010-item:before {
content: '';
display: table;
}
.my2010-grid:after {
clear: both;
}
.my2010-grid li {
width: 220px;
height: 220px;
display: inline-block;
margin:15px;
}
</style>

<ul class="my2010-grid">
<li>
<div class="my2010-item my2010-img-1">
<div class="my2010-info-wrap">
<div class="my2010-info">
<div class="my2010-info-front my2010-img-1">
</div>
<div class="my2010-info-back">
<h3>Your Text</h3>
<a href="http://Your Link.blogspot.co.id/" target="_blank" title="Your Text"><b>Your Text</b></a></div>
</div>
</div>
</div>
</li>
<li>
<div class="my2010-item my2010-img-2">
<div class="my2010-info-wrap">
<div class="my2010-info">
<div class="my2010-info-front my2010-img-2">
</div>
<div class="my2010-info-back">
<h3>Your Text</h3>
<a href="http://Your Link.blogspot.co.id/" target="_blank" title="Your Text"><b>Your Text</b></a></div>
</div>
</div>
</div>
</li>
<li>
<div class="my2010-item my2010-img-3">
<div class="my2010-info-wrap">
<div class="my2010-info">
<div class="my2010-info-front my2010-img-3">
</div>
<div class="my2010-info-back">
<h3>Your Text</h3>
<a href="http://Your Link.blogspot.co.id/" target="_blank" title="Your Text"><b>Your Text</b></a></div>
</div>
</div>
</div>
</li>
</ul>
<div align="center">
<span style="color: tan; font-family: "bernard mt condensed"; font-size: small;">Your Text<span style="color: cyan; font-family: "vivaldi"; font-size: large;">
<a href="http://Your Link.blogspot.co.id/" title="Your Text">
<b>Your Text</b></a></span></span></div>

Penjelasan :
Edit kode yang diberi warna sesuai keinginan
Tambahkan background gambar pada kode CSS tepat dibawah kode
<style type="text/css"> jika diperlukan

body {background-image: url(http://Link Gambar.png);color:red;height:100%;overflow:hidden;}

Sumber by. Tympanus
Edited by. Myscript2010

DEMOSHOW

CSS3 Hover With Web Symbols

CSS3 Hover With Web Symbols
Memasang Kode CSS3 Hover With Web Symbols, kode ini memiliki efek berputar bila disentuh oleh Cursor dan juga dapat menampilkan beberapa judul artikel, tampilan kode ini tidak menggunakan background gambar. kecuali warna latar sebagai background. dibawah ini adalah kode tersebut serta cara penerapannya :

Login ke akun blog klik tombol blog baru buat satubuah
link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus smua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Bila sudah selesai klik entri halaman baru HTML pada link tersebut
copy kode berikut : pastekan ke area entri halaman baru dan klik simpan selesai

<style type="text/css">
@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('images/websymbols/websymbols-regular-webfont.eot');
    src: url('images/websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('images/websymbols/websymbols-regular-webfont.woff') format('woff'),
         url('images/websymbols/websymbols-regular-webfont.ttf') format('truetype'),
         url('images/websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.ca-menu{
    padding:0;
    margin:20px auto;
    width: 1020px;
   font-family: 'Dosis', sans-serif;
}
.ca-menu li{
    width: 230px;
    height: 230px;
    border: 10px solid #333;
    overflow: hidden;
    position: relative;
    float:left;
    background: #777;
    margin-right: 4px;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -webkit-border-radius: 125px;
    -moz-border-radius: 125px;
    border-radius: 125px;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
.ca-menu li:last-child{
    margin-right: 0px;
}
.ca-menu li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #808080;
    position: relative;
   -moz-box-shadow:0px 0px 3px #000000;
   -webkit-box-shadow:0px 0px 3px #000000;
   box-shadow:0px 0px 3px #000000;

}
.ca-icon{
    font-family: 'WebSymbolsRegular', cursive;
    font-size: 40px;
    color: #E6E6FA ;;
    line-height: 60px;
    position: absolute;
    width: 100%;
    height: 60px;
    left: 0px;
    top: 30px;
    text-align: center;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
.ca-main{
    font-size: 24px;
    position: absolute;
    top: 110px;
    height: 80px;
    width: 170px;
    left: 50%;
    margin-left: -85px;
    opacity: 0.8;
    text-align: center;
}
.ca-sub{
    text-align:center;
    color: #dad ;
    font-size: 26px;
    position: absolute;
    height: 80px;
    width: 170px;
    left: 50%;
    margin-left: -85px;
    top: 110px;
    opacity: 0;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
.ca-menu li:hover{
    background: #444;
    border-color: #ff0000;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 45px 60px -50px #000000;
}
.ca-menu li:hover .ca-icon{
    color: #B20000 ;
    font-size: 60px;
}
.ca-menu li:hover .ca-main{
    display: none;
}
.ca-menu li:hover .ca-sub{
    opacity: 0.8;
}
</style>

<ul class="ca-menu">
<li>
<a href="https:// Your Link">
<span class="ca-icon">M</span>
<div class="ca-content">
<h2 class="ca-main">
Open Menu 1</h2>
<h3 class="ca-sub">
Enter Menu</h3>
</div>
</a>
</li>
<li>
<a href="https:// Your Link">
<span class="ca-icon">M</span>
<div class="ca-content">
<h2 class="ca-main">
Open Menu 2</h2>
<h3 class="ca-sub">
Enter Menu</h3>
</div>
</a>
</li>
<li>
<a href="https:// Your Link">
<span class="ca-icon">S</span>
<div class="ca-content">
<h2 class="ca-main">
Open Menu 3</h2>
<h3 class="ca-sub">
Enter Menu</h3>
</div>
</a>
</li>
<li>
<a href="https:// Your Link">
<span class="ca-icon">C</span>
<div class="ca-content">
<h2 class="ca-main">
Open Menu 4</h2>
<h3 class="ca-sub">
Enter Menu</h3>
</div>
</a>
</li>
</ul>
</div>

Penjelasan :
Edit kode yang diberi warna sesuai keinginan
Tambahkan background gambar pada kode CSS tepat dibawah kode
<style type="text/css"> jika diperlukan

body {background-image: url(http://Link Gambar.png);color:red;height:100%;overflow:hidden;}

Edited by. Myscript2010
Sumber by. 1stwebdesigner

DEMOSHOW

Subscribe to: Posts (Atom)