Home-theater-designers
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
Background-image: gradient-type (direction, color1, color2);
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 następują 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
Background-image: linear-gradient(#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
Background-image: linear-gradient(to bottom, #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 oraz w prawo , które wygenerują odpowiednio następujące dane wyjściowe.
jak skonfigurować maszynę wirtualną
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
Background-image: linear-gradient(to bottom right, #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
Background-image: linear-gradient(to right, #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 kierunek pionowy (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
Background-image: radial-gradient( circle, #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.
czy youtube liczy się jako media społecznościowe?
Przykład zmiany pozycji początkowej gradientu promieniowego
Background-image: radial-gradient(circle at top right, #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 promieniowego:
- 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 tam, gdzie gradient liniowy dodaje się do gradientu w linii prostej, gradient promieniowy dodaje nowe kolory na zewnętrznej krawędzi.
Przykład wielokolorowego gradientu promieniowego
Background-image: radial-gradient(circle, #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 kiedy zrozumiesz podstawy tworzenia gradientu tła CSS, następnym oczywistym krokiem jest nauczenie się, jak uczynić gradienty CSS bardziej unikalnymi.
jak trwale usunąć pliki z telefonu z Androidem?
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
Background-image: linear-gradient(to right, #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 w jego zwyczajowej pozycji, a ponieważ drugi kolor jest również ostatnim kolorem w gradiencie, naturalnie rozciąga się do końca .
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
Background-image: linear-gradient( to right, #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.
Udział Udział Ćwierkać E-mail 27 stylowych przykładów gradientów tła CSSSolidne kolory są takie w zeszłym roku. Gradienty są dostępne! Ale jak je tworzysz w CSS?
Czytaj dalej Powiązane tematy- Programowanie
- Tworzenie stron internetowych
- Projektowanie stron
- CSS
Kadeisha Kean jest programistą zajmującym się pełnymi stosami oprogramowania i pisarzem technicznym/technologicznym. Ma wyraźną umiejętność upraszczania niektórych z najbardziej złożonych koncepcji technologicznych; produkcja materiału, który może być łatwo zrozumiały dla każdego nowicjusza w dziedzinie technologii. Pasjonuje się pisaniem, tworzeniem ciekawego oprogramowania i podróżowaniem po świecie (poprzez filmy dokumentalne).
Więcej od Kadeishy KeanZapisz się do naszego newslettera
Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!
Kliknij tutaj, aby zasubskrybować