logo

CSS Sprite Nedir?

css sprite

Css Sprite, sitenizde sık kullandığınız fotoğrafların, birleştirilerek tek bir fotoğraf haline getirilmesi ve sonra da bu ana fotoğraftan istediğiniz fotoğrafın koordinat gösterilerek çekilmesidir.

 

Karışık mı? geldi. Gelmesin. Aslında çok basit. Ancak Css Sprite özelliğini nerede kullanmamız gerektiğini iyi bilmeliyiz. Her web sitesinde bu özellik kullanılamaz.

 

Css Sprite özelliği, web sitenizin her sayfasında aynı fotoğrafları kullanıyorsanız sizin için idealdir. Ancak web sitenizin her sayfasında farklı fotoğraflar kullanıyorsanız, sprite özelliği, size çok ta fayda sağlamaz.

 

CSS Sprite yapımı çok kolaydır. Aynı zamanda CSS Sprite, Web Yöneticine büyük kolaylık sağlar. CSS Sprite sayfa yüklenme hızını arttırır. Bu da sitenizin SEO puanı için önemli bir avantaj sağlar. İşin sistemini kavradığınızda sprite tekniğinin ne kadar kolay ve kullanışlı olduğunu göreceksiniz.

 

Şimdi gelelim CSS Sprite Nedir? Nasıl Yapılır? Önce basit olarak anlatalım, sonra bir örnekle açıklayalım.

Bir web sitemiz var. Bu sitemizde ailemizi tanıtıyor olalım. Ailemiz beş kişi. Anne, baba, abi, kardeş ve bir de kendimiz. Ana sayfamızda ailemizin tüm fertlerinin bir arada olduğu fotoğraf var.

 

Bunu nasıl yaptık?

Ailemizin tüm fertlerinin vesikalık fotoğraflarını bir seferde tarayıcıya koyduk ve taradık. Şimdi elimizde tek bir fotoğraf var. Bu fotoğrafta, babamız, annemiz, kardeşimiz, abimiz ve biz varız. Bu fotoğrafı ailem.jpg olarak kaydettik.

 

Web sitemiz altı sayfadan oluşuyor. Ana sayfada ailem.jpg fotoğrafını yayınlıyoruz. Sonraki beş sayfada ailemizi ve kendimizi tanıtıyoruz.

Sonraki her bir sayfada tanıttığımız aile bireyinin fotoğrafını, ana fotoğraf olan ailem.jpg fotoğrafından koordinat vererek çekiyoruz.

 

İşte bu işleme Css Sprite diyoruz.

 

Şimdi Css Sprite örneğimize geçelim.

css spriteSoldaki büyük fotoğrafın içinde 4 adet küçük fotoğraf var. Tüm fotoğrafın yüksekliği 255 pixel genişliği ise 305 pixel. Kırmızı çizgilerin genişliği de 5 pixel. Fotoğrafın adı da hayvanlar-alemi.jpg olsun.

 

Her bir küçük fotoğrafın boyutları da, yükseklik 120 piksel genişlik 145 piksel. Web sitemizin her bir sayfasında bu küçük fotoğrafları göstermek istiyoruz.

 

Tabi şunu belirtmekte fayda var. Bu işlemi, anlattığımız şekilde basitçe kullanmak ve mantığını anlamak için, sitenizde Div kullanıyor olmalısınız. Bu nedenle, Div'in ne olduğunu ve nasıl yapıldığını da biliyor olmalısınız. Eğer Div ve CSS konusuna yabancı iseniz CSS Nedir? ve Div Nedir? sayfalarına da bir göz atmanızda fayda var.

 

Ana sayfada bu fotoğrafın tamamını gösterdik. Şimdi alt sayfada kuş fotoğrafını göstermek istiyoruz. O fotoğrafı da bu ana fotoğraftan CSS Sprite tekniği ile çekmek istiyoruz.

 

css sprite kodÖnce bir div oluşturuyoruz. Bu div'in adı kus olsun. Css Sprite tekniği ile ana fotoğraftan sadece kuş fotoğrafını çekeceğiz. Solda gördüğünüz kodlarla kus div'ine şunu söylüyoruz.

 

