folder Tahribat.com Forumları
linefolder Html - CSS - XML - JavaScript - Ajax
linefolder Css Te İkonları Tek Bir Resim Üzerinden Çekmek



Css Te İkonları Tek Bir Resim Üzerinden Çekmek

  1. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Hannibal_King
    Hannibal_King's avatar
    Kayıt Tarihi: 22/Ağustos/2010
    Erkek

    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?


    lrny.app
  2. KısayolKısayol reportŞikayet pmÖzel Mesaj
    edminkardes
    edminkardes's avatar
    Kayıt Tarihi: 16/Haziran/2015
    Erkek

    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/

  3. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Hannibal_King
    Hannibal_King's avatar
    Kayıt Tarihi: 22/Ağustos/2010
    Erkek

    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?


    lrny.app
  4. KısayolKısayol reportŞikayet pmÖzel Mesaj
    edminkardes
    edminkardes's avatar
    Kayıt Tarihi: 16/Haziran/2015
    Erkek

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

  5. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Hannibal_King
    Hannibal_King's avatar
    Kayıt Tarihi: 22/Ağustos/2010
    Erkek

    Teşekkürler hocam.


    lrny.app
  6. KısayolKısayol reportŞikayet pmÖzel Mesaj
    21li
    21li's avatar
    Kayıt Tarihi: 21/Haziran/2015
    Erkek

    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


    Çocukken müzik kesilince sandalyelere oturmaya çalıştığımız oyun, meğerse hep otobüsün alıştırmasıymış.
  7. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Hannibal_King
    Hannibal_King's avatar
    Kayıt Tarihi: 22/Ağustos/2010
    Erkek

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


    lrny.app
  8. KısayolKısayol reportŞikayet pmÖzel Mesaj
    21li
    21li's avatar
    Kayıt Tarihi: 21/Haziran/2015
    Erkek

    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ış.
  9. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Hannibal_King
    Hannibal_King's avatar
    Kayıt Tarihi: 22/Ağustos/2010
    Erkek

    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.


    lrny.app
  10. KısayolKısayol reportŞikayet pmÖzel Mesaj
    ozgunlu
    ozgunlu's avatar
    Banlanmış Üye
    Kayıt Tarihi: 11/Kasım/2011
    Erkek

    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.


    Hello, i am nothing. I come from Neverland.
  11. KısayolKısayol reportŞikayet pmÖzel Mesaj
    21li
    21li's avatar
    Kayıt Tarihi: 21/Haziran/2015
    Erkek

    + 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..


    Çocukken müzik kesilince sandalyelere oturmaya çalıştığımız oyun, meğerse hep otobüsün alıştırmasıymış.
Toplam Hit: 994 Toplam Mesaj: 11
css