Forum
Aktif konular
Üyeler
Kurallar
Arama
Tahribat.com Forumları 
Html - CSS - XML - JavaScript - Ajax 
Css Te İkonları Tek Bir Resim Üzerinden Çekmek Css Te İkonları Tek Bir Resim Üzerinden Çekmek
-
http://jqueryte.com/ bu örnekte de olduğu gibi editör 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 yöntemin
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 yöntem nedir? Yada başka yöntemler de varsa nelerdir?
-
hocam hem istek sayısını hemde boyutu düşürmek için böyle birşey tercih edliyor site daha hızlı açılıyor
https://css-tricks.com/css-sprites/ -
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?
-
aynen hocam iconun boyutu neyse girmen gerekiyor yoksa olmaz mesela fazla girersen başka iconda görünebilir
-
Teşekkürler hocam.
-
bahsettiğin yöntemin 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 görünmesini istediğin resmi ayarla
-
Hangi siteler var hocam ben genelde iconfinder dan indiriyorum png formatında yada svg base64 şeklinde kullanıyorum.
-
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.
-
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.
-
css sprite; google page speed ya da gtmetrix de siteni koyduğunda sana hangi resimlerinin buna uygulanması gerektiğini söyler hocam.
tamamen hızı artırmak için.
-
+ 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 cözünürlükte kullanabilirsin..
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla