Miniatury jsou jedním z nejčistších kusů použitelnosti digitálního věku. V podstatě náhled je náhled, slib toho, co uvidíte, pokud kliknete na odkaz. Malý záblesk s méně datami, rychlejší načítání a méně chamtivý pro obrazovku nemovitostí než plnohodnotný majetek. Jsou ideální pro obrázky, ale co video?
Vylepšením techniky, kterou již používáme pro stavy tlačítek, můžeme vytvořit úžasné animované miniatury se základním CSS a malým jQuery.
V současné době nejsou stahování rychlostí pro vývojáře webu takový problém. Samozřejmě, malé velikosti souborů jsou stále žádoucí, ale skutečný výkon na většině webů je počet požadavků HTTP. Pokaždé, když vaše stránky načte daný materiál, provede prohlížeč požadavek HTTP, který je odeslán, zpracován a vrácen. Zkontrolujte konzolu, uvidíte, že většina zpoždění na vašem webu nemá nic společného s velikostí obrazu, je to strávil čekání na odpověď serveru.
Řešením je technologie CSS sprite; šití více obrázků do jednoho obrazového souboru a poté selektivně zobrazovat různé části obrazu pomocí CSS.
Tradičně pro všechna tlačítka, která nelze vytvořit se základními styly CSS, bychom vytvořili tři stavy; mimo , nad a dolů :
.button{background:url('off-state.png');}.button:hover{background:url('over-state.png');}.button:active{background:url('down-state.png');}To by vedlo ke stahování tří snímků ze serveru a generování tří požadavků HTTP.
Budeme-li to jako CSS sprite, uložíme všechny tři obrázky vedle sebe v jednom souboru (takže místo toho, abychom měli tři 200px širokoúhlé obrázky, máme jeden 600px širokoúhlý obraz) a změníme pozici obrazu pomocí vlastnosti CSS na pozici pozadí :
.button{display:block;width:200px;height:83px;background:url('button-states.jpg');}.button:hover{background-position:-200px;}.button:active{background-position:-400px;}Přemýšlejte o prvku jako o okně, pomocí něhož zobrazujete obrázek. Obraz můžete přesunout, ale okno zůstane ve stejné pozici. Za předpokladu, že se ujistíte, že prvek má stejnou velikost jako část obrázku, kterou chcete zobrazit, je efekt hladký: