bahsettiğin yntemin adı css sprite yıllardır kodladığım sitelerde kullanırım.. resimleri photoshop ya da bu işi yapan bazı siteler var orada png olarak ayarla sonra anadive position:relative de anadivin icindeki divlerede position:absolute yap bu şekilde top, bottom, left, right komutlarıyla grünmesini istediğin resmi ayarla Çocukken müzik kesilince sandalyelere oturmaya çalıştığımız oyun, meğerse hep otobüsün alıştırmasıymış.

Makale çok güzele benziyor. Tabi burda background position dediğimiz zaman o ikonların boyutlarınıda girmemiz lazım değil mi? Width ve heigth ında belli olması lazım yoksa resim içindeki ikonu anlayamaz değil mi?

http://instantsprite.com güzel bi site.. resimleri upload et sana css kodlarını verir geriye sadece resimlerin konum değerlerini ayarlamak kalır.. bi de mozilla firefox a firebug kur o şekilde pozisyonları daha seri ayarlayabilirsin. Çocukken müzik kesilince sandalyelere oturmaya çalıştığımız oyun, meğerse hep otobüsün alıştırmasıymış.

hocam hem istek sayısını hemde boyutu düşürmek için byle birşey tercih edliyor site daha hızlı açılıyor https://css-tricks.com/css-sprites/

+ css tasarım yapacaksan her zaman eric mayerin css reset kodlarını dosyanda bulundur maksat browserlar arası farklılıklar yaşama.. sana verdiğim site zaten diğer sitelerden iyi resim olayına gelirsek kalite düsürüyorsa şayet al ordan sprite edilmiş resmi indir photoshopla kendi iconlarını üzerine tekrar yapıstır kaydet o sekilde istediğin czünürlükte kullanabilirsin.. Çocukken müzik kesilince sandalyelere oturmaya çalıştığımız oyun, meğerse hep otobüsün alıştırmasıymış.

aynen hocam iconun boyutu neyse girmen gerekiyor yoksa olmaz mesela fazla girersen başka iconda grünebilir

Hocam çok saol site efsane valla hemen 32 32 den 5 icon koydum alt alta dizdi verdi css inide yazdı. Bende bayadır html tema falan editliyorum ama tabi bir front-end ci kadar bilgim yok. Bu tarz tasarım ve css ile ilgili ipuçları veren benzer siteler varsa paylaşırsan memnun olurum. Birde bu verdiğin sitede resim kalitesi düşüyor mu acaba upload ettikten sonra yani.

http://jqueryte.com/ bu rnekte de olduğu gibi editr için gerekli bütün ikonları tek bir resme koymuşlar. Oradan bütün ikonları style="background-position:-66px 0;" diyerek çekiyorlar. Bu yntemin kullanılma amacı server a daha az istek gitsin diye mi? 20 ikonu tek tek png olarak kaydetsek 20 kere istek gideceği için tek bir resim üzerinde mi çekmeyi tercih ediyorlar? Bir de ikonları svg base64 formatında <img src="" /> de src nin içine yapıştırıyorum. Sayfa boyutunu çok fazla büyütür mü bu teknik. Sonucta svg base64 formatıda uzun oluyor baya. En doğru yntem nedir? Yada başka yntemler de varsa nelerdir?

Teşekkürler hocam.

Hangi siteler var hocam ben genelde iconfinder dan indiriyorum png formatında yada svg base64 şeklinde kullanıyorum.

css sprite; google page speed ya da gtmetrix de siteni koyduğunda sana hangi resimlerinin buna uygulanması gerektiğini syler hocam. tamamen hızı artırmak için. Hello, i am nothing. I come from Neverland.