MyBBDepo - Türkiyenin MyBB Deposu Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
SvMedeT avatar
Konuyu Oyla:
  • Derecelendirme: 5/5 - 2 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 5/5 - 2 oy

WMTR Soayal Paylaş İkonları - ( CSS Sprite )


Sponsor Reklam

Çevrimdışı SvMedeT
 Tarih: 17-04-2013, Saat:17:42
(Son Düzenleme: 17-04-2013, Saat:18:41, Düzenleyen: SvMedeT.)
#1
Merhaba arkadaşlar, WMTR ( webmasterimiz.com ) için yaptığım sosyal paylaş ikonlarını sizlerle paylaşmak istedim.

Sosyal paylaş ikonlarımız CSS Sprite tekniği ile kodlanmış, tamamen sorunsuzdur.

Sosyal paylaş ikonlarımızın ekran görüntüsü;

   

Resme dikkatli bakarsanız facebook ikonunun belirgin olduğunu ve diğerlerinin facebook ikonuna göre soluk olduğunu görebilirsiniz. Bunun nedeni kodlamada opacity kullanılmasıdır. Yani hangi ikonun üstüne gelirsek ikonumuz belirginleşecektir.

Aşağıdaki kodları ikonlarımızın gözükmesini istediğimiz alana/bölgeye ekleyip kaydedin. [ HTML ]
Kod:
<!-- SvMedeT Sosyal -->
<div class="svmedet-sosyal">
    <a class="svmedet-sosyal-ikon svmedet-facebook" title="Facebook" href="#">Facebook</a>
    <a class="svmedet-sosyal-ikon svmedet-twitter" title="Twitter" href="#">Twitter</a>
    <a class="svmedet-sosyal-ikon svmedet-google" title="Google +" href="#">Google +</a>
    <a class="svmedet-sosyal-ikon svmedet-youtube" title="Youtube" href="#">Youtube</a>
    <a class="svmedet-sosyal-ikon svmedet-tel" title="Telefon" href="#">Telefon</a>
    <a class="svmedet-sosyal-ikon svmedet-rss" title="Rss" href="#">Rss</a>
</div>
        <!-- #SvMedeT  Sosyal -->

Daha sonra style.css ( stil ) dosyanıza aşağıdaki css kodlarını ekleyip kaydedin.
Kod:
/* SvMedeT Sosyal Css */
.svmedet-sosyal {
    float: left
}

/* SvMedeT Sosyal İkon Css */
.svmedet-sosyal-ikon {
    background: url("svmedet-sosyal.png") no-repeat top left;
    display: inline-block;
    text-indent: -99999px;
    opacity: .5
}

.svmedet-sosyal-ikon:hover {
    opacity: 1
}

.svmedet-facebook {
    background-position: 0 0;
    width: 40px;
    height: 40px;
}

.svmedet-google {
    background-position: 0 -45px;
    width: 40px;
    height: 40px;
}
.svmedet-rss {
    background-position: 0 -90px;
    width: 40px;
    height: 40px;
}
.svmedet-tel {
    background-position: 0 -135px;
    width: 40px;
    height: 40px;
    }
.svmedet-twitter {
    background-position: 0 -180px;
    width: 40px;
    height: 40px;
}
.svmedet-youtube {
    background-position: 0 -225px;
    width: 40px;
    height: 40px;
}

Son olarak aşağıda ekte bulunan dosyayı uygun bölgeye atınız.
Not: kodun içerinde resim yolu svmedet-sosyal.png olarak belirtilmiştir. Resmi attığınız bölgeye göre resim yolunu ayarlayınız.


.zip   svmedet-sosyal.zip (Dosya Boyutu: 10.23 KB / İndirme Sayısı: 9)
Güle güle kullanın, iyi forumlar.

Kaynak: ( diğer adım svmedet'tir )
Kod:
http://webmasterimiz.com/forum/konu-wmtr-soayal-paylas-ikonlari-css-sprite.html
Cevapla
Bunu Beğenenler: xpserkan , S.G
Sponsor Reklam
Sponsor Reklam Sponsor Reklam

 


Bu Konudaki Yorumlar
WMTR Soayal Paylaş İkonları - ( CSS Sprite ) - Yazar: SvMedeT - 17-04-2013, Saat:17:42



Konuyu Okuyanlar: 1 Ziyaretçi

istanbul escort - mecidiyeköy escort - şişli escort - ataköy escort - taksim escort - escort mecidiyeköy

sex hikaye - porno izle - türk ifşa - mecidiyeköy escort - seks hikaye - türk porno - escort bayan