Senin bir fotoğraf göstermeni istiyorum. Bu fotoğrafı, images klasöründeki hayvanlar-alemi.jpg fotoğrafından alacaksın. Alacağın bu fotoğrafın yüksekliği 120 pixel, genişliği 145 pixel. Alacağın bu fotoğraf, ana fotoğrafta, soldan -5 pixelde, yukarıdan da -5 pixelde başlıyor (Kırmızı çizgilerin genişliği 5 pixel olduğu için). Bu noktadan itibaren 120 x 145 pixel boyutundaki alanı al ve göster. Ancak bu fotoğrafı tekrarlama.

 

css sprite kod 1Burada da adı kedi olan bir div oluşturuyoruz. Css Sprite tekniği ile ana fotoğraftan sadece kedi fotoğrafını çekeceğiz. Solda gördüğünüz kodlarla kedi div'ine şunu söylüyoruz.

 

Senin bir fotoğraf göstermeni istiyorum. Bu fotoğrafı, images klasöründeki hayvanlar-alemi.jpg fotoğrafından alacaksın. Alacağın bu fotoğrafın yüksekliği 120 pixel, genişliği 145 pixel. Alacağın bu fotoğraf, ana fotoğrafta, soldan -155 pixelde, yukarıdan da -5 pixelde başlıyor. Bu noktadan itibaren 120 x 145 pixel boyutundaki alanı al ve göster. Ancak bu fotoğrafı tekrarlama.

 

Diğer fotoğrafları da Css Sprite tekniği ile sayfamıza çekmemiz mümkündür. Dreamweaver programını kullanabiliyorsanız bu işlem çok daha kolay yapılabilir.

 

Css Sprite tekniğini özetlersek;

Bir ana fotoğrafımız var. Bu ana fotoğraf web sitemizin sayfalarında kullanacağımız on adet fotoğraftan oluşuyor. Her bir sayfamızda kullanacağımız küçük fotoğrafı, Css Sprite özelliğini kullanarak ana fotoğraftan çekmek istiyoruz.

 

Bir div yapıyoruz. Bu div'in özelliklerini şöyle belirliyoruz. (Örnek kedi içindir)

height: 120px;
width: 145px;
Ana fotoğraftan, sana verdiğim koordinattan itibaren yüksekliği 120 pixel ve genişliği 145 pixel olan alanı al ve göster.

background-image: url(images/hayvanlar-alemi.jpg) Ana fotoğraf bu. İmages klasöründeki hayvanlar-alemi.jpg.

background-repeat: no-repeat Css Sprite tekniğini kullanarak çektiğin fotoğrafı tekrarlama.

background-position: -155px -5px Ana fotoğraftan çekeceğin fotoğrafın koordinatı. X (soldan) ekseni için - 155 pixel, Y (yukarıdan) ekseni için - 5 pixel.

 

Css Sprite tekniğini kullandığımızda div'in yüksekliği ve genişliği de, göstermek istediğimiz kedinin veya kuşun fotoğraflarının boyutları ile aynı olmalı. Div'in boyutları, göstermek istediğiniz küçük fotoğrafın boyutlarından küçük olursa, fotoğrafın tamamı gösterilmez. Div'in boyutları, göstermek istediğiniz küçük fotoğrafın boyutlarından büyük olursa, o zamanda fotoğrafın yanındaki diğer küçük fotoğraflardan da anlamsız parçalar görürsünüz.

 

Son olarak sprite konusunda şunu belirtmek zorundayız. Yukarıda verdiğimiz örnekler aslında Css Sprite özelliği için uygun örnekler değildir. Sprite özelliğinin daha kolay anlaşılması için bu örnekleri verdik.

 

Çünkü sprite özelliği genelde web sitenizin her sayfasında aynı fotoğrafları kullanacak iseniz idealdir. Eğer sayfalarınızda farklı fotoğraflar kullanacak iseniz sprite özelliğini kullanmak için bu kez her sayfa adına bir css dosyası hazırlamak zorunda kalırsınız.

 

Bu nedenle sprite özelliğini kullanmadan önce her sayfada kullanacağınız fotoğrafları belirleyin. Bu fotoğrafları tek bir fotoğrafta birleştirin.(Logo, facebook butonu, twitter butonu ve instagram butonu gibi.) Daha sonra da Css sprite özelliğini kullanın diyoruz ve Css Sprite konusunu kapatıyoruz.

Copyright © 2013 | Site Gezgini.Com