Mintik adlı üyeden alıntı: mesajı görüntüle
Bunun en kısa hali şu şekilde olur.
Html :
<div class="cerceve">
<li><a href="#" title="Facebook"></a></li>
<li><a href="#" title="Twitter"></a></li>
<li><a href="#" title="Google+"></a></li>
<li><a href="#" title="Youtube"></a></li>
<li><a href="#" title="RSS"></a></li>
</div>
Css :

.cerceve {
   width:300px;
    height:60px;
    background-color:black;
}
.cerceve li {
   display: block;
   width: 60px;
   height: 60px;
    list-style:none;
   float:left;
}

.cerceve li:nth-child(1){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/f1.png") no-repeat 0 0;
}
.cerceve li:hover:nth-child(1){
 background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/f2.png") no-repeat 0 0;
}
.cerceve li:nth-child(2){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/t1.png") no-repeat 0 0;
}
.cerceve li:hover:nth-child(2){
background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/t2.png") no-repeat 0 0;
}
.cerceve li:nth-child(3){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/g1.png") no-repeat 0 0;
}
.cerceve li:hover:nth-child(3){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/g2.png") no-repeat 0 0;
}
.cerceve li:nth-child(4){
background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/y1.png") no-repeat 0 0;
}
.cerceve li:hover:nth-child(4){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/y2.png") no-repeat 0 0;
}
.cerceve li:nth-child(5){
background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/r1.png") no-repeat 0 0;-content/themes/pitch/images/r1.png") no-repeat 0 0;
}
.cerceve li:hover:nth-child(5){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/r2.png") no-repeat 0 0; 
}
İşlemin sonucu böyle çıkıyor şekilde çıkıyor.
Daha fazla kısaltmak istersen Font Awesome kullanmalısın. Hazır png formatında resimler kullanarak daha fazla kısamazsınız.
yardımın için çok sağol dostum.

tdemirtas adlı üyeden alıntı: mesajı görüntüle
css sprite tekniği uygulanması gerekir.


Burada hepsini bir araya koydum, sprite tekniğini nasıl yapabiliriz?

--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 00:51:56 -->-> Daha önceki mesaj 00:50:03 --

Mintik adlı üyeden alıntı: mesajı görüntüle
Doğru bide sprite vardı
Bu arada konu yanlış kategoride açılmış.

wordpres blogumla alakalı olunca buraya açıverdim dostum