Ładowanie Ładowanie
Webhosting.pl WindowsHosting.pl Forum E-Wydania Kontakt RSS
Zaloguj się Zarejestruj się Po co mi konto?   Szybkie logowanie

Post: > CSS Sprites. Jak wykorzystać jeden obrazek wiele razy na stronie WWW...

wydrukuj: print publikuj: wykop dodaj do flakera Dodaj jako nius na OSnews.pl! delicious

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

TAGI: tips & tricks , css
2008-12-18 09:55:00 | Grzegorz Ajdyna
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.

Najnowsze wiadomości

reklama

wydrukuj: print publikuj: wykop dodaj do flakera Dodaj jako nius na OSnews.pl! delicious

Czytaj webhosting.pl:

Czytaj Dalej

Szybka porada: jak zmusić Internet Explorer 8 i Firefox 2 do obsługi HTML 5? (#1) Kanoniczne adresy URL: jak uniknąć duplikowania treści w serwisie WWW (1) Jak wyedytować logo i odnośnik w formularzu logowania panelu administracyjnego Wordpress? Unicorn: W3C zbiera wszystkie walidatory do jednego miejsca

Dyskusja

dodaj komentarz
0 + -
comnt #01 m1chu® 2008-12-18 20:49:29
m1chu 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/
------------------
http://m1chu.eu | http://utnij.eu | http://after-all.eu | http://regexp.pl/

Browser:
0 + -
comnt #02 ajdyna 2008-12-19 08:41:09
ajdyna Jako ciekawostke dorzucam link do spritesow youtube :)

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



http://www.onet.pl/_d/378acd482f45104827b7ec24a9c6d371,s_1_0.png
------------------
Browser: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10
0 + -
comnt #04 aniTEKK 2009-07-20 19:31:51
aniTEKK no świetnie, szkoda że podany przykład znów ma problem z poprawnym wyświetlaniem pod ie6..
------------------
Browser: 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

Komentarze
  • Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
  • Jeśli masz problemy z odczytaniem słów, zmień zdjęcie.
  • Używamy tego zabezpieczenia, ponieważ dzięki niemu rozwija się projekt reCAPTCHA. Sugerujemy jednak, by zarejestrować się w serwisie i w ten sposób ominąć konieczność ciągłego odczytywania wyrazów.
  • W treści komentarza można używać języka formatowania BBcode.