Ikona Szablony CSS
Ikony usług, elementy sterujące, symbole kontaktowe i oznaczenia funkcji wymagają spójnego opracowania wizualnego, aby tworzyć spójną całość. Szablony oparte na CSS zapewniają bazę stylizacji dla kolorów, skali, odstępów, kontrastu i powtarzalnych wzorców interfejsu.
Inny Marki Szablony CSS
Funkcjonalne szablony CSS ikon przygotowane dla kart i klikalnych kontrolek
Każda ikona wiąże się z kilkoma istotnymi decyzjami: jej rozmiarem, kształtem tła za nią oraz zachowaniem po najechaniu kursorem. Szablony CSS ikon zawierają te decyzje już wdrożone. Bloki obejmują zarówno karty usług i wiersze kontaktowe, jak i przyciski z ikonami. Wspólne klasy nadają spójny styl każdemu elementowi w grupie, dzięki czemu nowa karta automatycznie przejmuje ten sam rozmiar i kolor.
Reguły wbudowane w typowe karty
Bloki z tej kategorii zwykle zawierają reguły takie jak:
- jednakowa szerokość i wysokość dla każdej ikony w grupie, aby żadna nie wyglądała na przypadkowo większą;
- koło z wypełnieniem lub obramowaniem za symbolem bądź kwadrat z zaokrąglonymi rogami;
- stały odstęp między ikoną a jej nagłówkiem, który utrzymuje wyrównanie wierszy przy zawijaniu tytułów;
- kolor akcentujący powiązany z paletą motywu, dzięki czemu cały zestaw zmienia się jednocześnie.
Zasady te mają zastosowanie zarówno do ikon SVG, jak i glifów z fontów ikonowych. W wierszu kontaktowym wszystkie ikony kanałów mają ten sam rozmiar. Wiersz z adresem e-mail może mimo to otrzymać wyraźniejszy akcent, jeśli stanowi główny kanał komunikacji. Grubość linii ma również znaczenie, ponieważ ikony o cienkim obrysie tracą czytelność na ekranach telefonów znacznie szybciej niż te z wypełnieniem.
Powtarzane komórki i stany interaktywne
W Nicepage element Grid Repeater Element powiela układ oraz styl swoich komórek. Każda kolumna nadal zachowuje własną ikonę i tekst. Zmiana koloru okręgu w jednej komórce powoduje aktualizację pozostałych. Statyczna siatka usług rzadko wymaga czegoś więcej. Klikalne ikony służące do wyszukiwania, udostępniania lub zamykania panelu działają inaczej, a szablon powinien definiować następujące stany:
- wygląd domyślny, który prezentuje się spokojnie obok otaczającego tekstu;
- stan najechania kursorem (hover), który zmienia kolor lub tło w momencie najechania wskaźnikiem;
- stan aktywny lub fokusu dla samego kliknięcia oraz dla użytkowników nawigujących klawiaturą;
- stan wyróżnienia oznaczający bieżący wybór, na przykład zaznaczony filtr.
Zmiana kolorystyki całych grup jednocześnie
Dzięki kolorom motywu w ustawieniach witryny Nicepage zmiana akcentu aktualizuje każdą ikonę, która go używa, na wszystkich stronach projektu. Symbole ostrzeżeń i potwierdzeń lepiej wyłączyć z tego akcentu, dopasowując je rozmiarem do sąsiadów i nadając im własną barwę. Rozmiary mogą się również zmieniać w zależności od trybu responsywnego, dzięki czemu duży symbol dekoracyjny ulega zmniejszeniu na telefonach. Gdy kontrolki wizualne okażą się niewystarczające, Custom CSS Code pozwala dodać regułę do pojedynczego elementu, jednej strony lub całej witryny.
Szablon siatki usług może z powodzeniem bazować na jednym statycznym stylu ikony. W przypadku przycisków i przełączników warto sprawdzić stany przed paletą kolorów, ponieważ kontrolka, która nie reaguje na kliknięcie, sprawia wrażenie uszkodzonej.