Wkrótce strony będą łatwiejsze do załadowania i będzie można je tworzyć w ogóle bez zdjęć.

Już teraz w nowoczesnych przeglądarkach możesz tworzyć gradientowe tło o dowolnej złożoności za pomocą Pomoc CSS, a przy tym zupełnie bez zdjęć.

Twórz gradienty CSS bez obrazów

Załóżmy, że chcemy zrobić przejście gradientowe w tle od szarego do czarnego. W tym celu korporacja W3 zaproponowała w CSS3 użycie specjalnej dyrektywy gradientu liniowego.

Tak więc zgodnie z wersją W3, aby zrobić tło gradientowe, wystarczy w selektorze bloków napisać:

Tło: liniowy-gradient(start, kolor1 pozycja1, kolor2 pozycja2,...,kolorN pozycjaN);

A przeglądarka niezależnie narysuje tło gradientowe w bloku.

Oczywiście w gradiencie może być wiele kolorów i punktów kontrolnych. Parametr początek określa, w jakim kierunku ma się rozchodzić gradient - może to być albo Top dla gradientu skierowanego w pionie, lub lewy dla kierunku poziomego.

Nie wszystkie przeglądarki obsługują tę funkcję, więc nadal istnieje wiele sztuczek. W przypadku bardzo starych przeglądarek musisz albo określić jakiś średni kolor tła (w ogóle nie będzie gradientu, ale tło nie będzie białe), albo określić obraz z gradientem (chociaż jeśli celem jest użycie gradientu liniowego w CSS ma na celu zmniejszenie liczby ładowanych obrazków, wtedy jest to bezużyteczne, ponieważ we wszystkich przeglądarkach obrazek nadal będzie ładowany, chociaż zostanie później zastąpiony gradientem liniowym).
Dla przeglądarek podobnych do IE można używać gradientów opartych na filtrach, a dla przeglądarek webkit (Safari, Chrome) i gecko (Mozilla) jak zwykle istnieje alternatywa: -webkit-gradient i -moz-linear-gradient , przyjąć podobne parametry. Jak to wszystko powinno działać, zobacz następujący blok kodu:

tło: #999; filtr: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#000000"); tło: -webkit-gradient(liniowy, lewy górny, lewy dolny, od(#ccc), do(#000)); tło: -moz-linear-gradient(góra, #ccc, #000);

Po renderowaniu wygląda to tak.

• Tłumaczenie

Praca nad tłumaczeniem projektu singlediv.com pokazała, że ​​niektóre narzędzia CSS mają szersze zastosowanie niż myślałem. Ale aby móc znaleźć tę aplikację, konieczne jest jasne zrozumienie cech nieruchomości. Uderzającym przykładem był gradient liniowy, który Lynn Fisher mistrzowsko wykorzystała w swojej pracy.

Czy chcesz stworzyć urocze tło gradientowe na swojej stronie internetowej? obraz w tle: gradient liniowy (czerwony, niebieski); gotowy! Tak, to trochę nudne. Więc jeśli chcesz czegoś więcej, polecam tę stronę porad css i MDN. Jesteś tu? Następnie przyjrzyjmy się kilku punktom, jak faktycznie działają gradienty liniowe. Najpierw zapamiętajmy składnię, której można użyć w funkcji gradientu liniowego:

liniowy-gradient([z<угла>| zanim<стороны-или-угла>]?, );
Funkcja przyjmuje opcjonalny pierwszy argument określający kąt gradientu, który może być wyrażony jako jednostka miary (stopień, promień, stopień, obrót) lub jako słowo kluczowe (bok lub kąt).

Następnie funkcja pobiera listę kolorów.

pole gradientowe

Obraz gradientowy nie ma wymiarów, jest nieskończony w przeciwieństwie do innych obrazów tła. Widoczne wymiary nadaje mu pole gradientowe, tj. obszar, w którym jest wyświetlany.

