CSS obrázkoví skřítci
Obrazoví skřítci
Obrázkový sprite je sbírka obrázků vložených do jednoho obrázku.
Načítání webové stránky s mnoha obrázky může trvat dlouho a generuje více serverových požadavků.
Použití image sprite sníží počet požadavků serveru a ušetří šířku pásma.
Image Sprites - jednoduchý příklad
Namísto tří samostatných obrázků používáme tento jediný obrázek ("img_navsprites.gif"):
Pomocí CSS můžeme zobrazit jen tu část obrázku, kterou potřebujeme.
V následujícím příkladu CSS určuje, která část obrázku "img_navsprites.gif" se má zobrazit:
Příklad
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
Vysvětlený příklad:
<img id="home" src="img_trans.gif">- Definuje pouze malý průhledný obrázek, protože atribut src nemůže být prázdný. Zobrazený obrázek bude obrázek na pozadí, který určíme v CSSwidth: 46px; height: 44px;- Definuje část obrázku, kterou chceme použítbackground: url(img_navsprites.gif) 0 0;- Definuje obrázek na pozadí a jeho pozici (vlevo 0px, nahoře 0px)
Toto je nejjednodušší způsob použití obrázkových skřítků, nyní jej chceme rozšířit pomocí odkazů a efektů přechodu.
Image Sprites - Vytvořte navigační seznam
Chceme použít obrázek sprite ("img_navsprites.gif") k vytvoření navigačního seznamu.
Použijeme HTML seznam, protože to může být odkaz a také podporuje obrázek na pozadí:
Příklad
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif')
0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif')
-91px 0;
}
Vysvětlený příklad:
- #navlist {position:relative;} - pozice je nastavena na relativní, aby bylo možné v ní umístit absolutní polohu
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - okraj a odsazení jsou nastaveny na 0, styl seznamu je odstraněn a všechny položky seznamu jsou umístěny absolutně
- #navlist li, #navlist a {height:44px;display:block;} - výška všech obrázků je 44px
Nyní začněte s umístěním a stylem pro každou konkrétní část:
- #home {left:0px;width:46px;} – Umístěno zcela vlevo a šířka obrázku je 46px
- #home {background:url(img_navsprites.gif) 0 0;} – Definuje obrázek na pozadí a jeho pozici (vlevo 0px, nahoře 0px)
- #prev {left:63px;width:43px;} – Umístěno 63px doprava (#home šířka 46px + nějaká mezera navíc mezi položkami) a šířka je 43px.
- #prev {background:url('img_navsprites.gif') -47px 0;} – Definuje obrázek na pozadí 47px vpravo (#home šířka 46px + 1px oddělovač čáry)
- #next {left:129px;width:43px;}- Umístěno 129px vpravo (začátek #předchozí je 63px + #předchozí šířka 43px + mezera navíc) a šířka je 43px.
- #next {background:url('img_navsprites.gif') -91px 0;} – Definuje obrázek na pozadí 91px napravo (#home šířka 46px + 1px oddělovač řádku + #předchozí šířka 43px + 1px oddělovač řádku )
Obrazoví skřítci - Efekt přechodu
Nyní chceme do našeho navigačního seznamu přidat efekt přechodu.
Tip: Selektor :hoverlze použít na všechny prvky, nejen na odkazy.
Náš nový obrázek ("img_navsprites_hover.gif") obsahuje tři navigační obrázky a tři obrázky, které lze použít pro efekty vznášení:
Protože se jedná o jeden jediný obrázek a ne šest samostatných souborů, nedojde k žádné prodlevě při načítání , když uživatel na obrázek najede myší.
Přidáme pouze tři řádky kódu, abychom přidali efekt vznesení:
Příklad
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('img_navsprites_hover.gif') -47px
-45px;
}
#next a:hover {
background: url('img_navsprites_hover.gif') -91px
-45px;
}
Vysvětlený příklad:
- #home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} – Pro všechny tři obrázky s najetím určujeme stejnou pozici pozadí, pouze 45px níže