CSS obrázkoví skřítci

Obsah

    Zobrazit obsah

Obrazoví skřítci

Obrázkový sprite je sbírka obrázků vložených do jednoho obrázku.

Načítání a generování webové stránky s mnoha obrázky může trvat dlouho 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

Mí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 souboru "img_navsprites.gif" obrázek k zobrazení:

Příklad

#home
{
   
width: 46px;
  height: 44px;
   
background: url(img_navsprites.gif) 0 0;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

#next {
  width: 43px;
  height: 44px;
  background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>

<img id="home" src="img_trans.gif" width="1" height="1">
<img id="next" src="img_trans.gif" width="1" height="1">

</body>
</html>

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 CSS

width: 46px; height: 44px;

- Definuje část obrázku, kterou chceme použít

background: 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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
#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;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

Vysvětlený příklad:

#navlist {position:relative;}

- poloha je nastavena na relativní, aby bylo umožněno absolutní umístění uvnitř

#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ěn zcela vlevo a šířka obrázku je 46 pixelů

#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 63 pixelů doprava (#home šířka 46 pixelů + nějaká mezera navíc mezi položkami) a šířka je 43 pixelů

#prev {background:url('img_navsprites.gif') -47px 0;}

- Definuje obrázek na pozadí 47px vpravo (#home šířka 46px + 1px řádek rozdělovač)

#next {left:129px;width:43px;}

- Umístěno 129 pixelů 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 vpravo (#home šířka 46px + 1px oddělovač řádků + #předchozí šířka 43px + oddělovač řádků 1px)

Obrazoví skřítci - Efekt přechodu

Nyní chceme přidat efekt přechodu do našeho navigačního seznamu.

Tip: Selektor :hover lze použít u všech prvků, nejen na odkazech.

Náš nový obrázek ("img_navsprites_hover.gif") obsahuje tři navigační obrázky a tři obrázky, které se použijí pro efekty vznesení:

Protože se jedná o jeden jediný obrázek a ne šest samostatných souborů, nebude ne zpoždění načítáníkdyž uživatel najede myší na obrázek.

Přidáme pouze tři řádky kódu, abychom přidali efekt hoveru:

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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
#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_hover.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -91px 0;
}

#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;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

Vysvětlený příklad:

#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;}

- Pro všechny tři obrázky po najetí určíme stejnou pozici pozadí, pouze 45 pixelů níže