Zwykle, gdy używasz zdjęcie w tle jako liniowy gradient elementu DOM, ten obszar jest polem obramowania elementu (czyli tym samym obszarem, w którym wyświetlany jest kolor tła).

Jeśli jednak użyjesz również właściwości CSS background-size i ustawisz ją na, powiedzmy, 200px * 200px, to pole gradientu będzie miało ten rozmiar i będzie domyślnie umieszczone w lewym górnym rogu elementu DOM, chyba że ustawiasz również pozycję tła (położenie tła).

Więc czytając kolejne sekcje, pamiętaj tylko, że pole gradientu nie zawsze jest ustawione i ma taki sam rozmiar jak element DOM, do którego stosujesz gradient.

linia gradientu

W polu gradientu linia przebiegająca przez środek i wzdłuż której rozłożone są kolory nazywana jest linią gradientu. Tę linię można opisać prościej w trakcie wyjaśniania kąta nachylenia, o czym więcej w następnym rozdziale.

kąt nachylenia

Oczywiście kąt gradientu liniowego służy do określenia, w jakim kierunku będzie podążał gradient. Ale przyjrzyjmy się temu aspektowi bardziej szczegółowo.

Jeśli C jest punktem środkowym pola gradientu, to A jest kątem między linią pionową przechodzącą przez C a linią gradientu, która również przechodzi przez C, wzdłuż której są rozłożone kolory stopu gradientu.

Kąt ten można określić na dwa sposoby:

Używając jednego ze słów kluczowych: do góry (w górę), do dołu (w dół), w lewo (w lewo), w prawo (w prawo), do w prawym górnym rogu(w górę w prawo), w lewo w górę (w górę w lewo), w prawo w dół (w prawo w dół), w lewo w dół (w dół w lewo);
Lub definiując kąt za pomocą liczby i jednostki miary, np. 45 stopni (45 stopni), 1 obrót (1 obrót);

Jeśli kąt nie jest określony, to domyślnie spada (to znaczy wynosi 180 stopni lub 0,5 obrotu):

Na tym i następnych obrazach pole gradientu jest ograniczone prostokątem, a linia gradientu jest grubą szarą linią biegnącą przez środek, wzdłuż której pojawiają się kolory.

W powyższym przykładzie kąt nie jest określony, więc gradient od białego do czerwonego przesuwa się od góry do dołu, co odpowiada słowu kluczowemu do dołu, jak pokazano poniżej:

Jak pokazano na 2 poniższych obrazach, góra (góra) odpowiada kątowi zero stopni:

Inne ważny punkt, co warto wziąć pod uwagę przy użyciu słów kluczowych kątów - to, co na przykład w prawym górnym rogu (lub dowolne inne słowo kluczowe kąt) zależy od wymiarów prostokąta gradientu.

Logika jest taka, że ​​jeśli chcesz zrobić gradient od czerwonego do niebieskiego w kierunku prawego górnego rogu elementu, to ten element powinien być dokładnie niebieski w prawym górnym rogu, a fioletowy kolor w środku gradientu powinien uformować się wokół linia rozciągająca się od lewego górnego rogu do prawego dolnego rogu. Oto jak to wygląda na obrazku:

Dlatego prawy górny róg nie oznacza, że ​​linia gradientu przechodzi przez prawy górny róg, a nawet nie oznacza, że ​​kąt nachylenia wynosi 45 stopni!

Zobaczmy, jak linia gradientu porusza się wraz ze zmianą kąta, z następującą animacją:

W tej animacji kąt przechyla się od 0 do 360 stopni w krokach co 10 stopni. Niska rozdzielczość GIF-a ułatwia nawet zobaczenie, jak różne kolory są renderowane jako „linie”, które są zawsze prostopadłe do linii gradientu.

Podsumujmy, co wiemy o narożnikach gradientowych:

