Gradienty — CSS

Gradienty pozwalają uzyskać płynne przejście między kolorami bez obrazu.

Cel lekcji

Poznać zagadnienie „Gradienty”, zrozumieć przykład i umieć zastosować podobny zapis we własnym programie.

Wyjaśnienie krok po kroku

linear-gradient() możesz zastosować w background.

Najpierw przeanalizuj kod bez uruchamiania. Zwróć uwagę, jakie dane wykorzystuje program, co z nimi robi i skąd bierze się wynik pokazany pod przykładem.

Praktyczny przykład

Gdzie zobaczysz efekt: Wygląd strony w przeglądarce

div {
  background: linear-gradient(90deg, #2563eb, #9333ea);
  color: white;
  padding: 1rem;
}

Przeczytaj kod linijka po linijce

div {Wybieramy elementy, które mają otrzymać podane style.
background: linear-gradient(90deg, #2563eb, #9333ea);Nadajemy kolor lub wygląd tła.
color: white;Nadajemy kolor lub wygląd tła.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Prostokąt ma tło przechodzące od niebieskiego do fioletowego.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Jak utrwalić tę umiejętność?

Przepisz kod samodzielnie. Następnie zmień jedną wartość lub jedną instrukcję i spróbuj przewidzieć efekt. Dopiero potem uruchom zmienioną wersję. Jeśli wynik jest inny niż oczekiwany, porównaj kolejne linie.

Spróbuj samodzielnie

Zmień kierunek gradientu na pionowy.