Css Sprite Nedir?

Css Sprite Nedir?

Css Sprite, siteye çağırılan resimleri bir araya toparlayıp tek resim haline getirerek alandan ve zamandan tasarruf yapmamızı sağlayan önemli bir Css özelliğidir.Bu sayede sitenizin açılış hızı düşecek bu da size Seo açısından yararlı olacaktır.

Kullanımı :

Css Sprite tekniğini kullanmak için bir kaç site bulunmakta.Bunlar;

1)tr.spritegen.website-performance.org/

2)http://css-sprit.es/

3)http://www.spritecow.com/

Daha fazla site  bulunmakta fakat en işe yarayanları bunlar.Hem kullanımı kolay hem de arayüzü basit oldğundan Spritecow üzerinden anlatımı yapacağım.

Öncelikle Photoshop benzeri bir resim düzenleyici program ile arka plan rengi olmayan (transparan) bir resim dosyası oluşturuyoruz.Bu dosyaya web sitemizde kullandığımız ve her sayfada gözüken resimleri bir arada toparlıyoruz.Ve dosyayı .Png şeklinde kaydediyoruz.

Dikkat edin Css Spite tekniği yazı görselleri için değildir.Sadece web sitenizde her sayfada tekrarlayan temamızın resimleridir.

Oluşturduğumuz resim şuna benzeyecek:

Bir Css Sprite dosyası örneği.

Bir Css Sprite dosyası örneği.

Resmimizi oluşturduktan sonra;

1)Spritecow adlı siteye giriyoruz.”Open Image” adlı butona tıklayıp Css Sprite uygulayacağımız resmi yüklüyoruz.

Spritecow

2)Resmimizi yükledikten sonra “Select Sprite” adlı araç ile seçimimizi yapıyoruz.

Css sprite

3)Alt tarafa verilen .sprite şekinde başlayan kısmı Css dosyamızdaki resmin bulunduğu yere yapıştırıyoruz.

Css sprite tekniğinide anlatmış olduk.Umarım yararlı olmuştur.Kolay gelsin.Yorumlarınızı eksik etmeyin.

Not: Anlattığım site seçimi otomatik yaptığı için bazı resimleri algılayamıyor.Böyle durumlarda http://css-sprit.es/ ‘i kullanabilirsiniz.

Yazı nasıldı ama?
1 Yıldız2 Yıldız3 Yıldız4 Yıldız5 Yıldız (1 votes, average: 5,00 out of 5)
Loading...
Etiketler : Css Sprite, css sprite nedir, Css teknikleri, kodları, nasıl yapılır,
adet güzel yorum :)
  1. Bende Css sprite’yi zor bişey sanardım. Koordinatları nasıl belirliyorlar diye merak ediyordum 🙂 Okuyunca anladım baya kolaymış. Teşekkürler

  2. Bilgilendirme için teşekkürler. Oldukça faydası dokundu. İngilizce kaynakları okuyup uygulamaya çalışmaktan canımız çıkmıştı.

Yorumlar,bizi seven insanlar!
Daha fazla Nasıl Yapılır?, Tasarım
Css3 hyperspace animation
CSS3 harikası HyperSpace

Css3 çıktı çıkalı artık animasyon anlayışımız değişti.Önceden Flash ile yaptıklarımızı şimdi css3 ile yapıyorlar.Hatırlarsanız şu yazımda da Css3 ile yapılmış Dünyadan...

Kapat