Kąt jest mierzony między linią gradientu a linią, która zaczyna się od środka ramki gradientu i przesuwa się w górę.
Więc 0 stopni oznacza w górę.
Domyślna wartość kąta, jeśli nie jest określona, ​​to dół, czyli 180 stopni.
Słowa kluczowe kąta zależą od wymiarów prostokąta gradientu.

Długość linii gradientu

Zanim zobaczymy, jak kolory rozkładają się wzdłuż linii gradientu, musimy wyjaśnić jeden punkt. Być może zauważyłeś w poprzedniej animacji, że kolory są czasami umieszczane poza ramką gradientu, co na pierwszy rzut oka może wyglądać trochę dziwnie, ale ma to sens, jeśli znasz przyczynę.

Spójrz na przykład:

Potrzebujemy gradientu od czerwonego do niebieskiego pod kątem 45 stopni, a ze względu na proporcje pola gradientu linia gradientu nie może przechodzić przez prawy górny róg.

Ale przeglądarka chce (to znaczy, że specyfikacje ją do tego zmuszają), aby prawy górny róg był czysty niebieski. Gdybyśmy sprawili, że linia gradientu zaczynała się i kończyła na krawędziach pola, wtedy kolor niebieski zajmowałby większość pola, a gradient nie byłby tak rozmyty.

Aby to zrobić, linia gradientu czasami musi wyjść poza pole gradientu. Łatwo jest zorientować się, gdzie się zaczyna i gdzie kończy. Po prostu narysuj linię, która przechodzi przez najbliższy róg i jest prostopadła do linii gradientu. Punkt, w którym ta linia przecina linię gradientu, jest punktem początkowym/końcowym.

W rzeczywistości, jeśli określisz szerokość pola gradientu W, wysokość H i kąt gradientu, to długość linii gradientu wynosi:

Abs(W * sin(A)) + abs(H * cos(A))

Zabarwienie

Kolory są listą oddzieloną przecinkami, gdzie każdy element można zdefiniować w następujący sposób:
<цвет> [<процентное соотношение> | <длина>]?

Dlatego nie jest konieczne określanie miejsca, w którym kolory powinny być umieszczone na linii gradientu. Na przykład:

Żaden z kolorów nie ma własnego położenia, więc przeglądarka sama określa ich położenie.

Właściwie prosty przykład W przypadku tylko 2 kolorów, kolor 1 zostanie umieszczony na 0% (na początku linii gradientu), a kolor 2 na 100% (na końcu linii gradientu).

Następnie, jeśli dodasz trzeci kolor, nadal będziesz mieć kolor 1 na 0%, kolor 2 na 50%, kolor 3 na 100% i tak dalej.

W powyższym przykładzie określono 5 kolorów stopu, a przeglądarka obliczyła ich względne pozycje jako 0%, 25%, 50%, 75%, 100%. Powodem tego jest równomierny rozkład wzdłuż pola gradientu.

Pozycja koloru może być wyrażona w procentach (w stosunku do rozmiaru linii gradientu) lub jako długość CSS (gdy obowiązuje dowolna jednostka) Pomiary CSS).

Oto przykład:

Jak widać, każdy z 5 kolorów stopu ma swoją własną pozycję podaną w pikselach. Pozycje te są obliczane od początku linii gradientu.

Stosując takie pozycje można uzyskać ciekawe efekty. Na przykład możesz użyć gradientu, aby nie narysować gradientu jako takiego, ale pozostawić kilka kolorów:

Na powyższym obrazku jest 7 kolorów i są one ustawione tak, że następny kolor zaczyna się dokładnie w tym samym miejscu co ostatni, co oznacza, że ​​przeglądarka nie musi wypełniać przestrzeni między dwoma kolorami stopu gradientem.

Jasne, to wszystko jest urocze i zabawne, ale co się stanie, jeśli zmieszasz kolory pozycjonowane z niepozycjonowanymi? Następnie sprawiasz, że przeglądarka pracuje ciężej i prosisz ją o automatyczne dystrybuowanie kolorów, dla których nie określiłeś pozycji:

