CSS Sprite’ları konusunda daha önce bir yazıyla karşılaştınız mı? Sprite’ın bir içecektan olmaktan başka web tasarımından nasıl bir terim olduğunu biliyor musunuz? Eğer bilmiyorsanız Sprite nedir hep beraber öğrenelim…

Sprite nedir?
Sprite bir imaj dosyasıdır. Ama bu imaj dosyanın diğerlerinden tek bir farkı vardır o da birçok imaj dosyasını içinde bulundurmasıdır. Örneğin ülke bayraklarının herbirini tek tek kaydetmek yerine düzgün bir biçimde 1 imaj dosyasının içine kaydedebilirsiniz. Daha sonra css kodlarında bazı derlemeler yaparak her ülkenin bayrağını tek tek o dosyanın içinden ayırabilir ve sitenize ekleyebilirsiniz.

Performans Kazancı
Daha büyük bir imaj dosyasının daha çok hacim kaplayacağı doğrudur fakat tek tek kaydedilen her imajda aslında büyük dosyalardakine oranla daha çok bandwith kaybı vardır. Ayrıca sadece 1 imaj dosyası sunucudan ükleneceği için http request’lerinin sayısı azalarak sayfamız daha çabuk kullanıcıya sunulur.

Nasıl kullanılır?

#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url('../img/image1.gif')}
#nav li a:hover.item1 {background-image:url('../img/image1_over.gif')}
#nav li a.item2 {background-image:url('../img/image2.gif')}
#nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}

Örneğin yukarıdaki gibi bir css kodumuz olsun. Gördüğünüz gibi her linkin arkaplanına bir resim yerleştirilmiş. Bu resimler toplam 20.5 kb yer kaplamakta ve 10 http-request’i ile sayfaya çağrılmakta.

#nav li a {background-image:url('../img/image_nav.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}

Üstteki örnekte ise her imaj toplam 13 kb yer kaplayan bir imaj dosyasının için konulmuş ve CSS dosyası sayesinde bunların tek tek konumları belirlenerek linklenmiş. Bu sayede 1 http-request’i ile sayfalar daha da hızlandırılmış.

Gördüğünüz gibi sitelerin hem hızlanmasını hem de daha az bandwidth kullanmasını sağlayan Sprite’lar sitelerin üstündeki yükü bir nebze olsun azaltmakta. Eğer kolayca Sprite yapmak isterseniz Sprite Generator adlı siteyi kullanabilirsiniz.

Ayrıca konuya örnek olarak gösterilebilecek olan Tek bir resim dosyası ile yuvarlak köşeli kutular yapmak yazısı eburhan tarafından yazılmış.

Not: Bu bildiri Css-Tricks kaynağındaki bu yazıdan yararlanılarak yazılmıştır.

Javascript kütüphanelerinin ilk popüler olduğu günlerde kendimiz çalışıp didinip bunlara uyan kodlar yazmaya çalışırdık. Ama aradan uzun bir süre geçti ve bir hayli gelişen kütüphaneleri kullanan birçok site ortaya çıktı. Hal böyle olunca herkes kütüphaneleri kullanarak siteleri için kullanışlı kodların peşine düştü. Şuradan ulaşabileceğiniz blog da en kullanışlı 10 tane jQuery eklentisini sıralamış.

1. jQuery UI
2. Markitup: istediğiniz textarea’yı html editöre çevirebilecek bir js eklentisi
3. jQuery cookie plugin : cookie’ler üzerinde işlem yapabileceğiniz bir eklenti
4. lightbox
5. jquery corner plugin: yuvarlak köşeler yaratmak için gerekli bir eklenti
6. jtip : basit bir tooltip eklentisi
7. lavalamp : kayma efekti veren bir eklenti
8. superfish : jQuery animasyonlarını kullanan bir menü eklentisi
9. easing : jQuery animasyonlarını basitçe kullanabileceğiniz bir eklenti
10. jcarousel :  dönen menüleri yapabileceğimiz bir eklenti.

Türkçeleştirdiğim yazıya buradan ulaşabilirsiniz.

Table ayraçlarını kullanırken, arkaplan resmi atamasıyla kolaylıkla yapabildiğimiz birden fazla resim dosyalı butonları ilk zamanlarda div ile yapmak zor olmuştu. Fakat çok basit bir mantığı olan div yöntemini woork‘de ele almışlar. Yukarıdaki butonlarda kullanacağımız 1 düğme arkaplanı ve 7-8 tane de özel ikon gerekmekte.

<a class=”button” href=”#”>
<span class=”delete”>Bu yazıyı sil</span>
</a>

Burada gördüğünüz <a> bizim kapsayan elemanımızı span ise ikonu oraya ekleyecek elemanı ifade edecek.

a.button{
background:url(img/button.gif);
display:block;
color:#555555;
font-weight:bold;
height:30px;
line-height:29px;
margin-bottom:14px;
text-decoration:none;
width:191px;
}
a:hover.button{
color:#0066CC;
}

Yukarıdaki CSS kodunda gördüğünüz gibi arkaplana geniş ve yuvarlak köşeli button.gif resmini ekledik.


.delete{
background:url(img/delete.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}

Son kodumuz ile de delete class’ına sahip olan span elementine minik ikon ekledik. Orjinal yazıya ulaşmak ve kullanılan resimleri indirmek için ilgili yazıya bakabilirsiniz.

This article is written by Antonio Lupetti.