Langsung saja masuk ke pengcodingan CSS dan HTMLnya :
@import url(http://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic,700);
@import url(http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900);
@import url(http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css);
::selection {
color: #fff;
background: #2a2b39;
}
::-moz-selection {
color: #fff;
background: #2a2b39;
}
body, html {
font-family: 'Raleway', sans-serif;
background-image: url(http://imgh.us/bg_1.svg);
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 9;
}
p {
padding: 0;
margin: 0;
display: inline-block;
}
a {
color: #2a2b39;
text-decoration: none;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a:hover {
color: #6acd79;
}
.bussinesscard {
height: 320px;
width: 427px;
overflow: hidden;
box-shadow: 0px 0px 43px -10px black;
position: absolute;
left: 50%;
top: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.bussinesscard .flip {
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.bussinesscard .front {
z-index: 11;
width: 100%;
position: absolute;
height: 100%;
background: #fff;
box-shadow: 0px 0px 33px -1px rgba(0, 0, 0, 0.45);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.bussinesscard .front .top {
height: 50%;
background: #2a2b39;
}
.bussinesscard .front .top:after {
position: absolute;
content: '';
pointer-events: none;
}
.bussinesscard .front .top:after {
left: 50%;
width: 2em;
height: 2em;
-moz-transform: translateX(-50%) rotate(45deg);
-ms-transform: translateX(-50%) rotate(45deg);
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
bottom: 9em;
z-index: 10;
background: inherit;
}
.bussinesscard .front .top .logo {
display: inline-block;
background: #6acd79;
color: #fff;
z-index: 11;
padding: .16em;
border: 8px solid #fff;
position: relative;
pointer-events: none;
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
margin-top: .4em;
font-size: 4em;
}
.bussinesscard .front .top .logo .fat {
font-weight: 800;
}
.bussinesscard .front .top .logo .skinny {
font-weight: 100;
}
.bussinesscard .front .nametroduction {
margin-top: 2.4em;
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
z-index: 8;
}
.bussinesscard .front .name {
color: #2a2b39;
font-weight: 400;
font-size: 3.2em;
text-align: center;
position: relative;
margin-bottom: .35em;
}
.bussinesscard .front .name:after {
content: '';
position: absolute;
top: 1.3em;
width: 20%;
left: 40%;
right: 40%;
height: 1px;
background: #2a2b39;
}
.bussinesscard .front .introduction {
text-align: center;
color: #2a2b39;
font-family: 'Old Standard TT', serif;
font-style: italic;
}
.bussinesscard .front .contact {
color: #2a2b39;
margin-left: 1.7em;
font-weight: 300;
font-size: 1.6em;
-moz-transform: translateY(400%);
-ms-transform: translateY(400%);
-webkit-transform: translateY(400%);
transform: translateY(400%);
}
.bussinesscard .front .contact span {
color: #2D3244;
font-size: 1.7em;
width: 1.3em;
display: inline-block;
}
.bussinesscard .front .contact a {
position: relative;
bottom: .24em;
}
.bussinesscard .back {
width: 100%;
height: 100%;
background: #fff;
backface-visibility: hidden;
position: absolute;
}
.tooltip {
position: absolute;
left: 1em;
bottom: 1em;
color: #fff;
font-weight: 300;
padding: .4em;
background: #2a2b39;
}
/* HOVER ANIMATIONS */
.front .top .logo, .front .top, .front .top:after, .front .nametroduction, .front .contact {
-moz-transition: 0.7s all ease-in-out;
-o-transition: 0.7s all ease-in-out;
-webkit-transition: 0.7s all ease-in-out;
transition: 0.7s all ease-in-out;
}
.flip:hover .front .top .logo {
margin-top: .28em;
font-size: 1.3em;
border: 3px solid #fff;
margin-left: .15em;
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
left: 0;
}
.flip:hover .front .top {
height: 15%;
}
.flip:hover .front .top:after {
width: 1.5em;
height: 1.5em;
bottom: 16.3em;
}
.flip:hover .front .nametroduction {
-moz-transform: translateY(400%);
-ms-transform: translateY(400%);
-webkit-transform: translateY(400%);
transform: translateY(400%);
}
.flip:hover .front .contact {
-moz-transform: translateY(-52%);
-ms-transform: translateY(-52%);
-webkit-transform: translateY(-52%);
transform: translateY(-52%);
}
<section class="bussinesscard">
<div class="flip">
<div class="front">
<div class="top">
<div class="logo">
<span class="fat">Y</span><span class="skinny">D</span></div>
</div>
<div class="nametroduction">
<div class="name">
Yudha dhesockerz</div>
<div class="introduction">
Blogger Newbie Asal Malang</div>
</div>
<div class="contact">
<div class="website">
<span class="ion-earth"></span>
<a href="#">maseyudha.blogspot.com</a>
</div>
<div class="twitter">
<span class="ion-social-twitter"></span>
<a href="#">@yudhadhesockerz</a>
</div>
<div class="phone ">
<span class="ion-ios7-telephone"></span>
<a href="#">0118 999 7253</a>
</div>
<div class="email ">
<span class="ion-paper-airplane"></span>
<a href="#">yudhadhesockerz@gmail.com</a>
</div>
</div>
</div>
<div class="back">
</div>
<!--FIXES FONT RENDERING -->
</div>
</section>
<section class="tooltip">
Hover over the card to see the back.
</section>
Note:
Ganti "YD" dengan logo anda sendiri
ganti tanda "#" dengan Url
Selamat Berkreasi
pertamax diamankan mas , hehe
BalasHapusnumpang izin make :D
selamat gan :-bd
Hapussilahkan dipake gan :)
dapet apa nih gan , hehe :D
BalasHapusoke mas yudha , thank udah maau berbagi :)
dapat penghargaan dari ane :D
Hapussama2 gan khoirun,,makasih sudah sering mampir kesini :-bd
hehe kita ngupi yuks |o|
BalasHapusmasama mas udah mampir ke blog saya juga
ayuks udah siap setermos ini kopinya =D
Hapusmacam kuli aja mas disediain kopi setermos hehe
BalasHapusemang kuli gan...kuli keybord =D
Hapushaha , sama kuli mouse gan ... satu perangkat jadinya dah
Hapuso iya mousenya ketinggalan... :D
Hapussound nya jangan lupa mas
Hapussiip sudah kayak mau orkesan ini :D
Hapustinggal manggung dah kita haha ,..
HapusKeren gan,,bisa dicoba nih :D
BalasHapuswah mas Bahtiq rozikin akhirnya muncul juga disini :-bd
Hapussilahkan dicoba mas |o|
izin nyoba mas... hehe
BalasHapussilahkan gan wicky :-bd
Hapusciyeee, akhirnya ketemu, makasih akang :v
BalasHapusketemu ma siapa tuh kang @@,
Hapuswah brati ane sekarang tenar dong :asik