W tym prostym przykładzie drugi kolor (pomarańczowy) nie ma pozycji, więc przeglądarka określa go i znajduje odpowiednie miejsce między poprzednio ustawionym a następnym kolorem. Tutaj jest to bardzo proste, ponieważ najbliżsi sąsiedzi drugiego koloru mają swoją własną pozycję, ale jeśli tylko niektóre kolory mają pozycje lub jeśli poprzednie lub następne kolory nie mają pozycji, sprawy się komplikują.

Spójrzmy na kilka przykładów:

W powyższym przykładzie tylko trzeci kolor (żółty) jest ustawiony na 30%. Aby więc lepiej rozłożyć wszystkie pozostałe, pierwszy jest umieszczany na 0%, ostatni na 100%, a pozostałe kolory są rozłożone pomiędzy (tak, że pomarańczowy kończy się bezpośrednio między 0% a 30%, a czerwony pomiędzy 30% i 100%).

W powyższym przykładzie pierwszy i ostatni kolor są ustawione, więc reszta jest równomiernie rozłożona między nimi.

Oczywiście byłoby zbyt łatwo, gdyby 0% i 100% były twardymi granicami, których nie można przekroczyć. Ale jak widać z poprzedniego przykładu, ostatni kolor znajduje się na 120%, a zatem wszystkie inne kolory powinny być odpowiednio rozłożone względem tej pozycji (domyślny punkt początkowy w tym przypadku pozostaje 0%).

A jeśli chcesz, aby Twoja przeglądarka działała jeszcze bardziej, dlaczego nie określić kolejności pozycji?

W rzeczywistości kolory powinny być w porządku, ale nic nie zabrania ci tego nie robić i nic strasznego się nie stanie, jeśli tego nie zrobisz. Twoja przeglądarka po prostu naprawi wszystko, jak pokazano poniżej:

Zacznijmy od pierwszego koloru (czerwonego) znajdującego się na 30%. Ponadto drugi kolor znajduje się na 10%, co jest już niepoprawne, ponieważ, jak wspomniano powyżej, kolory powinny być wskazywane w pozycji rosnącej. Więc tutaj przeglądarka koryguje położenie drugiego koloru i ustawia go w tej samej pozycji, co poprzedni kolor (30%). Następnie pojawia się trzeci kolor (żółty) znajdujący się na 60%, co jest prawidłowe, ale za nim czwarty (niebieski) na 40%. Ponownie pozycja jest dostosowywana i ustawiana na tę samą wartość, co poprzednio ustawiony kolor.

Ostatecznie, jak pokazano w powyższym przykładzie, ostatni kolor (niebieski) jest pozycjonowany niepoprawnie i przeglądarka ustawia go w tej samej pozycji co poprzedni kolor, który w tym przypadku nie jest ani jego bezpośrednim sąsiadem (żółty), ani sąsiadem koloru, co jest jest przed nim (pomarańczowy), więc powinien wrócić do pierwszego koloru (czerwony). W ten sposób wszystkie kolory od czerwonego do niebieskiego są ustawione na 30% i dlatego są niewidoczne.

Narzędzia

Wszystkie zrzuty ekranu w tym artykule pochodzą z prostego narzędzia, które stworzyłem na codepen, które pozwala wprowadzić funkcję gradientu liniowego i zobaczyć pole gradientu, linię gradientu, kąt i informacje o kolorze na górze elementu.

Narzędzie ma różnego rodzaju błędy i ograniczenia (patrz komentarze javascript), więc nie oczekuj od niego zbyt wiele.

Tagi:

• css
• gradient liniowy

Dodaj tagi

Kiedy mówimy o gradientach w CSS, mówimy o tym gradienty kolorów.

W CSS istnieją dwa rodzaje gradientów:

