Blog

Współczesna wersja CSS pozwala na wykorzystanie prostych funkcji oraz definiowanie warunków podczas tworzenia stylów. Często "dynamiczne" w kontekście web developmentu oznacza coś wykonanego w JavaScript lub z jego częściowym użyciem. Obecnie jednak CSS umożliwia osiągnięcie tego bez użycia zewnętrznych skryptów.

Dlaczego dynamiczne tło może być potrzebne?

Przede wszystkim jest to nietypowe i estetyczne. Zmieniające się kolory można uczynić częścią interfejsu użytkownika, na przykład, używając ich do wyświetlania różnych podpowiedzi. Użytkownik przewijający stronę może zauważyć, jak tło bloków zmienia się wraz z postępem. Zmiany mogą również "podążać" za kursorem lub być niezależne od jakichkolwiek elementów strony. Dynamiczne kolory są często stosowane na interaktywnych stronach, gdzie można np. zmienić kolor produktu.

Jednak w większości przypadków dynamiczne lub obliczane kolory stosuje się, aby ułatwić zarządzanie stroną. Właściciel zasobu, zmieniając jedną zmienną, może natychmiast zmienić paletę kolorów wszystkich komponentów na stronie.

Nie ma potrzeby martwić się o optymalizację. Style zapisane w CSS mają małą wagę i nie obciążają serwera. Obliczanie zmiany kolorów po stronie użytkownika nie wymaga dużych zasobów, więc strona nie zawiesi się z powodu słabego procesora graficznego. Wyjątkiem mogą być tylko projekty z bardzo skomplikowanym systemem dynamicznej zmiany kolorów, ale poza atrakcyjnym wyglądem, taki system nie wnosi dodatkowej wartości.

W zasadzie można to zrobić przy użyciu czystego CSS, bez korzystania z preprocesorów. Cała niezbędna funkcjonalność jest już zawarta w nowych wersjach języka, które są wspierane przez wszystkie popularne przeglądarki. Implementacja z użyciem preprocesorów jest wygodniejsza, ponieważ łatwiej ją konfigurować i skalować w razie potrzeby. Wymaga jednak przygotowania i dobrej znajomości działania preprocesorów.

Poniżej zostaną przedstawione przykłady zarówno na czystym CSS, jak i przy użyciu popularnych preprocesorów.

Implementacja przy użyciu czystego CSS

W tym przypadku wystarczy edytor kodu bez dodatkowych wtyczek. Utwórz pliki index i style. Następnie użyj jednego z zaproponowanych wariantów, w zależności od zadań.

Zmiana przezroczystości

Ten sposób jest przydatny, gdy trzeba zmienić kolor bloku, który leży na innym bloku. Opisany sposób można stosować także w innych przypadkach.

Aby go zastosować, musisz znać sposób tworzenia kolorów przy użyciu właściwości użytkownika w CSS oraz kanału alfa. Praca opiera się głównie na kanale alfa, ponieważ w tym przypadku nie jest wspierana kodowanie HEX. Oto przykład prostego kodu zmieniającego kolor:

:root {
  --color: 255 255 0;
}

.selector {
  background-color: rgb(var(--color) / 0.5);
}

Właściwość --color tutaj to główny kolor, od którego będą dokonywane wszystkie zmiany. W background-color jest on zapisany jako zmienna i podzielony na połowę swojej przezroczystości.

Jednak przedstawiony powyżej kod nie jest idealny, ponieważ do prawidłowego działania wymagana jest maksymalna obsługa kanałów alfa: rgb(), rgba(), hsla(). W zaprezentowanym przypadku obsługiwane są tylko dwie pierwsze. Oto, jak wygląda ulepszony fragment tego kodu:

:root {
  --color-rgb: 255 255 0;
  --color-hsl: 5 30% 20%;
}
.selector {
  background-color: rgb(var(--color-rgb) / 0.5);
  background-color: hsl(var(--color-hsl) / 0.5);
}

Tutaj została już dodana obsługa hsla(). Zwróć uwagę, że w hsla kolor jest definiowany w procentach, a nie jako wartości stałe. Jeśli spróbujesz ustawić kolor w formacie HEX, wynikowy kolor będzie po prostu biały, ponieważ HEX nie obsługuje dynamicznych zmian kolorów. Nawet dodanie kanału alfa do HEX nie pomoże, ponieważ w CSS nie przewidziano konkatenacji.

Jednak deklaracja własnych właściwości jest dozwolona przy użyciu typów: rgb, rgba, hsla, hsl, hex. Mogą one być swobodnie przekształcane między sobą.

Do omówionego wyżej kodu można podpiąć jakiś wyzwalacz, aby tło zmieniało się dynamicznie, na przykład po najechaniu kursorem myszy lub kliknięciu na jakiś przycisk na stronie. Aby zmiana koloru była bardziej płynna, użyj funkcji transition. W niej możesz zdefiniować opóźnienia w milisekundach, ustawić punkty kluczowe itd.

Użycie funkcji calc()

W nowej wersji CSS można w pełni korzystać z funkcji bez użycia zewnętrznych preprocesorów i innych narzędzi. Zadanie dynamicznych kolorów przy użyciu przezroczystości ma istotną wadę – przezroczysty kolor nie zawsze miesza się tak, jak tego chcesz. Również zmiany kolorów mogą być niejednorodne, ponieważ na końcowy kolor wpływają kolory znajdujące się za edytowanym blokiem. Można usunąć te wady tylko w jeden sposób – rezygnując z przezroczystości.

Można to zrobić na dwa sposoby – przypisując dla każdego kanału indywidualne wartości, co znacznie zwiększy objętość kodu:

:root {
  /* Określ osobne kanały dla określonego koloru */
  --color-h: 0;
  --color-s: 100%;
  --color-l: 50%;
}
.selector {
  /* Dynamiczna zmiana poszczególnych kanałów */
  color: hsl(
    var(--color-h),
    calc(var(--color-s) - 10%),
    var(--color-l)
  );
}

Jednak w tym przypadku wartości formatu HEX wciąż nie są obsługiwane. Jeśli chcesz uzyskać mały kod z obsługą wszystkich formatów, lepiej użyć funkcji calc. Za jej pomocą powyższe wyrażenie można zapisać w następujący sposób:

:root {
  --color: #ff0000;
}
.selector {
  color: hsl(from var(--color) h calc(s - 10%) l);
}

Użycie filtrów w CSS

Powyższe przykłady umożliwiają uzyskanie dynamicznej zmiany kolorów na stronie, ale są one bardziej odpowiednie do uproszczenia zarządzania stroną. Funkcja filter pozwala na ciekawe efekty po stronie użytkownika, na przykład dostosowanie przezroczystości, kolorów elementów w zależności od zachowania użytkownika (najechanie kursorem, przewijanie strony, a nawet zdefiniowana animacja).

Chociaż ta metoda zapewnia więcej możliwości, ma pewne wady:

Można używać następujących filtrów: jasność, kontrast, odcienie szarości, nasycenie, sepia, obrót koloru, inwersja, rozmycie, przezroczystość, cień. Filtry można również łączyć i animować.

Oto przykład kodu takiej animacji, która będzie odtwarzana na stronie domyślnie:

animation: haunted 3s infinite;
}

@keyframes haunted {
  0% {
    filter: brightness(20%);
  }
  48% {
    filter: brightness(20%);
  }
  50% {
    filter: sepia(1) contrast(2) brightness(200%);
  }
  ....
  96% {
    filter: brightness(400%);
  }
}

Dynamiczne wartości zmiany koloru lub innych efektów są ustawiane w procentach. Takie złożone konstrukcje pozwalają na uzyskanie niezwykłego wyglądu strony, jednak są trudniejsze w utrzymaniu.

Realizacja dynamicznych kolorów przy użyciu CSS-preprocesorów

CSS-preprocesory dodają do zwykłego CSS nowe funkcje i możliwości, co upraszcza tworzenie i utrzymanie dynamicznych kolorów. Kolejne manipulacje zostaną omówione na przykładzie preprocesora SASS. Przed rozpoczęciem manipulacji z kolorami zaleca się przygotowanie schematu, rozkładając wszystkie wartości na model HSL (hue, saturation, lightness). Na przykład, dla koloru czerwonego rozkład w modelu HSL będzie wyglądał tak:

