Stylizuj elementy witryny za pomocą gradientu tła CSS

Jeśli byłeś w Internecie dłużej niż kilka minut, prawdopodobnie natrafiłeś na gradient CSS. Właściwość tła CSS może być używana do tworzenia wielu różnych stylów, a jednym z najbardziej intrygujących typów jest to, co może zrobić z wartością gradientu.

Wiedza o tym, jak projektować i tworzyć różne gradienty CSS, jest atutem każdego projektanta lub dewelopera oprogramowania. Z tego artykułu dowiesz się wszystkiego, co musisz wiedzieć, aby zacząć włączać gradienty CSS do swoich projektów.

Co to jest gradient CSS?

Gradient CSS to zasadniczo połączenie dwóch lub więcej kolorów, które płynnie przechodzą z jednego do drugiego. Stan przejściowy gradientu CSS zależy od rodzaju użytego gradientu. Istnieją dwa główne typy gradientów powszechnie używane w projektowaniu oprogramowania: liniowe i promieniowe.

Istnieje jednak trzeci rodzaj gradientu, który jest mniej popularny i znany jako gradient stożkowy.

Składnia gradientów CSS

Obraz tła: gradient (kierunek, kolor1, kolor2);

Gradient CSS należy przypisać do właściwości CSS background-image. Typ gradientu może być jednym z kilku; gradient liniowy, gradient radialny lub gradient stożkowy. Po typie gradientu znajdują się nawiasy otwierające i zamykające, które zawierają kierunek przejścia gradientu, a także kolory, które mają być zawarte w gradiencie.

Związane z: Jak ustawić obraz tła w CSS

Powyższy przykład pokazuje dwa kolory, ale gradient może zawierać kilka różnych kolorów. Jedynym wymaganiem jest, aby każdy kolor na liście był oddzielony przecinkiem.

Co to jest gradient liniowy?

Gradient liniowy jest najpopularniejszym gradientem CSS. Tworzy gradient przejścia poziomego, pionowego lub ukośnego przy użyciu dwóch lub więcej kolorów.

Przykład gradientu liniowego CSS

