lostyazilim
tr.link

Resmi Sprite Yapabilir Misiniz?

6 Mesajlar 1.134 Okunma
lstbozum
tr.link

Durotan Durotan WM Aracı Kullanıcı
  • Üyelik 28.02.2014
  • Yaş/Cinsiyet 29 / E
  • Meslek 3D Sanatçı
  • Konum Kocaeli
  • Ad Soyad F** T**
  • Mesajlar 1676
  • Beğeniler 204 / 340
  • Ticaret 2, (%100)
Merhabalar. Biliyorum internette bunu yapan bir sürü internet sitesi var, denedim fakat kodlarda kafam karıştı. Acaba aşağıdaki resimdeki sosyal medya ikonlarını 56x56 olarak CSS sprite yapabilir misiniz?

Resim:



Üsttekiler normal görünecek olan ikonlar, alttakiler mouseover ikonları olacak.
 

 

wmaraci
reklam

cArleone cArleone WM Aracı Kullanıcı
  • Üyelik 26.11.2013
  • Yaş/Cinsiyet 30 / E
  • Meslek Web master
  • Konum Isparta
  • Ad Soyad A** M**
  • Mesajlar 225
  • Beğeniler 85 / 59
  • Ticaret 9, (%100)
Yaptım bir örnek http://ustaderslik.com/ornek/sosyal.html inceleyebilirsin.




UstaDerslik










 

 

www.ustaderslik.com

tiwaly tiwaly NodeJS / PHP / NoSQL Kullanıcı
  • Üyelik 10.10.2013
  • Yaş/Cinsiyet 34 / E
  • Meslek Yazılımcı
  • Konum İzmir
  • Ad Soyad i** A**
  • Mesajlar 363
  • Beğeniler 135 / 104
  • Ticaret 7, (%100)

.facebook{width:56px;height: 56px;background: url(fFZLyWv.png) 0 0;}
.twitter{width:56px;height: 56px;background: url(fFZLyWv.png) 0 -112;}
.gplus{width:56px;height: 56px;background: url(fFZLyWv.png) 0 -224;}
.ytube{width:56px;height: 56px;background: url(fFZLyWv.png) 0 -336;}
.facebook:hover{width:56px;height: 56px;background: url(fFZLyWv.png) 0 -56;}
.twitter:hover{width:56px;height: 56px;background: url(fFZLyWv.png) 0 -168;}
.gplus:hover{width:56px;height: 56px;background: url(fFZLyWv.png) 0 -280;}
.ytube:hover{width:56px;height: 56px;background: url(fFZLyWv.png) 0 -392;}









 

 

Durotan Durotan WM Aracı Kullanıcı
  • Üyelik 28.02.2014
  • Yaş/Cinsiyet 29 / E
  • Meslek 3D Sanatçı
  • Konum Kocaeli
  • Ad Soyad F** T**
  • Mesajlar 1676
  • Beğeniler 204 / 340
  • Ticaret 2, (%100)

cArleone adlı üyeden alıntı

Yaptım bir örnek http://ustaderslik.com/ornek/sosyal.html inceleyebilirsin.




UstaDerslik












tiwaly adlı üyeden alıntı


.facebook{width:56px; height: 56px; background: url(fFZLyWv.png) 0 0;}
.twitter{width:56px; height: 56px; background: url(fFZLyWv.png) 0 -112;}
.gplus{width:56px; height: 56px; background: url(fFZLyWv.png) 0 -224;}
.ytube{width:56px; height: 56px; background: url(fFZLyWv.png) 0 -336;}
.facebook:hover{width:56px; height: 56px; background: url(fFZLyWv.png) 0 -56;}
.twitter:hover{width:56px; height: 56px; background: url(fFZLyWv.png) 0 -168;}
.gplus:hover{width:56px; height: 56px; background: url(fFZLyWv.png) 0 -280;}
.ytube:hover{width:56px; height: 56px; background: url(fFZLyWv.png) 0 -392;}











İkinize de çok teşekkürler arkadaşlar. Sağolun. :)
 

 

wmaraci
wmaraci

Orifame Orifame Oriflame Danışmanı Kullanıcı
  • Üyelik 01.01.2013
  • Yaş/Cinsiyet 38 / E
  • Meslek Oriflame Danışmanı
  • Konum Ankara
  • Ad Soyad E** Ç**
  • Mesajlar 343
  • Beğeniler 69 / 42
  • Ticaret 2, (%100)
İhtiyacı olan arkadaşlar sprite için burayı ziyaret edebilir.
 

 

YesilAski YesilAski www.yesilaski.com Kullanıcı
  • Üyelik 11.07.2014
  • Yaş/Cinsiyet 40 / E
  • Meslek Çevre Mühendisi
  • Konum Ankara
  • Ad Soyad B** A**
  • Mesajlar 97
  • Beğeniler 7 / 11
  • Ticaret 0, (%0)
Sitemizde böyle bir kod var.
Smiley face
Bunun yerine şu şekilde bir css sprite ayarlanmış kod yazınca herşey güzel çalışıyor.


Peki kod input içinde olunca bunu nasıl yapacağım
 

 

Yeşil Aşkı - Herşey Sevmekle Başlar.
wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al