--colorPrimary-h: 0;
--colorPrimary-s: 100%;
--colorPrimary-l: 50%;
--colorPrimary: var(--colorPrimary-h), var(--colorPrimary-s), var(--colorPrimary-l);

Na przykładzie tego koloru omówimy dalsze korekty.

Korekta przy użyciu HSL

Na początek użyjemy najbardziej podstawowych funkcji: lighten i darken. Są one zapisywane w następujący sposób:

--lighten-percentage: 20%;
--darken-percentage: 15%;

Pierwsza wartość określa jasność, a druga zaciemnienie. Aby nadać dynamikę, używamy funkcji calc, w której dodajemy wartości koloru bazowego z wartościami jasności/ciemności:

--colorPrimary-light: var(--colorPrimary-h), var(--colorPrimary-s),
calc(var(--colorPrimary-l) + var(--lighten-percentage));

Mimo że uzyskane wyrażenie wygląda na skomplikowane, w rzeczywistości zwiększamy jasność koloru czerwonego o 20%. Jeśli chcemy przyciemnić kolor, w ostatnim nawiasie wpisujemy darken-percentage zamiast lighten-percentage.

Mieszanie kolorów

Funkcja mix odpowiada za mieszanie kolorów. Zasada działania jest podobna do dodawania koloru i jasności, ale teraz będziemy musieli dodawać kolory, a dokładniej ich części. Najpierw określamy dwa kolory w palecie HSL:

--color-1-h: 0;
--color-1-s: 100%;
--color-1-l: 50%;

--color-2-h: 50;
--color-2-s: 80%;
--color-2-l: 50%;

Teraz obliczymy średnie wartości dla obu kolorów:

--avg-1-2-h: calc((var(--color-1-h) + var(--color-2-h)) / 2);
--avg-1-2-s: calc((var(--color-1-s) + var(--color-2-s)) / 2);
--avg-1-2-l: calc((var(--color-1-l) + var(--color-2-l)) / 2);

Jednak średnia wartość to nie to samo, co mix koloru. Aby uzyskać mix, wykonaj ostatnią formułę:

--mixed-color: hsl(var(--avg-1-2-h), var(--avg-1-2-s), var(--avg-1-2-l));

Praca z funkcją color-contrast

W tym przypadku kolor jest obliczany na podstawie wartości logicznych, co pozwala na uzyskanie większej interaktywności. Implementacja w SASS odbywa się za pomocą funkcji color-contrast. Przyjmuje ona wartości: kolor bazowy, który pełni rolę kontrastowego, wartości light i dark. Funkcja miesza te wartości w kilku wariantach i zwraca najbardziej kontrastowy. Aby kontrolować poziom kontrastu, używamy warunku:

--contrastThreshold: 50%;

W podanym przykładzie maksymalny kontrast nie może przekraczać 50%. Należy pamiętać, że trzeba również obliczyć kontrast dla wartości light i dark. Jeśli próg jest wyższy niż jasność podstawowego koloru, funkcja zwraca light, a jeśli jest niższy, zwraca dark.

Aby skutecznie korzystać z tej opcji ustawiania dynamicznego koloru, musisz przeprowadzać wstępne obliczenia.

Korzystanie z kontrastu kolorów jest świetne w przypadku witryn, w których użytkownik musi wchodzić w interakcje z paletami lub dostosowywać schemat kolorów

Podsumowanie

Wykorzystanie dynamicznych kolorów jest uzasadnione w celu uproszczenia administracji stroną. W ten sposób właściciel może zmienić tylko jeden parametr w panelu administracyjnym, a reszta dostosuje się automatycznie. Rzadziej dynamiczne kolory są używane do ciekawego wystroju stron i nadania im interaktywności. Przykłady omówione w artykule można również używać razem ze skryptami JavaScript, rozszerzając ich możliwości i sprawiając, że projekt strony będzie bardziej responsywny dla użytkownika.