Po pierwsze sprawdzamy, że się da
przykład 1
Cała sztuczka polega na dodaniu w stylach CSS <background: linear-gradient(#8a6, #ddd);>
i jak to sobie przeczytamy, to "background" jak zawsze przy tle a dalej "linear-gradient" i w nawiasie określone dwa kolory. Skoro linear-gradient, to czy moze być gradient nie linear, czyli wzdłóż linni - może. Mamy jeszcz do wyboru "radial" .czyli wpisujemy <background: radial-gradient(#8a6, #ddd);>
przykład 2
Spodziewałem się okrągłego, ładnego kółka, wyszła elipsa. Gdyby nasz przykładowy DIV był kwaderatem, było by to okrągłe. Uprzyjmy się by było okrągłe i zmodyfikujmy to tak, że w istniejący nawias dodajmy "circle":
<radial-gradient(circle, #8a6, #ddd);
przykład 3
A teraz powalczmy ze sposobem dopasowania, wielkości naszego okrągłego cieniowania i mamy tu 3 mozliwości:
- rozciągnięcie do narożnika "farthest-corner"
- rozciagnięcie do boku "farthest-side"
- wpasowanie sie między boki "closest-side"
<background: radial-gradient(circle closest-side, #8a6, #ddd)>
przykład 4
przykład 5
przykład 6