Sadece CSS ile Sosyal Ağ Kutusu

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.

[*]Facebook
[*]Twitter
[*]Google +
[*]Linkedin
[*]Pinterest
[*]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
kullanacağız.

























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

CSS Kodları
İlk olarak
tanı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.

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.
  
  .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 son

  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 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

  

  1 kişi bu mesajı beğendi.

  Paylaş
  adobewordpress.com ~ “güncel tasarım okulu”



26.07.2013 10:51

#2

NKara Front end Developer, Seo smm Kullanıcı

• Ü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)

hover olayına cursor:pointer; verirsen kullanıcıyı iyi hissttirir :)
emeğine sağlık.

 

 

Paylaş

Seo Nasıl Yapılır Sorusuna, Arama Motorunun Yap Dediğini Yap! Yapma Dediğini yap ma..

26.07.2013 15:33

#3

Onur89TR Üyeliği Durdurulmuş Banlı Kullanıcı

• Üyelik 04.12.2011
• Yaş/Cinsiyet 34 / E
• Meslek .
• Konum İzmir

• Ad Soyad ** **
• Mesajlar 2376
• Beğeniler 704 / 791
• Ticaret 1, (%100)

























div'leri kapatmamışsın?

 

 

Paylaş

26.07.2013 16:36

#4

Adobewordpress WM Aracı Kullanıcı

• Üyelik 08.07.2011
• Yaş/Cinsiyet 36 / E
• Meslek Tasarımcı
• Konum İstanbul Avrupa

• Ad Soyad V** Ö**
• Mesajlar 677
• Beğeniler 58 / 418
• Ticaret 1, (%100)

Onur89TR adlı üyeden alıntı

div'leri kapatmamışsın?



Dalgınlık.

 

 

Paylaş

adobewordpress.com ~ “güncel tasarım okulu”