Merhaba!css 2.0 ile hayatımıza giren Sprite tekniği çok geniş kullanım alanına sahiptir. Hem sayfa hızını olumlu yönde etkilemesi hemde kişiye sunduğu hız ve kolaylıklada çok kişinin duasını almıştır da diyebiliriz.
Sprite tekniğinde menü vb. gibi imajları tek bir dosya altında toplayarak hız ve pratiklik kazanıyoruz.
css sprite tekniği
Yukarıda gördüğünüz örnek menümüzde tek .gif dosyası içinde menünün hem up hemde over hağlini birlikte görüyoruz ve menüyü yaparken sadece tek bu imajı kullanıcaz.Çok basit bir css yapısı bulunan tekniğimizde menümüzün linklerini imajın üzerinden pozisyon vererek uyguluyoruz.Menünün css kodları şu şekildedir..nav{position:relative;}.nav a {position:absolute;background-image:url(nav_bg.gif);background-repeat:no-repeat;cursor: pointer;display:block;height:40px;z-index:1;}.nav a span { display:none; }.link1 { left:0; width:126px; background-position:0 0; }.link1:hover { background-position: 0 -40px; z-index:999; }.link2 { left:126px; width:121px; background-position:-126px 0; }.link2:hover { background-position: -126px -40px;z-index:999;}.link3 { left:247px; width:132px; background-position:-247px 0;}.link3:hover { background-position: -247px -40px;z-index:999; }.link4 { left:379px; width:151px; background-position:-379px 0; }.link4:hover { background-position: -379px -40px;z-index:999; }.link5 { left:530px; width:110px; background-position:-530px 0; }.link5:hover { background-position: -530px -40px;z-index:999; }.link6 {left:640px; width:135px; background-position:-640px 0; }.link6:hover { background-position: -640px -40px;z-index:999; }
Div yapısı ise,
Menümüzün uygulanmış son hağlini buradan indirip inceleyebilirsiniz.Takıldığınız ve sormak istediklerinizi yorum olarak ekleyebilirsiniz.Teşekkür ederim.
