Css sprite , xhtml kaynaklı resimlerin birleştirlerek tek bir resim olmasını ve css kaynağına taşınarak hızlı bir şekilde gosterilmesini esas alır. Bu şekilde hem kaynak kod buyuk olcude azalmış olur hem de onlarca resim 1 resim şeklinde cağırıldığı icin sorgu sayısı azalmış olur. Bu sebeple hem hız hem de seo da katkı sağlar. Aşağıda yer alan 2 site ile, kod bilgisine gerek kalmadan css sprite işlemini web sitelerinize uygulayabilirsiniz. CSS Sprites generator CSS Sprite Generator | Project Fondue Css Sprite Tekniği, Kullanımı, Ornek ve Faydalı Kaynaklar Css Sprite kullanılışı itibariyle bir “image replacement” (resim yer değiştirme) tekniğidir. Css sprite cok yeni bir teknik olmamakla birlikte uzun zamandır buyuk siteler tarafından kullanılmaktadır. Css sprite tekniği ozunde birden fazla resmi bunyesinde barındıran “tek” bir resmin arkaplan pozisyonlarının değiştirilmesiyle gosterilmesi mantığını taşımaktadır. Bu soylediğimi uygulamalı olarak gorduğunuzde ne demek istediğimi daha iyi anlayacaksınız. Css sprite bircok yonden hem site sahiplerini hem de ziyaretcileri mutlu etmektedir. Cunku bircok resim bağlantı ve resim ogenin kullanıldığı bir sitede bu resimlerin her biri icin sunucumuza bir istek gitmektedir. Sizlerin de bildiği uzere Http request’lerin fazla olması sunucuya olan yuku fazlalaştırmakta ve site acılış hızını etkilemektedir. Css sprite bu yonden kullandığı tek bir resim dosyası nedeniyle bircok bağlantı isteğine gerek kalmadan işlevini yerine getirmektedir. Bununla birlikte sitemizi ziyaret eden ziyaretciler de kullandığımız resim bağlantılarda (kısa bir sure de olsa) yeni resmin yuklenmesini beklemeyecektir. Makalemizin başında soylediğimiz gibi Css sprite tekniğini bircok buyuk 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 icin orneğimize gecelim. CSS SPRITE TEKNİĞİ İLE YAPILAN BİR ORNEK Bu orneğ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 ornek olarak kullanacağım resmi gorebilirsiniz. Oluşturduğumuz ornek resimde basit olarak bir information ikonu ve hakkımda yazısı mevcut. Resmin alt bolumunde ise bu resmin hover efekti ile etkilendiğinde gorunecek ş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 bolumunu goreceğiz. Fare ile resim bağlantımızın uzerine geldiğimizde ise resmin hover ile gorunmesini istediğimiz diğer kısım gorunecek. İşte tam bu noktada Css’nin nimetlerinden yararlanarak “background-position” (arkaplan resim pozisyonu) parametresi ile hover anında oluşacak goruntuyu elde edeceğiz. Dilerseniz hemen orneğimizin Css kodunu yazalım. ORNEĞİMİZDE KULLANACAĞIMIZ CSS ve XHTML KODU PHP- Kodu: 1 2 Hakkında
3 01 #alan 02 03 #alan ul 04 05 #alan li 06 07 #alan ul li a 13 14 #alan ul li a:hover Yukarıda kullanmış olduğumuz Css ve Xhtml kodunu biraz anlatarak uygulamamız hakkında bilgi vermeye devam edelim. Css kodunun başında gorduğunuz uzere alan isimli bir id oluşturduk. Bu alana 200px genişlik atadık. Sonrasında yine #alan icerisinde 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 gorunmemesi icin gerekliydi. Yine li icinde float:left ozelliğini kullanarak resmin sola yaslı olmasını sağladık. Şimdi belki de işin en onemli kısmına geldik. Artık #alan icinde bir a etiketi tanımlayacağız. Burada da hazırlamış olduğumuz resmi gostereceğiz. Ornek kodları incelerseniz hakkinda.gif isimli resmi arkaplan resmi olarak gosterdik. Resmin tekrarlanmamasını istedik ve pozisyon olarakta 0px 0px değerleri kullandık. Resmin eni ve boyunu piksel cinsinden yazdık. Dikkatinizi cekti mi bilmiyorum ancak hakkinda.gif resmi 200px*100px boyutunda olmasına rağmen resmi en boy olarak 200px*50px tanımladık. Boylelikle resmin gorunebilir alanlarını biraz daha daraltmış olduk. Tanımladığımız a etiketinin a:hover bolumunde ise arkaplan değerlerinde değişiklik yaptık. Başlangıcta 0px 0px olarak vermiş olduğumuz arkaplan pozisyon değerini bu sefer 0px -50px olarak değiştirdik. Boylelikle hakkinda.gif isimli resmin belirlenen pozisyonlardaki gorunumunu alabilecektik. Yukarıdaki basit ornekte gorduğunuz uzere aslında Css sprite tekniğinde onemli olan unsur kullanacağımız resmi iyi ayarlamak ve arkaplan pozisyonlama ozelliklerini cok iyi bilmek. Ornek resimde biz tekniği dikey yani vertical olarak kullandık. Bu nedenle arkaplan pozisyonlamamızı yaparken buna gore bir css değeri atadık. Şayet resmimiz yanyana olsaydı vereceğimiz pozisyon değeri daha farklı olacaktı. Şimdi dilerseniz yan yana bir ornek yapalım. 2. ORNEĞİMİZDE RESMİMİZ YATAY KONUMDA PHP- Kodu: 1 2 3
Anasayfa
4
Hakkında
5 6 01 #ornek2 02 03 #ornek2 ul 04 05 #ornek2 li 06 07 #ornek2 a#anasayfa 13 14 #ornek2 a#anasayfa:hover 20 21 #ornek2 a#hakkinda 27 28 #ornek2 a#hakkinda:hover Kodları incelediğimizde aslında ilk orneğimizden farklı değil. Burada değişiklik olarak şunu yaptık. Oncelikle ornek2 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 orneğimizden biraz farklı olarak her bir a etiketine id atamasında bulunduk. #ornek2 a#anasayfa olarak belirlediğimiz bolumde arkaplan resmimizi atadık. Pozisyon olarakta sol ust taraftan 0px uzaklıkta olmasını ve en uste dayalı durmasını sağladık. Bu aşamadan sonra #ornek2 a#anasayfa:hover bolumunde ise arkaplan pozisyonumuzu soldan 100px iceri girecek şekilde eksi değer vererek tanımladık. Aynı css kodu uzerinde 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 uzere sectiğimiz veya oluşturduğumuz resmi de iyi analiz etmemiz gerekmekte. Resmin hangi pikselden sonraki boşlukları değerlendirilecek, resmin hangi bolumu gorunecek, hover etkisinde ne gibi değişim olacak gibi kriterleri bilmek uygulamamızı doğru hazırlamak acısından oldukca onemli. (Css sprite konusunda aslına bakarsanız tek bir makale ile anlatımımı tamamlamayı duşunuyordum. Ancak paylaşılacak cok bilgi var ve Css sprite ile ilgili değişik uygulamaları ve kaynakları da anlatmak istiyorum. Kısa sure icinde Css sprite konusunda bu makalenin devamı niteliğinde bir devam makalesi yazacağım. Css sprite ile ilgili bu makale umarım sizlere faydalı olmuştur. t-infection.com) __________________