Obraz tła: gradient liniowy (#00A4CCFF, #F95700FF);

Powyższy kod wygeneruje następujący gradient CSS:

Istnieje jeden główny składnik składni gradientu pominięty w powyższym przykładzie. Ten składnik jest kierunkiem przejściowym gradientu i został pominięty, ponieważ domyślne wyrównanie gradientu liniowego jest pionowe (od góry do dołu); to jest pożądany wynik w tym przykładzie.

Powyższy kod daje taki sam wynik, jak następujący wiersz kodu. Jedyną różnicą między nimi jest sekcja kierunku kodu.

Korzystanie z dolnego liniowego gradientu Przykład

Obraz tła: gradient liniowy (do dołu, #00A4CCFF, #F95700FF);

Jak widać z danych wyjściowych, powyższy kod tworzy gradient, który zaczyna się od niebieskiego na górze, a następnie powoli przechodzi do pomarańczowego na dole. Jeśli chcesz odwrócić kolejność kolorów, możesz po prostu zastąpić do dołu z do góry a to odwróci kierunek gradientu, dając następujący wynik:

Podobnie jak w przypadku wyrównania w pionie, wyrównanie gradientu w poziomie można uzyskać za pomocą dwóch zestawów słów kluczowych kierunku: do lewej i w prawo, które wygenerują odpowiednio następujące dane wyjściowe.

Ukośny gradient liniowy

Możliwe jest osiągnięcie ukośnego przejścia gradientu liniowego w dowolnym kierunku gradientu liniowego. Aby było to możliwe, musisz znać tylko cztery konkretne listy słów kluczowych.

• W prawym dolnym rogu
• W lewym dolnym rogu
• W prawym górnym rogu
• W lewym górnym rogu

Korzystanie z przykładu gradientu przekątnej liniowej

Obraz tła: gradient liniowy (w prawym dolnym rogu, #00A4CCFF, #F95700FF);

Powyższy przykład daje następujące dane wyjściowe:

Jak widać z powyższego wyniku, gradient liniowy przechodzi w kierunku ukośnym, przesuwając się od lewego górnego rogu do prawego dolnego odcinka gradientu.

Wielokolorowy gradient liniowy

Gradient liniowy może mieć dwa lub więcej kolorów, ale jak wygląda więcej kolorów w gradiencie? Wielokolorowy liniowy układ kolorów gradientu zależy od jego kierunku. Te przechodzące w kierunku poziomym będą miały każdy nowy kolor pojawiający się po lewej lub prawej stronie gradientu liniowego, w zależności od dokładnego kierunku gradientu liniowego.

Przykład wielokolorowego gradientu liniowego

Obraz tła: gradient liniowy (po prawej, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);

Powyższy wiersz kodu wygeneruje następujące dane wyjściowe:

Jak widać, każdy nowy kolor jest dodawany po prawej stronie gradientu, tworząc to, co ostatecznie zmienia się w tęczę. Ta sama wydajność może być osiągnięta w kierunku pionowym; jednak określony układ kolorów na gradiencie liniowym będzie zależeć od słowa kluczowego kierunku pionowego (do góry lub do dołu).

Co to jest gradient promieniowy?

Gradient promieniowy tworzy spiralny gradient, w którym domyślnie dwa kolory zaczynają się od środka. Tam, gdzie gradient liniowy tworzy gradient prosty, który płynie pionowo lub poziomo, gradient promieniowy tworzy gradient kołowy, który płynie od środka do zewnętrznych krawędzi.

Korzystanie z przykładu gradientu promieniowego

Obraz tła: gradient promieniowy (koło, #00A4CCFF, #F95700FF);

Powyższy wiersz kodu wygeneruje następujące dane wyjściowe:

Zmiana promieniowego centrum gradientu

Domyślnie gradient radialny zaczyna się w środku gradientu; jednak możliwa jest zmiana punktu początkowego poprzez wprowadzenie kilku słów kluczowych.

Przykład zmiany pozycji początkowej gradientu promieniowego

Obraz tła: gradient radialny (kółko w prawym górnym rogu, #00A4CCFF, #F95700FF);

Powyższy wiersz kodu wygeneruje następujące dane wyjściowe:

Jak widać z wyjścia powyżej, gradient zaczyna się teraz od prawego górnego rogu zamiast od środka. Ta zmiana jest możliwa dzięki włączeniu słowa kluczowego w prawym górnym rogu w powyższym kodzie. Poniższa lista słów kluczowych może być również użyta do zmiany punktu początkowego gradientu radialnego:

• U góry z lewej
• Prawy dolny
• Na dole po lewej

Wielokolorowe gradienty radialne

Podobnie jak gradient liniowy, gradient promieniowy może również używać dwóch więcej kolorów, główną różnicą jest to, że gdzie gradient liniowy dodaje się do gradientu w linii prostej, gradient promieniowy dodaje nowe kolory na zewnątrz Brzeg.

Przykład wielokolorowego gradientu promieniowego

Obraz tła: gradient radialny (okrąg, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);

Powyższy wiersz kodu wygeneruje następujące dane wyjściowe:

Dostosowywanie gradientów

Do tej pory widziałeś, jak zmienić kierunek i punkt środkowy gradientu, ale nie widziałeś, jak dostosować gradient. Dostosowywanie gradientu może wydawać się dużo pracy, ale gdy zrozumiesz podstawy tworzenia gradient w tle CSS Następnym oczywistym krokiem jest nauczenie się, jak tworzyć więcej gradientów CSS wyjątkowy.

Domyślnie kolory w gradiencie zajmują równomiernie rozłożoną ilość miejsca, a każdy kolor płynnie przechodzi w następny. Jeśli więc dwa kolory zostaną połączone w celu utworzenia gradientu, każdy kolor zajmie połowę dostępnej przestrzeni podczas przechodzenia z jednego do drugiego. Jeśli trzy kolory zostaną połączone, każdy kolor zajmie jedną trzecią dostępnej przestrzeni.

Dzięki niestandardowemu gradientowi możesz określić ilość miejsca, jaką kolor zajmie w gradiencie, wyraźnie przypisując pozycja zatrzymania koloru.

Dostosowywanie gradientu liniowego Przykład 1

Obraz tła: gradient liniowy (po prawej, #00A4CCFF, #F95700FF 30%);

Powyższy wiersz kodu wygeneruje następujące dane wyjściowe:

Powyższe dane wyjściowe pokazują drugi kolor w gradiencie liniowym zatrzymując się w punkcie 30% pierwszego koloru w gradiencie, zamiast swojej zwyczajowej pozycji, a ponieważ drugi kolor jest również ostatecznym kolorem w gradiencie, naturalnie rozciąga się on na koniec.

Gdybyś miał umieścić 30% w powyższym kodzie na końcu pierwszego koloru, sprawy powinny stać się jaśniejsze.

Dostosowywanie gradientu liniowego Przykład 2

Obraz tła: gradient liniowy (do prawej, #00A4CCFF 30%, #F95700FF );

Powyższy kod wygeneruje następujące dane wyjściowe.

Powyższe dane wyjściowe wyraźnie pokazują, że pierwszy kolor w gradiencie zatrzymuje się w punkcie 30% drugiego koloru w gradiencie. Ten przykład wraz z powyższym powinien ułatwić zrozumienie dostosowywania zatrzymania kolorów.

Dostosowywanie gradientu promieniowego odbywa się w taki sam sposób, jak gradientu liniowego. Jedyną rzeczą, którą musisz zrobić, aby osiągnąć te same wyniki w gradiencie radialnym, jest zmiana typu i kierunku gradientu.

Tworzenie gradientów CSS nigdy nie było łatwiejsze

Ten artykuł samouczka zawiera narzędzia do identyfikacji i tworzenia gradientów liniowych i promieniowych. Jeśli dotarłeś do tego momentu, nauczyłeś się zmieniać kierunek i środek gradientu. Dodatkowo masz teraz umiejętności dostosowywania gradientów CSS i tworzenia unikalnych gradientów tła.

Jeśli jednak nie chcesz od razu tworzyć nowych i unikalnych gradientów, możesz zacząć od stworzenia świetnie wyglądających już istniejących.

27 stylowych przykładów gradientów tła CSS

Solidne kolory są takie w zeszłym roku. Gradienty są dostępne! Ale jak je tworzysz w CSS?

Czytaj dalej

O autorze

Rozwiń, aby przeczytać całą historię