CSS Sprites. Jak wykorzystać jeden obrazek wiele razy na stronie WWW?

Sprite (ang. skrzat) to małe obrazki, które wykorzystujemy w trakcie tworzenia stron. CSS Sprites to technika zapisywania ich wszystkich w jednym pliku i wyświetlanie przez manipulacje parametrami position-background. Dziś pokażemy Wam, jak je wykorzystać.

Pobranie każdego obrazka to osobne połączenie HTTP, chodzi tu więc przede wszystkim o prędkość pobierania stron WWW. Badania frontendeveloperów Yahoo! wykazały, że pobieranie kodu HTML to średnio tylko 20% całego czasu ładowania strony, reszta zaś to pobieranie skryptów, plików CSS i właśnie samych obrazków (http://yuiblog.com/blog/2006/11/28/performance-research-part-1/).

Jak to zrobić?

Za przykład posłuży szablon strony z zaokrąglonymi rogami. Bez wykorzystania CSS Sprites, zapisalibyśmy cztery narożniki w czterech plikach graficznych. Wykorzystując tę metodę, zapiszemy je jako jeden plik graficzny.

Następnie za pomocą odpowiednich manipulacji CSS ten sam plik graficzny wykorzystujemy cztery razy, zmieniając tylko jego pozycję na stronie.

Kod CSS:

#wrapper {
        width: 720px;
        margin: auto;
        background: #FFF;
        }

    #top-left {
        height: 10px;
        background: url(decorations.gif) no-repeat;
        }

    #top-right {
        width: 9px;
        height: 10px;
        background: url(decorations.gif) 0px -10px no-repeat;
        float: right;
        }

    #bottom-right {
        width: 9px;
        height: 10px;
        background: url(decorations.gif) 0px -19px no-repeat;
        float: right;
        }

    #bottom-left {
        height: 10px;
        background: url(decorations.gif) 0px -29px no-repeat;
        }

Kod HTML:

<div id="wrapper">
<div id="top-left"><div id="top-right"></div></div>
<p>Zawartość strony</p>
<div id="bottom-left"><div id="bottom-right"></div></div>
</div>

TUTAJ możesz pobrać gotowy przykład, a TUTAJ możesz zobaczyć, jak wygląda efekt.

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

6 skomentuj »

Komentarze

#1 m1chu^® 2008-12-18 20:49:29 0
Na podobnej zasadzie można obsługiwać podmianę grafik w elementach aktywnych, np. w menu. I jakby nie patrzeć także nie jest to nowość, ale może komuś się przyda.

http://m1chu.eu/2008/07/08/efekt-rollover-w-css-bez-przeladowywania-obrazka/
None
#2 ajdyna 2008-12-19 08:41:09 0
Jako ciekawostke dorzucam link do spritesow youtube :)

http://s.ytimg.com/yt/img/master-vfl69326.gif
None
#3 mistrz 2009-06-07 21:52:59 0
Onet też tego używa :)

http://www.onet.pl/_d/378acd482f45104827b7ec24a9c6d371,s_1_0.png
IP: 83.25.30.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10
#4 aniTEKK 2009-07-20 19:31:51 0
no świetnie, szkoda że podany przykład znów ma problem z poprawnym wyświetlaniem pod ie6..
IP: 84.38.98.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/530.5 (KHTML, like Gecko) Chrome/2.0.172.37 Safari/530.5
#5 lolek666 2010-09-17 00:09:13 0
@ aniTEKK

no i ?
IP: 81.15.208.[...] Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2.9) Gecko/20100825 Ubuntu/10.04 (lucid) Firefox/3.6.9
#6 michł 2011-09-14 19:20:42 0
zmien se kompa :D nawet YU nie robi supportu dla ie6 zreszta nawet ie9 jest uposledzone
IP: 213.92.139.[...] Mozilla/5.0 (Windows NT 5.1; rv:6.0.2) Gecko/20100101 Firefox/6.0.2

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.