Merhaba arkadaşlar;uzun bir aradan sonra tekrar birlikteyiz.Bu dersimde sizlere CSS’de profesyonel arabirimcilerin sıkça kullandıkları bir teknikten bahsedeceğim.Öncelikle CSS’de yeni iseniz bu makale size göre değil,yavaşça oltanızı alın ve uzaklaşın derim.Yok ben bu teknik nedir merak ettim, sana ne kardeşim diyorsanız başımın üstünde yeriniz var, dikkatle okumaya devam edin bakalım.
Şimdi, Css sprite tekniğine nasıl giriş yapalım dersek,şöle olacak:
Bir web sayfasında herhangi bir yere Css ile resim yerleştirirken her resmin sayfada gösterilebilmesi için sunucuya bir istek gönderilir.Bu istekler ne kadar fazla olursa web sayfamız o kadar yavaş açılır ya da yavaş çalışır.İşte bunu duyan bazı arkadaşlar bu resimlerin her birini bir resimde toplamışlar ve paralel-meridyen sistemi gibi bir sistem geliştirip istedikleri resmin koordinatlarını girip sayfada göstermişler.Adını da CSS-Sprite tekniği koymuşlar.
Tabi bu Sprite tekniği bir süre sonra meşhur olmuş ve google,youtube,yahoo,amazon gibi büyük web sayfalarında sahne almaya başlamış.Ben size bugün Youtube’nin sprite.png dosyasını göstereceğim.Gördüğünüz gibi Youtube’nin sağında-solunda,altında-üstünde,içinde-dışında kısacası neresinde bir resim kullanılmış ise herbir resim muhtemelen Photoshop ile tek bir resim altında toplanmış.Aşağı da solda ki resimde ki gibi.
Şimdi sıra geldi uygulamaya:Öncelikle hangi resmi çıkarıp alacağız buna bir bakalım;
Hedefimiz Facebook‘un logosu olsun.Yukarıda ortada ki resim gibi;Hedefi belirledikten sonra sıra geldi ölçü almaya,ölçüyü nasıl alırız derseniz o da şöyle olacak.
Büyük resmin sol kenarından hedef resmin sol kenarına olan uzaklık(yukarıda 34px),büyük resmin üst kenarından hedef resmin üst kenarına olan uzaklık(yukarıda 50px) pixel değerinden bize lazım olacak.Ölçümleri firefox ve chorome nin cetvel eklentileri ile alabilirsiniz.Facebook logosunun genişlik ve yükseklik değerlerini de aynı yöntemle alabilirsiniz(yukarıda 15px 15px).Şimdi sıra geldi CSS kodlarını yazmaya;Fazla uzatmadan kodları yazıp devam edelim:

Evet Facebook logosunu bu şekilde aldıktan sonra youtube‘nin kırmızılı logosunu da aşağıda ki gibi bir kod ile alabiliriz.

SONUÇ:

İsterseniz bir örneğimi BURADAN indirip inceleyebilirsiniz.Yani sonuç olarak CSS kodlarının arkaplanın da, aşağıda ki gibi bir işlem gerçekleşiyor.Beni izlemeye devam edin…

  • This movie requires Flash Player 9
  • This movie requires Flash Player 9

Yazar Hakkında

1 Yorum

  1. teşekkürler

Leave a Reply

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Close