Sadece CSS ile Sosyal Ağ Kutusu

Sosyal Ağ KutusuSosyal ağların günden güne büyümesi tasarımcıları, bu alanlardaki kitlelerini genişletmeye zorluyor.

Önceki makalelerimizde birçok sosyal ağ iconu paylaşmıştık. Fakat bu sefer CSS3 desteğiyle performans dostu bir sosyal ağ kutusu hazırlayacağız. Görsel açıdan da şık olan bu kutuyu çok beğeneceksiniz!

ÖRNEĞİ GÖRÜNTÜLE

Nasıl yapılır?

Kullanacağımız icon paketi 250’den fazla görseli destekliyor. Bu demek oluyor ki tüm sosyal ağların iconları avucumuzun içersinde. Entypo‘nun sahip olduğu iconları görüntülemek için buraya göz atabilirsiniz.

Hazırlayacağımız örnekte kullanacağımız sosyal ağ iconları şunlar olacak.

  1. Facebook
  2. Twitter
  3. Google +
  4. Linkedin
  5. Pinterest
  6. Tumblr
  7. Stumbleupon

Bu listeyi istediğiniz gibi azaltıp çoğaltabilirsiniz.

HTML Kodları

Çevreleyici (wrapper) olarak section tanımlamasını kullanacağız. Sosyal iconların herbir çerçevesi için <ul>, detaylandırması için ise <div> kullanacağız.

<section>
<ul class="sosyal-aglar"></pre>
<li><div class="entypo-facebook"></div></li>
<li><div class="entypo-twitter"></div></li>
<li><div class="entypo-gplus"></div></li>
<li><div class="entypo-linkedin"></div></li>
<li><div class="entypo-pinterest"></div></li>
<li><div class="entypo-tumblr"></div></li>
<li><div class="entypo-stumbleupon"></div></li>
<pre>
</ul>
</section>

Eklemek-çıkarmak istediğiniz iconları <li>‘lerle oynayarak yapabilirsiniz.

CSS Kodları

İlk olarak <section> tanımlamasına display değeri belirtelim. Böylece en ufak taşmaları bile engelleyebileceğiz.

section{display:table;}

Şimdi <ul> tasarımımızı genel anlamda oluşturalım.

section .sosyal-aglar {
border-radius:15px;
display:block;
position:relative;
text-align: center;
background: #282537;
background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
background-image: -moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
background-image: -o-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
padding:0;
margin:0;
}

Boyutlandırmalarımızı yapalım. Eğer kutuların boyutlarını değiştirmek isterseniz sadece bu alanlarla oynamanız yeterli olacaktır.


.sosyal-aglar, .sosyal-aglar li, .sosyal-aglar div{height:50px;}
.sosyal-aglar li, .sosyal-aglar div{width:50px;}

Şimdi her bir <li> için genel tasarımımızı oluşturalım. Border komutu kullanmadan çift şerit çizgi oluşturuyoruz. Bu küçük hileyi daha önce burada anlatmıştık.


.sosyal-aglar li {
display: inline-block;
list-style: none;
-webkit-box-shadow: 1px 0 0 0px #252233, 2px 0 0 0px #3c3b52;
-moz-box-shadow: 1px 0 0 0px #252233, 2px 0 0 0px #3c3b52;
box-shadow: 1px 0 0 0px #252233, 2px 0 0 0px #3c3b52;
}

Son <li> için ayıraçı kaldıralım.

.sosyal-aglar li:last-child{
-webkit-box-shadow: 0 0 0 0;
 -moz-box-shadow: 0 0 0 0;
 box-shadow: 0 0 0 0;
}

<div>‘ler için tasarım oluşturalım. Üzerlerine gelince (hover) uygulanacak tasarımı ekleyelim.

.sosyal-aglar div {
position:absolute;
color: white;
font:1.3em/50px 'entypo', sans-serif;;
text-align: center;
transition: all 0.5s ease;
text-shadow:1px 1px 5px #333;
}

.sosyal-aglar div:hover {
font-size: 1.8em;
-moz-box-shadow: inset 0 0 30px #111;
-webkit-box-shadow: inset 0 0 30px #111;
box-shadow: inset 0 0 30px #111;
}

Ve ilk ve son <div> için border-radius tanımlamasını değiştirelim.


.sosyal-aglar li:first-child div{border-radius:15px 0 0 15px;}
.sosyal-aglar li:last-child div{border-radius:0 15px 15px 0;}

Kapanış

Daha önce onlarca teknik ile menü tipleri hazırlamıştık. Hover, sprite veya geçiş teknikleri… Aklınıza gelebilecek her konuya tek tek değiniyoruz.

Bu da ilginizi çekebilir  Haftanın Ücretsiz Web Teması #3

Bu makalenin temelini Entypo oluşturmakta. Çok yakın zamanda Entypo hakkında daha detaylı bir makaleyle sizlerle olacağız.

İyi çalışmalar.