CSS3 ile Sosyal Ağ Kutucuğu
WordPress ve türevi web sayfaları için bir çok sosyal ağ buttonu mevcut. Bunları daha önce eklentiler kategorisi altında ele almıştık.
Şimdi ise CSS3 ve HTML kodları kullanarak kendi sosyal ağ buttonlarımızı hazırlayacağız. Örnekte Twitter, Facebook ve Google Plus için buttonlar bulunmakta. İstek dahilinde çoğaltılabilmesi gayet basit.
Başlayalım
HTML Kodları
<div id="content"> <input type="checkbox" class="checkbox" id="share" checked> <label for="share" class="label entypo-export"></label> <div class="social"> <ul> <li class="entypo-twitter" onClick="location.href='https://twitter.com/Vatanay'"></li> <li class="entypo-facebook" onClick="location.href='http://www.facebook.com/vatanay.ozbeyli'"></li> <li class="entypo-gplus" onClick="location.href='https://plus.google.com/116021468686674197169'"></li> </ul> </div> </div>
CSS Kodları
@import url(https://weloveiconfonts.com/api/?family=entypo); /* entypo */ [class*="entypo-"]:before { font-family: 'entypo', sans-serif; } html { margin:0; padding:50px 0; background:white; } #content { text-align:center; position:absolute; left:0; right:0; margin:auto; padding:120px 0 10px 0; width:200px; height:20px; } input[type="checkbox"]{display:none;} .checkbox:checked + .label{ background:#9ac71f; color:white; } .checkbox:checked ~ .social { opacity:1; -webkit-transform: scale(1) translateY(-90px); -moz-transform:scale(1) translateY(-90px); -o-transform:scale(1) translateY(-90px); transform:scale(1) translateY(-90px); -webkit-transition:.5s; -moz-transition:.5s; -o-transition:.5s; transition:.5s; } .label { font-size:16px; cursor:pointer; margin:0; padding:5px 10px; border-radius:10%; color:#7B7484; } .social { transform-origin:50% 0%; -webkit-transform: scale(0) translateY(-190px); -moz-transform:scale(0) translateY(-190px); -o-transform:scale(0) translateY(-190px); transform:scale(0) translateY(-190px); opacity:0; } ul { position:relative; left:0; right:0; margin:auto; color:#fff; height:46px; width:180px; background:#3B5998; padding:0; list-style:none; } ul li { font-size:20px; cursor:pointer; width:60px; margin:0; padding:12px 0; text-align:center; float:left; display:block; height:22px;} ul li:hover {color:rgba(0,0,0,.5);} ul:after { content:''; display:block; position:absolute; left:0; right:0; margin:35px auto; height:0; width:0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #3B5998; } li[class*="twitter"] {background:#6CDFEA;padding:12px 0;} li[class*="gplus"] {background:#E34429;padding:12px 0;}
Kapanış
İşlemimizbu kadar. Makalenin orjinali Junpei Araya tarafından hazırlanmıştır. Umarım işinize yaramıştır.
Bir sonraki makalemde görüşmek üzere…