Koncepcja duszków istnieje już od jakiegoś czasu. Jest to jedna z najczęściej stosowanych technik w branży gier, która przyspiesza proces wyświetlania animacji na ekranie. W tym artykule przyjrzymy się w szczególności, w jaki sposób ta technika może pomóc nam poprawić wrażenia użytkownika na stronach internetowych przy pomocy CSS Sprite w następującej kolejności:
- Co to jest Sprite?
- Co to jest CSS Sprite - krótkie omówienie?
- Przykład tego, jak pomaga w tworzeniu stron internetowych?
- Zalety korzystania z CSS Sprite
- Co musi zrobić programista podczas pracy z CSS Sprite?
- Jak stworzyć arkusz sprite CSS?
- Jak pracować z CSS Sprite?
- Firmy korzystające z CSS Sprite
Co to jest Sprite?
Sprite to pojedynczy obraz, który jest częścią większej sceny w grze. Wiele duszków jest następnie łączonych w duży obraz zwany arkuszem sprite. Po załadowaniu arkusza sprite'ów do pamięci, różne sprite'y są renderowane w krótkich odstępach czasu, aby stworzyć iluzję animacji. Odbywa się to jednocześnie dla dziesiątek do setek różnych duszków, aby wygenerować scenę w grze.
Podstawową ideą jest to, że ładowanie obrazu i wyświetlanie jego części w dowolnym miejscu jest znacznie szybsze niż ładowanie wielu obrazów i wyświetlanie ich.
Co to jest CSS Sprite: krótki przegląd?
Sprite CSS to technika często używana przez twórców stron internetowych w celu optymalizacji wydajności stron internetowych. W tej technice wiele mniejszych obrazów zwykle o tych samych wymiarach jest łączonych w jeden duży obraz zwany a Arkusz sprite lub zestaw płytek . Ten arkusz sprite jest następnie używany do wyświetlania poszczególnych elementów tam, gdzie ich potrzebujemy.
Zwykle elementy takie jak logo, strzałki nawigacyjne, przyciski są zawarte w arkuszu sprite, ponieważ mają prawie takie same wymiary i są często używane na stronie internetowej.
Przykład tego, jak pomaga w tworzeniu stron internetowych?
Generalnie podczas projektowania stron internetowych obrazy są przechowywane i wykorzystywane jako pojedyncze pliki. Tak więc, gdy użytkownik otwiera stronę internetową, przeglądarka musi wysłać żądanie HTTP dla każdego z tych plików, pobrać je oddzielnie i wyświetlić. Prowadzi to do dłuższych czasów ładowania strony, ponieważ dana strona internetowa może mieć dużą liczbę mniejszych obrazów, takich jak przyciski, ikony, logo.
Sprite'y CSS pomagają programistom łączyć te często używane małe obrazy w jeden duży obraz. Przeglądarka musi wtedy pobrać tylko jeden plik, który jest następnie używanywyświetlić wymaganą sekcję, przesuwając obraz.
Zalety korzystania z CSS Sprite
Istnieją dwie główne zalety używania sprite'ów CSS nad zwykłymi obrazami:
Szybsze ładowanie strony: Wydłuża czas ładowania strony, ponieważ obrazy używane na stronie internetowej pojawiają się zaraz po pobraniu arkusza.
Większa przepustowość i mniejsze zużycie zasobów: Nie tylko ta technika poprawia wrażenia użytkownika końcowego, przyspieszając ładowanie strony,ale także zmniejsza przeciążenie sieci, ponieważ liczba żądań HTTP jest mniejsza.
Co musi zrobić programista podczas pracy ze sprite'ami CSS?
Podczas pracy z pojedynczymi obrazami programista może po prostu pracować ze znacznikiem HTML i w razie potrzeby nadaj mu styl w CSS. Ale podczas pracy z CSS Sprite, programista musi zrobić dwie konkretne rzeczy:
- Tworzenie arkusza sprite
Podczas tworzenia strony internetowej, jeśli deweloper zdecyduje się na użycie sprite'ów CSS, musi najpierw stworzyć arkusz sprite'ów, łącząc wszystkie pożądane elementy, takie jak przyciski, logo itp. Można to zrobić za pomocą dowolnego programu do edycji obrazów, takiego jak Photoshop lub Gimp. Dostępnych jest również wiele narzędzi online, które pomogą Ci utworzyć arkusz sprite. Te narzędzia zostały omówione w dalszej części tego artykułu.
- Uzyskaj dostęp do określonego elementu duszka za pomocą CSS background-position własność
Gdy arkusz sprite jest gotowy, programista musi następnie użyć atrybutów CSS, aby uzyskać dostęp do różnych części arkusza.
- szerokość: Szerokość duszka
- wysokość: Wysokość duszka
- tło: Odniesienie do arkusza sprite
- Pozycja w tle: Wartości przesunięcia (w pikselach), aby uzyskać dostęp tylko do wymaganej części arkusza sprite
Jak stworzyć arkusz sprite CSS?
Możesz użyć dowolnego oprogramowania do edycji obrazów, aby uporządkować mniejsze obrazy w siatkę, ale dwie łatwiejsze metody zostały omówione poniżej:
1. Narzędzie do tworzenia arkuszy sprite online
POŁĄCZYĆ: toptal.com/developers/css/sprite-generator/
klasa anonimowa w java]
To narzędzie jest nie tylko bezpłatne, ale zapewnia również wymagany kod CSS, którego można użyć podczas odwoływania się do arkusza sprite. Możesz także bawić się różnymi właściwościami, takimi jak wypełnienie między elementami i zmiana ich wyrównania.
2. Generowanie arkusza sprite za pomocą Sprity
Jeśli używasz Grunt, Node lub Gulp, możesz zainstalować pakiet o nazwie Sprity, który pomoże Ci utworzyć arkusz sprite w różnych formatach, takich jak PNG, JPG itp.
Najpierw musisz zainstalować Sprity za pomocą:
npm install sprity -g
Następnie, aby wygenerować arkusz sprite, użyj następującego polecenia:
sprity ./output-directory/ ./input-directory/*.png
Jak pracować z CSS Sprite?
W tym przykładzie użyjemy następującego arkusza sprite:
Jak widać na powyższym obrazku, sześć ikon (Instagram, Twitter i Facebook) zostało ułożonych w siatkę. W pierwszym wierszu mamy stan normalny, aw drugim ich stan najechania (obraz, który pojawia się po najechaniu na nie kursorem myszy).
Jeśli utworzyłeś arkusz sprite za pomocą narzędzi, które omówiliśmy powyżej, to znasz już przesunięcia wymagane w CSS, ale jeśli użyłeś innego narzędzia lub po prostu otrzymałeś arkusz sprite, nie martw się, omówimy metodę, która pomoże Ci uzyskać przesunięcia dla wymaganego elementu.
Zobaczmy teraz bardzo prosty sposób uzyskania wymaganych przesunięć dla każdej z sześciu ikon za pomocą programu MS Paint. Może nie jest to idealne rozwiązanie do pracy z duszkami, ale ponieważ ma funkcję zapewniającą współrzędne kursora myszy, można jej użyć do uzyskania wymaganych współrzędnych X i Y.
Najpierw otwórz obraz arkusza sprite (siatka zawierająca wszystkie mniejsze obrazy) i umieść kursor myszy w lewym górnym rogu sprite'a, który chcesz chwycić.
Gdy masz już współrzędne lewego górnego punktu swojego duszka (lewy górny obraz na Instagramie), możesz wyświetlić tego konkretnego duszka w dowolnym miejscu za pomocą kodu CSS:
background: url ('img_sprites.png')
pozycja tła: 0 0
szerokość: 125px
wysokość: 125px
Używamy szerokości i wysokości 125 pikseli, ponieważ nasze ikony mają ten wymiar. Aby pobrać następny obraz (Twitter) w tym samym wierszu, używamy następującego kodu:
background: url ('img_sprites.png')
pozycja-tła: -128px 0px
szerokość: 125px
wysokość: 125px
Zwróć uwagę na atrybut background-position w powyższym fragmencie. (-128px, 0) oznacza, że przesuwamy nasz arkusz sprite w lewo o 128 pikseli (biorąc pod uwagę wypełnienie między elementami) i 0 pikseli na osi Y. Gdybyśmy mieli uzyskać dostęp do ikony na Twitterze, nasz atrybut pozycji w tle wyglądałby tak:
pozycja-tła: -128px -128px
W ten sposób możemy teraz uzyskać dostęp do każdego komponentu naszego arkusza sprite za pomocą CSS. Przejdźmy przez cały kod HTML i CSS, aby dowiedzieć się, jak to zrobić.
Krok 1: Pisanie wymaganego kodu HTML
W poniższym kodzie po prostu dodajemy trzy linki. Ponadto połączymy nasz kod HTML z arkuszem stylów (screen.css).
Krok 2: Pisanie niezbędnego CSS. Najpierw nadamy styl naszej wspólnej klasie ikon. Tutaj możesz zobaczyć, że odwołujemy się do utworzonego przez nas arkusza sprite.
/ * Ikona współdzielona Klasa * /
span.icon a: link,
span.icon a: odwiedzone{
pokaz:blok
wcięcie tekstu:-9999px
zdjęcie w tle: url (./ img_sprites.png)
powtarzanie tła:bez powtórzeń
}
Krok 3: Pobieranie poszczególnych ikon z arkusza sprite za pomocą przesunięć.
/ * Ikona Instagrama * /
span.instagram a: link,
span.instagram a: odwiedzone{
szerokość:125px
wysokość:125px
pozycja tła:0 0
}
/ * Ikona Twittera * /
span.twitter a: link,
span.twitter a: odwiedzone{
szerokość:125px
wysokość:125px
pozycja tła:-128px 0
}
/ * Ikona Facebooka * /
span.facebook a: link,
span.facebook a: odwiedzone{
szerokość:125px
wysokość:125px
pozycja tła:-257px 0
znacznik html do podziału wiersza
}
Krok 4: Pobieranie ikon dymków z arkusza sprite'ów za pomocą przesunięć.
span.instagram a: hover{pozycja tła:0 -128px}
span.twitter a: hover{pozycja tła:-128px -128px}
span.facebook a: hover{pozycja tła:-255px -128px}
Firmy korzystające z CSS Sprite
Wiele znanych marek w branży używa CSS Sprite do poprawienia responsywności swoich witryn internetowych. Firmy takie jak Google, Facebook, Amazon intensywnie korzystają z tej metody, ponieważ pomaga im to zmniejszyć liczbę żądań HTTP na sesję dla konkretnego użytkownika. To ogromna korzyść, gdy weźmiemy pod uwagę, że firmy te w dowolnym momencie obsługują miliony klientów.
Teraz, kiedy już wiesz, czym są sprite'y CSS i jak z nimi pracować, jesteś o krok bliżej na drodze do nauki CSS. Koncepcje takie jak sprite'y zmieniają zasady gry w dzisiejszych czasach, ponieważ dla programistów niezwykle ważne stało się wydobycie ze strony internetowej każdego elementu wydajności.
Sprawdź nasze który obejmuje szkolenie na żywo prowadzone przez instruktora i rzeczywiste doświadczenie projektowe. To szkolenie zapewni Ci biegłość w pracy z technologiami internetowymi zaplecza i front-endu. Obejmuje szkolenia w zakresie tworzenia stron internetowych, jQuery, Angular, NodeJS, ExpressJS i MongoDB.
Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy na blogu „Obrazy HTML”, a my skontaktujemy się z Tobą.