[CSS] CSS Sprites Opcje

[antoniak]

Witam,

Chcę przerobić aktualną stronę z użyciem css sprites, zoptymalizować szybkość wczytywania strony itd.. Tylko nie wiem jak wykorzystać tą technologię w internecie jest bardzo mało opisów, jeśli ktoś posiada jakieś informację na temat bardzo dziękuję za pomoc

[vokiel]

Wbrew pozorom nie potrzebujesz dużo opisów;)
Css sprites polega na tym, że wiele obrazków (najczęściej ikonek) zapisujesz jako jeden plik graficzny, a w css odwolujesz się do niego w wielu miejscach, zmieniając jedynie położenie obrazka.

Przedstawię na przykładzie jQuery UI:
Tu masz obrazek:icons
A tutaj css: css
W css podajesz jako background url do jednego obrazka w wielu miejscach, dla wielu klas, a zmieniasz jedynie jego położenie, np:

[HTML] pobierz, plaintext 
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
[HTML] pobierz, plaintext 

Tip: Nie możesz użyć wszystkich obrazków ze strony przez css sprites, generealnie nie da się tych które wymagają powtarzania (repeat-x, repeat-y)

[antoniak]

ok, a w Photoshopie np jak dzielimy/obdzielamy/zamieszczamy te grafiki? oraz czy używamy jakieś inne sposoby robienia layout'a etc.

[vokiel]

W PSie tworzysz sobie dokument, wrzucasz do niego te pojedyncze obrazki, najlepiej na sensownie rozlozonych prowadnicach, zapiszujesz dla web i juz. Nie robisz tego na głównym designie. Tylko tak jakby na boku, w drugim dokumencie. Lay na pewno ma sporo elementów, które wymagają powtórzenia, np tła pod nagłówki etc, te normalnie slicem wycinasz, tak jak to robiłeś do tej pory Teraz tylko zmieniasz podejście odnośnie tych 'kwiatków', które sa jakimiś pojedynczymi elementami.

Pozdrawiam