06-04-2015, 08:50 PM
Merhaba Arkadaşlar, Ben Newsong30. Şimdi Size 3D Facebook Sayfası Beğenme Butonu Kodumu Göstereceğim. Bence Gayet Şık Oldu.
Eğer Önizlemek İsterseniz :)
Sitesini Kullanabilirsiniz. :)
Kodlarımıza Gelelim
İyi Günler. Ayrıca İsterseniz Twitter Google Plus Falan Yapıp Konu Olarak Buraya Açarım :) Yakında Paralı Kodlarımda Gelecek :)
[Ben Bunun İçin Baya Uğraştım. İnternetten Araştırmalar Yaptım. Kısaca Çok Emek Verdim :). Beğenirseniz REP Verin]
ÖNEMLİ DİPNOT: 25-30 Satır Aralarında Biryerlerde Facebook Sayfanızın Yolunu Yazacaksınız.
Eğer Önizlemek İsterseniz :)
Kod:
codepen.io/penKod:
onizle.koddostu.comSitesini Kullanabilirsiniz. :)
Kodlarımıza Gelelim
Kod:
<body>
<div id="facebook" class="big-section">
<div class="container">
<div class="row">
<div class="flip-container">
<div class="flipper">
<div class="front">
<div>MERHABA</div>
<BR>
<div>BEN <B>3D</B> BİR FACEBOOK BUTONUYUM</div>
<BR>
<div>ÜZERİME GELSENE :)</div>
<BR>
<BR>
<div><img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/facebook-128.png"></div>
</div>
<div class="back">
<div>FACEBOOK SAYFAMIZA AŞAĞIDAKİ BUTONDAN GİDEBİLİRSİN DOSTUM :)</div>
<ul>
<li><a href="FACEBOOK SAYFANIZIN YOLU" class="round green">Tıklayın<span class="round">Merhaba Kanka :) Facebook Sayfamıza Gitmeye Ne Dersin? Gitmek İstersen Bu Butona Tıkla</span></a></li>
</ul>
<div><img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/facebook-64.png"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</body>
</html>
<style>
.big-section { color:#FFF; padding-top:100px; }
.row { margin-bottom:100px; text-align:center; }
h1 { font-size:40px; padding-bottom:30px; padding-top:30px; text-align:center; }
#facebook {padding-bottom:50px; text-align:center; }
.flip-container { -webkit-perspective: 1000; -webkit-transform-style: preserve-3d; }
.flip-container, .front, .back {
margin:0 auto; width: 375px; height: 350px; }
.flipper { -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; position: relative; }
.front, .back { -webkit-backface-visibility: hidden; -webkit-transition: 0.5s; -webkit-transform-style: preserve-3d; padding-top:50px; padding-bottom:50px; position: absolute; top: 0; left: 0; }
.front { background:#35528f; z-index: 2; -webkit-transform: rotateY(0deg); }
.front span { font-size:80px; margin-top:10px; }
.back { background:#021f5c; padding-top:65px; -webkit-transform: rotateY(-180deg); }
.flip-container:hover .back { -webkit-transform: rotateY(0deg); }
.flip-container:hover .front { -webkit-transform: rotateY(180deg); }
* {
margin: 0;
padding: 0;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
font-family: "helvetica neue", helvetica, arial, sans-serif;
font-size: 13px;
text-align: center;
}
ul {
margin: 30px auto;
text-align: center;
}
li {
list-style: none;
position: relative;
display: inline-block;
width: 100px;
height: 100px;
}
@-moz-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
@-webkit-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
@-o-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
@keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
.round {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-top: 30px;
text-decoration: none;
text-align: center;
font-size: 26px;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
letter-spacing: -.065em;
font-family: "Hammersmith One", sans-serif;
-webkit-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
box-shadow: 2px 2px 7px rgba(0,0,0,.2);
border-radius: 12px;
z-index: 1;
border-width: 2px;
border-style: solid;
}
.round:hover {
width: 130%;
height: 130%;
left: -15%;
top: -15%;
font-size: 20px;
padding-top: 38px;
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
-o-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
box-shadow: 5px 5px 10px rgba(0,0,0,.3);
z-index: 2;
border-size: 10px;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
a.green {
background-color: rgba(1,151,171,1);
color: rgba(0,63,71,1);
border-color: rgba(0,63,71,.2);
}
a.green:hover {
color: rgba(1,151,171,1);
}
.round span.round {
display: block;
opacity: 0;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
font-size: 1px;
border: none;
padding: 40% 20% 0 20%;
color: #fff;
}
.round span:hover {
opacity: .85;
font-size: 12px;
-webkit-text-shadow: 0 1px 1px rgba(0,0,0,.5);
-moz-text-shadow: 0 1px 1px rgba(0,0,0,.5);
-o-text-shadow: 0 1px 1px rgba(0,0,0,.5);
text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.green span {
background: rgba(0,63,71,.7);
}
</style>İyi Günler. Ayrıca İsterseniz Twitter Google Plus Falan Yapıp Konu Olarak Buraya Açarım :) Yakında Paralı Kodlarımda Gelecek :)
[Ben Bunun İçin Baya Uğraştım. İnternetten Araştırmalar Yaptım. Kısaca Çok Emek Verdim :). Beğenirseniz REP Verin]
ÖNEMLİ DİPNOT: 25-30 Satır Aralarında Biryerlerde Facebook Sayfanızın Yolunu Yazacaksınız.
I Love Support10TR