Gradient
Jest to płynne przejście z jednego koloru w inny. W CSSie są tworzone na bieżąco przez przeglądarkę.
Aby były odpowiednio interpretowane przez przeglądarkę poleca sie użyć przedrostków:
Aby były odpowiednio interpretowane przez przeglądarkę poleca sie użyć przedrostków:
- -webkit (chrome, safari)
- -o (opera)
- -moz (mozilla)
- -ms (edge)
Jak dodajemy gradienty?
#div
{
background
: linear-gradient
(45deg,
black, red
);
}
Wartość
45deg
to stopnie, pod jakimi zaczyna się gradient i pod jakim kątem przebiega. #div
{
background
: linear-gradient
(45deg,
black 90%, red
);
}
Wartość
90%
odnosi się do koloru czarnego i informuje przeglądarkę, że ten kolor ma zostać osiągnięty w odległości 90% od jego górnej krawędzi. #div
{
background
: radial-gradient
(circle,
black, red
);
}
Graient może również rozchodzić się od okęgu, a nie od prostej linii.
Flagi
Łatwym zadaniem na poćwiczenie robienia flag, początkowo tworzymy pustego diva o ustalonej szerokości i wyskości. Potem gradientami formatujemy jego tło tak, aby przypominał oryginalną flagę.
.
.
.
.
.
Podpowiedź
Przeanalizuj przykładowy kod na falgę Estonii, aby później samodzielnie odtworzyć pozostałe flagi:
#est
{
height
: 10em
;
width
: 15em
;
background
: linear-gradient
(
to right
,
white
33.33%,
, black
33.33%,
,
black
66.66%,
, #4169E1
66.66%,
,
);
}
Powróć do menu głównego CSS