- Katılım
- 28 Mayıs 2013
- Mesajlar
- 190
- Reaction score
- 1
Sosyal 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!
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.
- Google +
- Tumblr
- 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.
HTML:
<section>
<ul class="sosyal-aglar">
<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>
</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.
HTML:
section{display:table;}Şimdi <ul> tasarımımızı genel anlamda oluşturalım.
HTML:
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.
HTML:
.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.
HTML:
.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.
HTML:
.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.
HTML:
.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.
HTML:
.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 makalenin temelini Entypo oluşturmakta. Çok yakın zamanda Entypo hakkında daha detaylı bir makaleyle sizlerle olacağız.
İyi çalışmalar.
Kaynak : http://www.adobewordpress.com/sadece-css-ile-sosyal-ag-kutusu