Yeniden merhabalar. Bu gönderimizde sizlerle Css Sprite tekniğini konuşacak, hazırlamış olduğumuz örnekler ile konumuzu destekleyecek, Türkçe ve yabancı kaynakları paylaşaçağız. Dilerseniz hemen başlayalım.
Css Sprite kullanılışı itibariyle bir “image replacement” (resim yer değiştirme) tekniğidir. Css sprite çok yeni bir teknik olmamakla birlikte uzun zamandır büyük siteler tarafından kullanılmaktadır. Css sprite tekniği özünde birden fazla resmi bünyesinde barındıran “tek” bir resmin arkaplan pozisyonlarının değiştirilmesiyle gösterilmesi mantığını taşımaktadır. Bu söylediğimi uygulamalı olarak gördüğünüzde ne demek istediğimi daha iyi anlayacaksınız.
Css sprite birçok yönden hem site sahiplerini hem de ziyaretçileri mutlu etmektedir. Çünkü birçok resim bağlantı ve resim ögenin kullanıldığı bir sitede bu resimlerin her biri için sunucumuza bir istek gitmektedir. Sizlerin de bildiği üzere Http request’lerin fazla olması sunucuya olan yükü fazlalaştırmakta ve site açılış hızını etkilemektedir. Css sprite bu yönden kullandığı tek bir resim dosyası nedeniyle birçok bağlantı isteğine gerek kalmadan işlevini yerine getirmektedir. Bununla birlikte sitemizi ziyaret eden ziyaretçiler de kullandığımız resim bağlantılarda (kısa bir süre de olsa) yeni resmin yüklenmesini beklemeyecektir.
Makalemizin başında söylediğimiz gibi Css sprite tekniğini birçok büyük site kullanmaktadır. Google, Youtube, Yahoo, Amazon, Digg gibi siteler bunların başında gelmektedir. Bu kısa girişten sonra dilerseniz tekniği daha iyi anlayabilmek için örneğimize geçelim.CSS SPRITE TEKNİĞİ İLE YAPILAN BİR ÖRNEKBu örneğimizde ben iki farklı resmi tek bir resim dosyasında birleştirdim. Resmin en ve boy genişliğini de ayarlayarak iki resmi tek bir resim dosyasında toplamış oldum. Aşağıda örnek olarak kullanacağım resmi görebilirsiniz.
Oluşturduğumuz örnek resimde basit olarak bir information ikonu ve hakkımda yazısı mevcut. Resmin alt bölümünde ise bu resmin hover efekti ile etkilendiğinde görünecek şekli mevcut. Aslında iki aynı boyutta resim ve tek bir resim dosyasında birleştirilmiş durumda. Tekil halde 200px*50px olan resim iki resmin alt alta gelişiyle 200px*100px bir boyut kazanıyor. Biz bu tekniği uyguladığımızda resmin ilk bölümünü göreceğiz. Fare ile resim bağlantımızın üzerine geldiğimizde ise resmin hover ile görünmesini istediğimiz diğer kısım görünecek. İşte tam bu noktada Css’nin nimetlerinden yararlanarak “background-position” (arkaplan resim pozisyonu) parametresi ile hover anında oluşacak görüntüyü elde edeceğiz. Dilerseniz hemen örneğimizin Css kodunu yazalım.ÖRNEĞİMİZDE KULLANACAĞIMIZ CSS ve XHTML KODU#alan {width:200px;}#alan ul {margin:0;padding:0;}#alan li {float:left;text-indent:-9999px; }#alan ul li a{ width:200px; height:50px; display:block; background:url(“hakkinda.gif”) no-repeat 0px 0px; }#alan ul li a:hover{ width:200px; height:50px; display:block; background:url(“hakkinda.gif”) no-repeat 0px -50px; }Yukarıda kullanmış olduğumuz Css ve Xhtml kodunu biraz anlatarak uygulamamız hakkında bilgi vermeye devam edelim. Css kodunun başında gördüğünüz üzere alan isimli bir id oluşturduk. Bu alana 200px genişlik atadık. Sonrasında yine #alan içerisinde ul ve li etiketlerini ayrı ayrı tanımladık. Burda dikkat ettiyseniz alan isimli div’in li etiketini tanımlarken text-indent:9999px; gibi bir değer kullandık. Bu değer Xhtml kodunda bağlantımıza vermiş olduğumuz metin linkin tarayıcıda görünmemesi için gerekliydi. Yine li içinde float:left özelliğini kullanarak resmin sola yaslı olmasını sağladık.
Şimdi belki de işin en önemli kısmına geldik. Artık #alan içinde bir a etiketi tanımlayacağız. Burada da hazırlamış olduğumuz resmi göstereceğiz. Örnek kodları incelerseniz hakkinda.gif isimli resmi arkaplan resmi olarak gösterdik. Resmin tekrarlanmamasını istedik ve pozisyon olarakta 0px 0px değerleri kullandık. Resmin eni ve boyunu piksel cinsinden yazdık. Dikkatinizi çekti mi bilmiyorum ancak hakkinda.gif resmi 200px*100px boyutunda olmasına rağmen resmi en boy olarak 200px*50px tanımladık. Böylelikle resmin görünebilir alanlarını biraz daha daraltmış olduk.
Tanımladığımız a etiketinin a:hover bölümünde ise arkaplan değerlerinde değişiklik yaptık. Başlangıçta 0px 0px olarak vermiş olduğumuz arkaplan pozisyon değerini bu sefer 0px -50px olarak değiştirdik. Böylelikle hakkinda.gif isimli resmin belirlenen pozisyonlardaki görünümünü alabilecektik.
Yukarıdaki basit örnekte gördüğünüz üzere aslında Css sprite tekniğinde önemli olan unsur kullanacağımız resmi iyi ayarlamak ve arkaplan pozisyonlama özelliklerini çok iyi bilmek. Örnek resimde biz tekniği dikey yani vertical olarak kullandık. Bu nedenle arkaplan pozisyonlamamızı yaparken buna göre bir css değeri atadık. Şayet resmimiz yanyana olsaydı vereceğimiz pozisyon değeri daha farklı olacaktı. Şimdi dilerseniz yan yana bir örnek yapalım.2. ÖRNEĞİMİZDE RESMİMİZ YATAY KONUMDA
<span style="color: #ff0000;"><div id="ornek2"> <ul> <li><a href="deneme.html" title="Anasayfa" id="anasayfa">Anasayfa</a></li> <li><a href="deneme.html" title="Hakkımda" id="hakkinda">Hakkında</a></li> </ul> </div> </span>
<span style="color: #ff0000;">#ornek2 {width:400px;height:30px;}
#ornek2 ul {margin:0;padding:0;list-style:none;}
#ornek2 li {float:left;text-indent:-9999px; }
#ornek2 a#anasayfa{
width:100px;
height:30px;
display:block;
background:url("buyuk.gif") no-repeat 0px top;
}
#ornek2 a#anasayfa:hover{
width:100px;
height:30px;
display:block;
background:url("buyuk.gif") no-repeat -100px top;
}
#ornek2 a#hakkinda{
width:100px;
height:30px;
display:block;
background:url("buyuk.gif") no-repeat -200px top;
}
#ornek2 a#hakkinda:hover{
width:100px;
height:30px;
display:block;
background:url("buyuk.gif") no-repeat -300px top;
}</span>
Kodları incelediğimizde aslında ilk örneğimizden farklı değil. Burada değişiklik olarak şunu yaptık. Öncelikle örnek2 isimli bir div alanı tanımladık. Yine aynı şekilde bu alana ait birer ul ve li tanımı yaptık. Sonrasında ise ilk örneğimizden biraz farklı olarak her bir a etiketine id atamasında bulunduk. #ornek2 a#anasayfa olarak belirlediğimiz bölümde arkaplan resmimizi atadık. Pozisyon olarakta sol üst taraftan 0px uzaklıkta olmasını ve en üste dayalı durmasını sağladık. Bu aşamadan sonra #ornek2 a#anasayfa:hover bölümünde ise arkaplan pozisyonumuzu soldan 100px içeri girecek şekilde eksi değer vererek tanımladık. Aynı css kodu üzerinde a#hakkinda id’sinde de benzer tanımlamayı yaptık.
Makalemizde de tekrarladığımız gibi aslına bakılırsa Css sprite css image background positioning kullanılarak oluşturuluyor. Bu nedenle Css’de arkaplan pozisyonlamayı iyi bilmemiz gerekiyor. Bununla birlikte Css sprite tekniğinde kullanmak üzere seçtiğimiz veya oluşturduğumuz resmi de iyi analiz etmemiz gerekmekte. Resmin hangi pikselden sonraki boşlukları değerlendirilecek, resmin hangi bölümü görünecek, hover etkisinde ne gibi değişim olacak gibi kriterleri bilmek uygulamamızı doğru hazırlamak açısından oldukça önemli.
Bir yanıt yazın