CSS Sprite Tekniği

Sprite tekniği nedir?

Sprite tekniği birden fazla resmi bünyesinde barındıran tek bir resmin arka plan pozisyonlarının değiştirilmesiyle (büyük resimlerde, örneğin smiley gruplarında x,y kordinat düzleminde) gösterilmesidir.

Daha iyi anlamanız açısından bir link hover örneği verelim:

Örnek resim

[COLOR=#000000][FONT=Inconsolata]<[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]div [/FONT][/COLOR][COLOR=#0000FF][FONT=Inconsolata]id[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]=[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]"menu"[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR]
[COLOR=#000000][FONT=Inconsolata]<[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]ul[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]<[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]li[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]<[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]a [/FONT][/COLOR][COLOR=#0000FF][FONT=Inconsolata]href[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]=[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]"#" [/FONT][/COLOR][COLOR=#0000FF][FONT=Inconsolata]title[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]=[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]"Anasayfa"[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]Anasayfa[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]</[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]a[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]</[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]li[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]</[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]ul[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR]
[COLOR=#000000][FONT=Inconsolata]</[/FONT][/COLOR][COLOR=#AA00BB][FONT=Inconsolata]div[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]>[/FONT][/COLOR][COLOR=#000000][FONT=Inconsolata]&#8203;[/FONT][/COLOR]

[COLOR=black][FONT=Inconsolata]#menu [/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]{[/FONT][/COLOR][COLOR=black][FONT=Inconsolata]width[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]:[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]200px[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata];[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]}[/FONT][/COLOR]

[COLOR=black][FONT=Inconsolata]#menu [/FONT][/COLOR][COLOR=black][FONT=Inconsolata]ul [/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]{[/FONT][/COLOR][COLOR=black][FONT=Inconsolata]margin[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]:[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]0[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata];[/FONT][/COLOR][COLOR=black][FONT=Inconsolata]padding[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]:[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]0[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata];[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]}[/FONT][/COLOR]

[COLOR=black][FONT=Inconsolata]#menu [/FONT][/COLOR][COLOR=black][FONT=Inconsolata]li [/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]{[/FONT][/COLOR][COLOR=black][FONT=Inconsolata]float[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]:[/FONT][/COLOR][COLOR=#770088][FONT=Inconsolata]left[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata];[/FONT][/COLOR][COLOR=black][FONT=Inconsolata]text-indent[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]:[/FONT][/COLOR][COLOR=#770088][FONT=Inconsolata]-9999px[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]; [/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]}[/FONT][/COLOR]

[COLOR=black][FONT=Inconsolata]#menu [/FONT][/COLOR][COLOR=black][FONT=Inconsolata]ul [/FONT][/COLOR][COLOR=black][FONT=Inconsolata]li [/FONT][/COLOR][COLOR=black][FONT=Inconsolata]a[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]{[/FONT][/COLOR]
[COLOR=black][FONT=Inconsolata]width[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]:[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]200px[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata];[/FONT][/COLOR]
[COLOR=black][FONT=Inconsolata]height[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]:[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]50px[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata];[/FONT][/COLOR]
[COLOR=black][FONT=Inconsolata]display[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]:[/FONT][/COLOR][COLOR=#770088][FONT=Inconsolata]block[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata];[/FONT][/COLOR]
[COLOR=black][FONT=Inconsolata]background[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]:[/FONT][/COLOR][COLOR=#770088][FONT=Inconsolata]url[/FONT][/COLOR][COLOR=#770088][FONT=Inconsolata]([/FONT][/COLOR][COLOR=#AA2222][FONT=Inconsolata]"http://e1212.hizliresim.com/14/2/gh94j.png"[/FONT][/COLOR][COLOR=#770088][FONT=Inconsolata]) [/FONT][/COLOR][COLOR=#770088][FONT=Inconsolata]no-repeat [/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]0px [/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]0px[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata];[/FONT][/COLOR]
[COLOR=#666666][FONT=Inconsolata]}[/FONT][/COLOR]

[COLOR=black][FONT=Inconsolata]#menu [/FONT][/COLOR][COLOR=black][FONT=Inconsolata]ul [/FONT][/COLOR][COLOR=black][FONT=Inconsolata]li [/FONT][/COLOR][COLOR=black][FONT=Inconsolata]a[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]:[/FONT][/COLOR][COLOR=black][FONT=Inconsolata]hover[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]{[/FONT][/COLOR]
[COLOR=black][FONT=Inconsolata]width[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]:[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]200px[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata];[/FONT][/COLOR]
[COLOR=black][FONT=Inconsolata]height[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]:[/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]50px[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata];[/FONT][/COLOR]
[COLOR=black][FONT=Inconsolata]display[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]:[/FONT][/COLOR][COLOR=#770088][FONT=Inconsolata]block[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata];[/FONT][/COLOR]
[COLOR=black][FONT=Inconsolata]background[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata]:[/FONT][/COLOR][COLOR=#770088][FONT=Inconsolata]url[/FONT][/COLOR][COLOR=#770088][FONT=Inconsolata]([/FONT][/COLOR][COLOR=#AA2222][FONT=Inconsolata]"http://e1212.hizliresim.com/14/2/gh94j.png"[/FONT][/COLOR][COLOR=#770088][FONT=Inconsolata]) [/FONT][/COLOR][COLOR=#770088][FONT=Inconsolata]no-repeat [/FONT][/COLOR][COLOR=#228811][FONT=Inconsolata]0px [/FONT][/COLOR][COLOR=#770088][FONT=Inconsolata]-50px[/FONT][/COLOR][COLOR=#666666][FONT=Inconsolata];[/FONT][/COLOR]
[COLOR=#666666][FONT=Inconsolata]}[/FONT][/COLOR]

Sonuç: http://jsfiddle.net/cngzkyz/Wtr7H/embedded/result/