Ahoj, vypadá to, že používáte AdBlock... :-)

Usilovně jsme pracovali na zakomponování reklamy, aby nebyla pro čtenáře rušivá. Příjmy z reklam tento web živí, bez nich bychom jej nemohli provozovat. Budeme moc rádi, když to s námi zkusíte a přidáte si nás do výjimek. Děkujeme!

MENU

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. :-)

Written by:

Published on: 16.12.2012

Filled Under: Hlavní strana, návody, Vývoj webu