CSS Sprites
Slyšeli jste o tom už někdy, ale nevíte co že to vlastně je? Nechytáte se? Zapomněli jste postup při aplikování této techniky? Pak jste na správném místě. Rozhodl jsem se totiž napsat článek, kde se pokusím vše vysvětlit.
První by asi nebylo špatné říct, o co že se vlastně jedná. Image Sprites by se dalo definovat, jako více obrázků, které tvoří obrázek jeden. Z toho se pak pomocí CSS vyselektuje právě ten jeden obrázek a použije někde na webu.
Hlavním důvodem je hlavně šetření počtu požadavků na server a také ušetření trochy místa. Jako příklad bych uvedl tento sprite.
Za normálních okolností, byste pro každé tlačítko udělali 2 obrázky. Jeden šedý a pak jeden barevný, co by se zobrazoval po přejetí myší. To máte celkem 6 obrázků, avšak úplně zbytečných. Jde to totiž udělat všechno v jednom.
Názorná ukázka využití (najeďte myší na některou z ikon)
Tak, a teď vás určitě všechny zajímá, jak jsem to udělal. Je to velmi jedoduché:
<!DOCTYPE HTML> <head> <style> #social {position:relative;} #social li { margin:0; padding:0; list-style:none; position:absolute; top:0; } #social li, a { height:48px; display:block; } #face {left:0px;width:48px; background:url('sprites.gif') 0 0;} #face a:hover {background: url('sprites.gif') 0 -48px;} #twit {left:60px;width:48px; background:url('sprites.gif') -48px 0;} #twit a:hover {background: url('sprites.gif') -48px -48px;} #plus {left:120px;width:48px; background:url('sprites.gif') -96px 0;} #plus a:hover {background: url('sprites.gif') -96px -48px;} </style> </head> <body> <ul id="social"> <li id="face"><a href="#"></a></li> <li id="twit"><a href="#"></a></li> <li id="plus"><a href="#"></a></li> </ul> </body> </html>
Vezměme si CSS hezky popořádku. (Začátek jsem přeskočil, ten si prostě zkopírujte, tam není co vymýšlet…)
1 2 3 4 | #social li, a { height:48px; display:block; } |
#social li, a { height:48px; display:block; }
To nám říká, že všechny odkazy v odrážkovém seznamu označeny identifikátorem #social, budou mít výšku 48px a zobrazeny jako block.
1 2 | #face {left:0px;width:48px; background:url('sprites.gif') 0 0;} #face a:hover {background: url('sprites.gif') 0 -48px;} |
#face {left:0px;width:48px; background:url('sprites.gif') 0 0;} #face a:hover {background: url('sprites.gif') 0 -48px;}
Identifikátor #face použijeme na naše odkazy. Definuje nám šířku, odsazení zleva a nakonec i obrázek s pozadím a hodnotami, o kolik se má posunout. Jak vidíme, tak všechno zůstává na nule, protože je to první obrázek ze všech.
Ovšem jak vidíme na druhém řádku, jakmile někdo najede myší na odkaz (#face a:hoover), okamžitě se přepne pozadí. Nemusí však už obrázek stahovat, ale jen jej posune nahoru o 48px.
Údaje „0 -48px“ symbolizují posunutí na levé straně a z vrchu.
1 2 3 | <ul id="social"> <li id="face"><a href="#"></a></li> </ul> |
<ul id="social"> <li id="face"><a href="#"></a></li> </ul>
Pak už zbývá jen HTML část, kde není nic extra zajímavého. Obyčejný odrážkový seznam.
Kdyby jste měli jakékoliv dotazy, ptejte se. :-)