İsmail Bayram > > CSS Sprite Nedir? Nasıl Kullanılır?

Eyl
04
Kategori :
Tarih : 04.09.12
Görüntülenme : 1.458
Yorum : 18

CSS Sprite Nedir? Nasıl Kullanılır?

css-sprite

Merhaba arkadaşlar…Bu yazımda CSS’te tüm hazır sistemler ve diğer sistemler için kullanılması gereken,SEO ve site hızını artıran bir tekniği anlatacağım.CSS SpriteYazımı başlıklar halinde yazayım dedim buyrun;

 

 

 

 

 

CSS Sprite Tekniği Nedir?

CSS Sprite tekniği, bir sitede bulunan tüm resimlerin tek bir resimde alt alta veya üst üste sıralayarak daha sonra css kodlarıyla istenilen resmi o tek resimden çeken bir tekniktir.

 

CSS Sprite Tekniğinin Yararları Nelerdir?

Eğer bir sitede CSS Sprite kullanılmışsa, site daha hızlı açılır.Çünkü tüm resimler tek bir resimde toplandığı için hem birden fazla resim için sorgu oluşturulmaz hem de tek bir resmin boyutu tüm resimlerin boyutundan daha azdır.Böylece ziyaretçileriniz sitede sıkıntı çekmez.Ayrıca arama motorları da sitenizi daha çabuk indexler ve arama motorları bu tarz siteleri daha çok sever.Böylece SEO da yapmış olursunuz.

 

CSS Sprite nasıl kullanılır?

Evet sizin için bir video çektim.Videodaki materyaller için tıklayın.

Rar şifresi : ismailbayram.net

 

Video

(Videoda Çark simgesine tıkladıktan sonra ’720HD’ seçeneğini seçerek en iyi kalitede izleyebilirsiniz)

VN:F [1.9.22_1171]
Rating: 9.6/10 (7 votes cast)
VN:F [1.9.22_1171]
Rating: +5 (from 5 votes)
CSS Sprite Nedir? Nasıl Kullanılır?, 9.6 out of 10 based on 7 ratings

Yazar Hakkında

16 Kasım 1996′da dünyaya Balıkesir’de gözlerimi açtım.Tenoloji ve elektronik tarzı şeyler her zaman ilgimi çekmiştir.7 yaşımda ilk internet cafeye gittiğim gün hepimizin en az bir kere bile oynadığı CS 1.6 ile tanıştım.Tabi o zamanlar küçüktük böyle webmasterlıkmış falan yok bilmiyoruz adını dahi.Sonra evime bilgisayar alınmasıyla iyice aram yakınlaştı.Gamemaker ile içli dışlı oldum.Daha sonra üye olduğum bir forum sitesi sayesinde bilgisayarın temeline girdim.2012 Nisan ayından itibaren HTML&CSS ve WordPress’te kendime göre önemli yollar kathettim.Biraz da PHP bilgimin olması beni WordPress ile daha kolay yakınlaşmamı sağladı ve vazgeçilmezim oldu.Şimdi ise burdayım.Ayrıntılı Bilgi için En iyisi tek olmak adlı makaleme bakabilirsiniz.

Yazıyı Paylaş!
Yorumlar(18)
  1. Torriad 04 Eylül 2012

    Çok Açıklayıcı Bir Yazı Ellerine Sağlık Kardeşim :)


  2. Burak Cebel 05 Eylül 2012

    Gerçekten önemli bir konuya el atmışsın. Emeğine sağlık.


  3. bcakir 19 Eylül 2012

    Web sitesini hızlandırmak isteyenlerin mutlaka eğilmesi gereken önemli bir konuyu açıklamışsın.


  4. Enes 08 Ekim 2012

    Emeğinize sağlık, kendi sitelerimizde paylaşabilirmiyiz ?


  5. anonim 11 Ekim 2012

    daha konuşmayı bilmeden video çekiyon hem özeniyon hem ezber yapıyon rezalet,,,,


    • ImOttoman 11 Ekim 2012

      Ben bir şeyler yapmaya çalışıyorum, eleştirilere tabiki açığım ama bu kadar kötü bir dille değil madem siz çekin ben bizzat yayınlayacağım.


  6. Güncel Blog 30 Ekim 2012

    Hocam eline sağlık diyerek yoruma başlamak istiyorum. Mesela video içerisinde çok güzel anlatımda bulunmuşsunuz ama diyelim sprite tekniğinde bir resme link nasıl vereceğiz. Bu konuda çok fransızım umarım yardımınız dokunur.


    • ImOttoman 30 Ekim 2012

      Sorduğunuz soru başlangıç seviyesinde vereceğim kodu kendinize göre düzenleyebilirsiniz,fakat en kısa zamanda google a html dersleri diye aratıp az da olsa çok güzel şeyler kapabilirsiniz buyrun kod;

      <a href=”link adresi” rel=”nofollow”><img src=”resim.jpg” alt=”" /></a>


  7. Güncel Blog 31 Ekim 2012

    Hocam ilginiz adına tşekkürler. Ama şöyle bir durum var! Css üzerinden çağırdığımız resme link vermeden bahsettim. Yani resmin içerisinde class=”resim ismi” gecmesi gerekmiyor mu? :S Bazı araştırmalar sonucu böyle bir şey anlatılmıştı. Yani ben ana sayfama css Sprite yapacağım ve bazı resimlere link vermem gerekiyor. Onu anlatmanızı rica edecektim.


    • ImOttoman 31 Ekim 2012

      Anladım dediğinizi.Öncelikle css kodları;

      .resim{background:url(resim.png) 0px 0px no-repeat;}

      html kodları;

      <a href=”link adresi”><div class=”resim”></div></a> bu kodlar yardımcı olacaktır.W3 standartlarında yanlış bir koddur div e link vermek.Bu yüzden şunuda yapabilirsiniz;

      <div class=”resim” onclick=”location.href=’link adresi’”></div>


  8. ismail kıraç 10 Ocak 2013

    Selamın Aleyküm kardeşim güzel anlatım lakin biliyorsunki wordpress kullanıcıları hazır temalar kullanmakta ve her eklentinin resmide ayrı yerlerde senin anlattıgın belki sıfırdan bir tasarım yapacak ve css bilgisi az olan birinin işine yaraya bilir bilgin var belli asagıdaki sorularıma cevap verip bir video hazırlayabilirmisin
    1. sorum tüm resimleri tek bir css içerisinde toplayıp yayınlayabilirmiyiz
    sitenin genelinden bahsediyorum
    2. sorum bir kac anlatım buldum ugrastım ama yapamadım css üzerinde hiç bir etkim yok anlamıyorum hazır tema üzerinde temanın resimlerini nasıl css de toplarız bunun bir videosunu cekip koysan bizlerde yararlansak

    tesekkür ederim kolay gelsin


    • ImOttoman 11 Ocak 2013

      1. sorunuza cevabim css sprite konumda mevcut
      2. sorunuz ise iyi bir arastirma yapin


  9. Mert 08 Şubat 2013

    Şükür güzel videolu anlatım buldum. Emeğinize sağlık.


  10. OnlineFilmci 13 Şubat 2013

    Teşekkürler. DLE sitelerimde kullanıyorum seo açısından baya bi faydası var


  11. Numan Türle 10 Mart 2013

    Kesınlıkle istedigin şeyi anlatmişsin teşekur ederim kardeşim :)



Sen de Yorumla!

Spamlara karşı soru: