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
- , detaylandırması için ise
- ‘lerle oynayarak yapabilirsiniz.
CSS Kodları
İlk olaraktanımlamasına display değeri belirtelim. Böylece en ufak taşmaları bile engelleyebileceğiz. section{display:table;}
Şimdi- tasarımımızı genel anlamda oluşturalım.
- 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 - 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;
}‘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 soniç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 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-kutusuadobewordpress.com ~ “güncel tasarım okulu”
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 - 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.
- Üyelik 28.02.2012
- Yaş/Cinsiyet 34 / E
- Meslek Front end Developer, Seo smm
- Konum Kocaeli
- Ad Soyad N** K**
- Mesajlar 192
- Beğeniler 56 / 62
- Ticaret 1, (%100)
- Üyelik 04.12.2011
- Yaş/Cinsiyet 35 / E
- Meslek .
- Konum İzmir
- Ad Soyad ** **
- Mesajlar 2376
- Beğeniler 704 / 791
- Ticaret 1, (%100)
- Üyelik 08.07.2011
- Yaş/Cinsiyet 37 / E
- Meslek Tasarımcı
- Konum İstanbul Avrupa
- Ad Soyad V** Ö**
- Mesajlar 677
- Beğeniler 58 / 418
- Ticaret 1, (%100)
adobewordpress.com ~ “güncel tasarım okulu”Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
kullanacağız.
Eklemek-çıkarmak istediğiniz iconları
Eklemek-çıkarmak istediğiniz iconları
hover olayına cursor:pointer; verirsen kullanıcıyı iyi hissttirir :)
emeğine sağlık.
emeğine sağlık.
Seo Nasıl Yapılır Sorusuna, Arama Motorunun Yap Dediğini Yap! Yapma Dediğini yap ma..