Używanie gradientów

Omówienie narzędzia Gradient

Gradient to wielokolorowe wypełnienie, w którym każdy kolor przechodzi stopniowo w następny. Gradienty można stosować do obramowań i wypełnień elementów.

Nie wszystkie przeglądarki obsługują gradienty obramowań.

 

Google Web Designer umożliwia tworzenie dwóch rodzajów gradientów:

• Gradienty liniowe : kolor zmienia się liniowo między dwoma punktami końcowymi.
• Gradienty promieniowe : zmiana koloru następuje koncentrycznie od środka.

Aby utworzyć gradient:

1. Wybierz przycisk Gradient liniowy  lub Gradient promieniowy  u góry palety kolorów.
2. Domyślnie gradienty mają dwa znaczniki koloru umieszczone wzdłuż paska gradientu u góry. Wybierz znacznik koloru, by zmienić jego kolor.
3. Przeciągnij znacznik koloru wzdłuż paska, by zmienić odległość przejścia.
4. Aby dodać więcej znaczników koloru, kliknij pasek gradientu. Aby usunąć znacznik koloru, przeciągnij go w dół do pola koloru.

Gradienty liniowe

Domyślnie gradient liniowy przebiega od lewej do prawej strony elementu, do którego jest stosowany.

Aby zmienić sposób stosowania gradientu liniowego:

1. Wybierz Narzędzie Gradient  na pasku narzędzi po lewej stronie lub naciśnij klawisz A.
2. Wybierz element, którego gradient chcesz edytować.
3. Wybierz opcję Edytuj kreskę  lub Edytuj wypełnienie  na pasku opcji narzędzia u góry.
4. Dostosuj gradient, przeciągając czerwone uchwyty sterowania:

   • Przeciągnij uchwyty zewnętrzne, by zmienić sposób stosowania gradientu do obiektu. Gradienty nie mogą wychodzić poza obramowanie kształtów SVG, jak pokazano na pierwszym przykładzie poniżej.
     

   • Przeciągnij uchwyt wewnętrzny, by obrócić gradient wokół czarnego punktu środkowego. Gradient automatycznie zmienia rozmiar, by zachować proporcje w stosunku do elementu. Opcjonalnie podczas przeciągania naciśnij klawisz Shift, by obrót odbywał się co 45°.
     

Aby przywrócić domyślny wygląd gradientu, kliknij dwukrotnie przycisk Narzędzie Gradient .

Gradienty promieniowe

Domyślnie gradient promieniowy jest stosowany w owalnym kształcie odnoszącym się do środka i rogów elementu, w którym jest użyty.

Aby zmienić sposób stosowania gradientu promieniowego:

1. Wybierz Narzędzie Gradient  na pasku narzędzi po lewej stronie lub naciśnij klawisz A.
2. Wybierz element, którego gradient chcesz edytować.
3. Wybierz opcję Edytuj kreskę  lub Edytuj wypełnienie  na pasku opcji narzędzia u góry.
4. Dostosuj gradient, przeciągając czerwone uchwyty sterowania:

   • Przeciągnij zewnętrzne uchwyty, by zmienić rozmiar gradientu. Opcjonalnie podczas przeciągania naciśnij klawisz Ctrl (Windows) lub ⌘ (Mac), by proporcjonalnie zmienić rozmiar osi X i Y gradientu, albo klawisz Shift, by ograniczyć kształt gradientu do okręgu.
     

   • Przeciągnij środkowy uchwyt, by przesunąć punkt środkowy gradientu.
     

Aby przywrócić domyślny wygląd gradientu, kliknij dwukrotnie przycisk Narzędzie Gradient .