• liniowy: kolory przechodzą z jednego punktu do drugiego, zgodnie z proste linie;
• promieniowy: kolory przechodzą od środka koła do jego krawędzi, w trakcie wszystko wskazówki.

Uwzględniany jest gradient zdjęcie w tle i musi być używany z odpowiednią właściwością.

gradient liniowy

Składnia gradientów liniowych jest dość złożona, ale podstawowa idea jest następująca:

• zdefiniuj pożądane zabarwienie;
• gdzie te kolory powinny się pojawić wzdłuż osi(na początku, w środku, na końcu itp.);
• w którym kierunek powinien być gradient.

Zacznijmy od prostego dwukolorowego gradientu:

Div ( obraz tła: gradient liniowy (czerwony, niebieski); )

Domyślna:

• kierunek pionowy, z góry na dół;
• pierwszy kolor w wczesny(w górę);
• druga kolor w koniec(na dnie).

Zmiana kierunku

Jeśli kierunek od góry do dołu Ci nie odpowiada, możesz go zmienić na jedną z opcji:

• definiować przypisanie gradientu, ze słowami kluczowymi takimi jak lewy górny ;
• zdefiniować konkretny narożnik w stopniach, jak 45deg .

Ten kierunek musi być ustawiony zanim kolor:

Div ( obraz w tle: linear-gradient (w prawym dolnym rogu, żółty, fioletowy); szerokość: 200px; )

Jeśli chcesz zapytać określony kąt, możesz użyć wartości w stopni:

• 0deg - od dołu do góry;
• 20deg - lekko po przekątnej idąc zgodnie z ruchem wskazówek zegara;
• 90 stopni - jak godzina 15, od lewej do prawej;
• 180 stopni to wartość domyślna, od góry do dołu.

Div (obraz tła: liniowy-gradient (20deg, zielony, niebieski); szerokość: 150px; )

Dodanie większej ilości kolorów

Możesz wstawić tyle kolorów, ile chcesz. Oni będą równomiernie wzdłuż osi:

• dwa kolory: 0% i 100%
• trzy kolory: 0%, 50% i 100%
• cztery kolory: 0%, 33%, 67% i 100%

Div ( obraz tła: linear-gradient (pomarańczowy, szary, żółty); szerokość: 150px; )

Określanie określonych punktów kolorystycznych

Jeśli nie chcesz, aby kolor był równomiernie rozłożony, możesz ustawić określone pozycje kolorów, używając wartości procentowych (%) lub pikseli (px):

Div ( obraz w tle: linear-gradient (pomarańczowy, szary 10%, żółty 50%); szerokość: 150px; )

W tych ustawieniach:

• kolor pomarańczowy nie ma ustawionej pozycji koloru, więc domyślna wartość to 0%;
• kolor szary jest bliżej szczytu, o 10% zamiast 50%;
• żółty zajmuje połowę gradientu, od 50% do końca 100%.

gradient promieniowy

Podczas gdy gradienty liniowe biegną wzdłuż jednej osi, gradienty promieniowe rozleźć się. Ich składnia jest bardzo podobna do gradientów liniowych, ponieważ oba mają kolorowe kropki. Ale zamiast określać kierunek, musisz określić:

• Formularz: koło lub elipsa;
• punkt wyjścia: który będzie środkiem okręgu lub elipsy;
• punkt końcowy: gdzie będzie krawędź okręgu lub elipsy.

Div ( obraz tła: radial-gradient (czerwony, żółty); dopełnienie: 1rem; szerokość: 300px; )

Domyślna:

• gradient to elipsa;
• pierwszy kolor zaczyna się o środek;
• ostatni kolor kończy się o najdalszy róg.

Pozycja startowa

Pozycja startowa działa jak background-position . Możesz to ustawić za pomocą słowa kluczowego at.

Div ( obraz tła: radialny gradient (w prawym górnym rogu, czarny, jasnoszary); dopełnienie: 1rem; szerokość: 300px; )

