Menu
Coddy logo textTech

Kolory

Lekcja 4 z 8 w kursie Projekt CSS — efektowny przycisk w Coddy.

Kolor tła i kolor tekstu to jedne z najważniejszych rzeczy podczas stylizowania przycisku!

Warto pamiętać o kontraście kolorów, który zapewnia czytelność: gdy kolor tła jest ciemny, kolor tekstu powinien być jasny.

Oto kilka przykładów ciemnych kolorów:

  • czarny
  • niebieski
  • czerwony
  • brązowy

Oto kilka przykładów jasnych kolorów:

  • biały
  • żółty
  • różowy
challenge icon

Wyzwanie

Łatwy

Zadania:

  • Ustaw kolor tekstu przycisku na white
  • Ustaw ciemny kolor tła przycisku i upewnij się, że kontrast jest wystarczający!

Wskazówka:

Możesz ustawić kolor tła za pomocą gradientu liniowego (możesz dostosować kolory):

background: linear-gradient(rgb(6, 6, 209), rgb(46, 46, 219));

Albo z kątem (na przykład 45 stopni):

background: linear-gradient(45deg, rgb(6, 6, 209), rgb(46, 46, 219));

Spróbuj swoich sił

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Wpisz tutaj kod HTML -->
    </body>
</html>

Wszystkie lekcje w sekcji Projekt CSS — efektowny przycisk

Poćwicz samodzielnie: Edytor online Web