Recykling i animacja ikon za pomocą CSS
W niedalekiej przeszłości poznawaliśmy rewolucyjne techniki, aby oszczędzać zarówno żądania HTTP, jak i KB za pomocą ikonek obrazkowych. Te sprite składały się z kilkudziesięciu, a nawet setek ikon ułożonych w plik obrazu, który później został splicingowany i udostępniony na wiele różnych sposobów w całej witrynie.
Dobrze wykorzystaliśmy tę technikę i praktycznie każda strona związana z skalowalnością wykorzystuje ją.
Dzięki pojawieniu się właściwości CSS3 Transform and Transition możemy zrobić to o krok dalej i za pomocą kilku zwięzłych linii kodu przekształcamy szablony ikon podstawowych w nowe ikony do wykorzystania w przyszłości - a nawet dodamy animację do miksu, aby uzyskać dodatkowy bonus !
Technika jest tak prosta i intuicyjna, jak obrazki i pozwala na szybkie wdrażanie nowych ikon bez konieczności zmieniania obrazków.
Recykling ikon za pomocą CSS
Spójrz na ten sprite z biblioteki jQuery UI. Podczas przeglądania zauważysz, że wiele wymienionych tutaj ikon jest odmianami szablonów podstawowych. Pojedyncza ikona może być reprezentowana na tuzin różnych sposobów i umieszczona w tym samym pliku. Wiele ikon to dosłownie obrócone wersje swoich rodziców. Dobrą wiadomością jest to, że wykorzystując CSS możemy zastosować dokładnie tę samą technikę bez konieczności uwzględniania wariacji w spriterze obrazu.
Z powyższego przykładu możemy wziąć pojedynczą ikonę i odtworzyć ją dla naszych własnych celów, powiedzmy prosty chevron z drugiego rzędu w dół. Dzięki własności transformacji jesteśmy w stanie obrócić ten szewron 45deg, 90deg, 180deg, oczywiście i na czas nieokreślony, aby utworzyć wiele różnych form z tego samego szablonu.
Szablon podstawowy (strzałka w górę):
Poniższy kod pociągnie chevron do góry z ikonki obrazu i będzie służyć jako nasz szablon podstawowy.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat -20px 0;}
Utwórz prawo arr
Przekształcenie naszej strzałki o 90 stopni wskaże strzałkę w prawo, jak pokazano poniżej:
-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform: rotate(90deg);
Utwórz strzałkę w górę w prawo
Obróć go o 45 stopni, a otrzymasz ładną strzałkę w prawym górnym rogu:
-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);
To takie proste. Korzystając z tej metody, możemy zacząć od prostego ikonki ikon dwóch iz niewielkim wysiłkiem stworzyć sześć razy więcej ikon do wykorzystania w naszym interfejsie, co oczywiście jest tylko początkiem tego, co można zrobić.
Kilka transformacji, trochę fantazyjnego pozycjonowania i nasza rodzina ikon wzrosła już całkiem sporo!
Dodawanie animacji do miksu
Dla zabójcy doświadczenie możemy dodać animację do miksu. Nie tylko zmienimy ikony, ale przeniesiemy je, aby transformacja była widoczna dla użytkownika. Spójrzmy na inny przykład, zaczynając od znaku plus widocznego powyżej.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;}
Jeden łatwy obrót o 45 stopni przekształci naszą ikonę plusa w poręczną ikonę zamykania.
.icon {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);}
Teraz, gdy nasza transformacja działa poprawnie, możemy dodać przejście do miksu. Wyobraź sobie, że masz w swojej witrynie funkcję udostępniania tej strony za pośrednictwem różnych sieci społecznościowych. Kliknięcie ikony plus otworzy listę opcji udostępniania, a gdy lista się otwiera, znak plus przechodzi w zamkniętą ikonę przez subtelną animację. Najlepszym rozwiązaniem, jakie znalazłem w tej sprawie, jest aplikacja na iPada FontBook. Sprawdź ich realizację:
Jest gwiezdny. Rzućmy okiem na to, jak sprawić, by to piękno ożyło. Zacznij od użycia naszej ikony plus utworzonej powyżej. Aby go ożywić, po prostu dodaj właściwość przejścia do swojej ikony. W naszym przejściu określamy właściwość (transformację), czas trwania (0,2 s) i wreszcie, jaką funkcję pomiaru czasu chcemy użyć (liniowy).
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;-webkit-transition: -webkit-transform 0.2s linear;-moz-transition: -moz-transform 0.2s linear;transition: transform 0.2s linear;cursor: pointer;}Ponownie, to takie proste. Nie tylko możemy stworzyć nowe ikony dla naszej biblioteki z tylko CSS, możemy ożywić i dać życie każdemu konkretnemu elementowi!
Używanie nieprzezroczystości dla większej różnorodności
Ostatnim elementem recyklingu ikon jest gra w postaci właściwości nieprzezroczystości. Kopiowanie ikon podstawowych w trybie czarno-białym pozwoli na wygenerowanie nieskończonej liczby odcieni / wariantów do wykorzystania w całej witrynie lub aplikacji.
Czterowarstwowy wariant (jak widać poniżej) powyższego ikonki można z łatwością wykorzystać do stworzenia kilkunastu razy większej liczby ikon, a zwiększając lub zmniejszając krycie, można je umieścić w dowolnym miejscu i nadal wyglądać wspaniale.
Nadszedł czas, aby przejść na zielony: recykling z CSS
Ponieważ CSS3 zyskał przyczepność, moja kopia Photoshop CS5 zaczęła gromadzić kurz i nie bez powodu! Ta technika recyklingu ikon umożliwia ciągłe wdrażanie nowych wersji i wariantów do interfejsów bez konieczności otwierania plików źródłowych i dodawania uciążliwych ikon do ciągle rozwijających się ikonek.
Czas konserwacji spada, a czas spędzony na czytaniu książek, takich jak 4-godzinny tydzień pracy, rośnie! To wszystko złoto.
Oczywiście najbardziej oczywistym minusem tego wszystkiego jest obsługa przeglądarek, jednak wraz z niedawnym popchnięciem, no cóż, każdy do korzystania z nowoczesnych przeglądarek, będziemy mogli skorzystać z nowych i ekscytujących technik progresywnych. Nie krępuj się przeglądaj przykłady tej techniki.
Jakie są inne sposoby na odzyskanie zasobów witryny?