Pozycja końcowa

Domyślnie formularz kończy się o najdalszy róg. Możesz wybrać:

• najbliższa strona
• najbliższy róg
• najdalsza strona
• najdalszy róg

Div ( background-image: radial-gradient(najbliższy róg przy 20px 20px, zielony, niebieski); padding: 1rem; szerokość: 300px; ) div:hover ( background-image: radial-gradient(najdalsza strona przy 20px 20px, zielono-niebieski); )

stały rozmiar

Zamiast ustawiać pozycję początkową i końcową, możesz po prostu ustawić określone wymiary:

Div ( obraz w tle: radial-gradient (20px 10px przy 75% 50%, ciemnofioletowy, różowy); dopełnienie: 1rem; szerokość: 300px; )

Gradienty w CSS są potężne, z nieskończoną liczbą opcji.

Gradient - wypełnienie wybranego obszaru sekwencją odcieni kolorów z płynnymi przejściami między nimi. Gradient służy do wyświetlania płynnego przejścia między dwoma lub większą liczbą określonych odcieni kolorów. Przykład gradientu:

Wcześniej do tworzenia efektu gradientu używano obrazów tła. Teraz możesz użyć CSS3 do stworzenia gradientowego tła. Elementy z gradientami CSS3 wyglądają lepiej po powiększeniu niż ich wtykane odpowiedniki w postaci obrazu tła, ponieważ gradient jest generowany przez przeglądarkę bezpośrednio pod określonym obszarem.

Zauważ, że gradient CSS jest obrazem tła generowanym przez przeglądarkę, a nie kolorem tła, więc jest definiowany jako wartość właściwości background-image. Oznacza to, że gradient można określić nie tylko jako wartość właściwości background-image, ale także w dowolnym miejscu, w którym można wstawić obraz tła, na przykład list-style-image i background .

CSS3 definiuje dwa rodzaje gradientów:

• gradient liniowy(Linear Gradient) - płynne przejście od koloru do koloru w linii prostej.
• gradient promieniowy(Gradient promieniowy) - płynne przejście od koloru do koloru z jednego punktu we wszystkich kierunkach.

gradient liniowy

Gradient liniowy rozkłada się w linii prostej, pokazując płynne przejście od jednego odcienia koloru do drugiego. Gradient liniowy jest tworzony za pomocą funkcji linear-gradient(). Funkcja tworzy obraz, który jest liniowym gradientem pomiędzy określonymi odcieniami kolorów. Rozmiar gradientu odpowiada rozmiarowi elementu, do którego jest stosowany.

Funkcja linear-gradient() przyjmuje następujące argumenty oddzielone przecinkami:

• Pierwszym argumentem jest stopień kąta lub słowa kluczowe określające kąt kierunku linii gradientu. Argument opcjonalny.
• Lista dwóch lub więcej kolorów oddzielonych przecinkami, po każdym z nich może następować pozycja zatrzymania.

Najprostszy gradient liniowy wymaga tylko dwóch argumentów określających kolor początkowy i końcowy:

Div ( background-image: linear-gradient(czarny, biały); szerokość: 200px; wysokość: 200px; ) Wypróbuj »

Przekazanie do funkcji dwóch argumentów ustawia gradient pionowy z punktem początkowym u góry.

Kierunek linii gradientu można zdefiniować na dwa sposoby:

Używanie stopni Jako pierwszy argument można podać stopień narożnika linii gradientu, który określa kierunek gradientu, np. kąt 0deg (deg jest skrótem od angielskiego degree - degree) określa linię gradientu od dolna granica elementu do góry, kąt 90deg określa linię gradientu od lewej do prawej itd. Mówiąc najprościej, dodatnie kąty reprezentują obrót zgodny z ruchem wskazówek zegara, ujemny odpowiednio przeciwnie do ruchu wskazówek zegara. Używanie słów kluczowych Słowa kluczowe "to top", "to right", "to bottom" lub "to left" mogą być również przekazywane jako pierwszy argument, reprezentują kąty linii gradientu "0deg" "90deg" "180deg" " 270 stopni".

