parę sposobów na randomowy kolor tła

Fajnie mieć możliwość dodania do wybranego elementu losowego koloru np. tła. Ciekawie sprawdza się to w sliderach z treścią, kiedy każdy kolejny slid ma inne tło.

Jednym z rozwiązań jest stworzenie tablicy wybranych kolorów i użycie funkcji php array_rand.

Tworzymy tablice kolorów i poniżej, w zmiennej $bg_color pobieramy losowy element tablicy, czyli losowy kolor

$bg_colors = array( "#d7bbe3", "#F2C4DE", "#71B1D9", "#AED8F2", "#F2DEA2", "#F2CDC4", "#ABD3DB", "#C2E6DF", "#D1EBD8" );
$bg_color = $bg_colors[array_rand($bg_colors)];

Kolejnym krokiem jest dodanie tej wartości inlinowo do wybranego elementu html:

<div class="sliderSimple" style="background-color: <?php echo $bg_color; ?>"></div>

I dzięki temu otrzymujemy, każdy slid z innym kolorem, w losowej kolejności, po odświeżeniu strony, kolory znów się przetasowują, dzięki czemu element wygląda ciekawiej :)

Trochę ciekawiej robi się, kiedy chcemy tą sztuczkę zastosować do elementu before lub after ale tutaj użyć możemy zmienne kaskadowe CSS które definiujemy w pliku .css za pomocą funkcji var().

plik .css

.sliderSimple::before {
  content: '';
  width: 66px;
  height: 66px;
  background-color: var(--nws-color);
}

a następnie, w pliku gdzie mamy kod samej strony (np. .php w przypadku WordPress) przypisujemy wartość zmiennej losowo wygenerowanego koloru:

<div class="sliderSimple" style="--nws-color: <?php echo $bg_color; ?>"></div>