Kąt można również ustawić za pomocą dwóch słów kluczowych, na przykład w prawym górnym rogu - linia gradientu skierowana jest w prawy górny róg.

Przykładowy gradient podany w różnych kierunkach:

Div ( margin: 10px; width: 200px; height: 200px; float: left; ) #one ( background-image: linear-gradient(do lewej, czarny, czerwony); ) #two ( background-image: linear-gradient( w lewym górnym rogu, czarny, czerwony); ) #three ( obraz tła: linear-gradient(65deg, czarny, żółty); ) Spróbuj »

Jak już wspomniano, gradient liniowy może zawierać oddzieloną przecinkami listę więcej niż dwóch kolorów, przeglądarka rozłoży je równomiernie na całym dostępnym obszarze:

Div ( margin: 10px; width: 200px; height: 200px; float: left; ) #one ( background-image: linear-gradient(do prawej, czerwony, niebieski, żółty); ) #two ( background-image: linear- gradient(w lewym górnym rogu, niebieski, biały, niebieski); ) Spróbuj »

Po kolorze można określić jego pozycję końcową, która określa położenie koloru (gdzie jeden kolor zaczyna przechodzić w inny) względem punktu początkowego i końcowego gradientu. Pozycja zatrzymania jest określana za pomocą jednostek obsługiwanych w CSS lub za pomocą procentów. W przypadku używania wartości procentowych położenie pozycji zatrzymania jest obliczane w zależności od długości linii gradientu. Wartość 0% to punkt początkowy gradientu, 100% to punkt końcowy.

Div ( margin: 10px; width: 200px; height: 200px; float: left; ) #one ( background-image: linear-gradient(u góry po prawej, niebieski, biały 70%, niebieski); ) #two ( obraz w tle : linear-gradient(do prawego dołu, żółty 10%, biały, czerwony, czarny 90%);) #three ( background-image: linear-gradient(do prawej, czarny 10%, żółty, czarny 90%); ) Spróbuj »

Można określić wartość koloru różne sposoby, na przykład: określ nazwę koloru, użyj wartości szesnastkowych (HEX), używając składni RGB (RGBA) lub HSL (HSLA). Na przykład użycie gradientu z przezroczystością może być użyte w połączeniu z kolorem tła lub obrazem poniżej gradientu, aby stworzyć ciekawe efekty wizualne:

Div ( margines: 10px; szerokość: 300px; wysokość: 100px; kolor tła: zielony; ) #one ( background: linear-gradient(do lewej, rgb(255,255,0), rgba(255,255,0,0)); ) #two ( background: linear-gradient(rgb(255,255,255), rgba(255,255,255,0)); )

Gradient kolorów to płynne przejście od jednego podany kolor do drugiego poprzez kolory pośrednie. W gradiencie liniowym przejście następuje w linii prostej od punktu A do momentu B. Gradient może mieć więcej niż dwa punkty zakotwiczenia - wtedy przejście jest wykonywane z punktu A do momentu B, to z punktu B do momentu C i tak dalej.

Jak zrobić liniowy gradient tła w CSS

W CSS3 możesz dodawać gradientowe tła do elementów za pomocą dobrze znanej właściwości background-image. Wartością jest słowo kluczowe linear-gradient(), w którym należy określić punkt początkowy gradientu, kolor początkowy i kolor końcowy w nawiasach.

Na przykład zróbmy liniowy gradient tła od fioletowego do czerwonego. Robiąc to, chcemy, aby punkt początkowy z fioletem był z prawa strona, a wektor gradientu zmierzał w lewo. Napiszmy kod:

Obraz tła: liniowy-gradient (do lewej, fioletowy, czerwony); Gradient tła na bloku