Css линейный градиент: Использование CSS-градиентов — CSS | MDN

Ключевые слова в линейных градиентах — Веб-стандарты

Использование линейных градиентов в CSS может приводить к самым разнообразным результатам, которые не назовёшь иначе как странными; иногда даже сам синтаксис кажется странным.

Давайте я сразу замечу, что кое-что из того, о чём я здесь рассказываю, еще не поддерживается широко, и даже, по правде говоря, эта спецификация еще не зафиксирована раз и навсегда. Скорее всего, она такой и останется, но могут быть и какие-то изменения. Даже если этого не случится — эта статья не о новом «используйте прямо сейчас!» приёме. Как и многое из того, что я пишу, это скорее маленькая прогулка по одному из уголков CSS с целью посмотреть, есть ли здесь что-нибудь интересное.

Хотя линейные градиенты кажутся очень сложными, в действительности они довольно просты. Вы определяете направление, по которому идет градиент, а затем — перечисляете столько контрольных точек цвета, сколько хотите. Таким образом, вы описываете изображение текстом, примерно как SVG.

Но вернёмся к градиентам. Вот совсем простое градиентное изображение:

linear-gradient(45deg, red, blue)

Значение 45deg описывает линию градиента, то есть ту линию, которая определяет направление градиента. Линия градиента всегда проходит через центр фоновой области элемента, и в каком именно направлении она пройдет, определяете вы, автор CSS. В этом примере линия градиента направлена на угол в 45% от горизонтальной оси элемента. Значения red и blue — контрольные точки цвета. Здесь в цветах не определены положения контрольных точек, поэтому эти значения принимаются равными 0% и 100% соответственно, то есть вы получаете градиент, который переходит от красного к синему и идёт по указанному направлению.

Можно создать контрольные точки таким образом, чтобы переход между ними был резким:

linear-gradient(45deg, green 50%, lightblue 50%)

Так вы получите результат, показанный на рисунке 1, к которому я добавил (в Photoshop) стрелку, которая показывает направление линии градиента и центральную точку фоновой области. Каждая «полоска», составляющая градиент, перпендикулярна линии градиента — поэтому граница между двумя цветами в точке 50% перпендикулярна по отношению к линии градиента. Этот закон перпендикулярности работает всегда.

Определять направление в градусах — это замечательно (и, чтобы соответствовать синтаксису анимаций, математическое определение градусов будет заменено на углы по компасу, но об этом в другой раз), но можно ещё использовать и ключевые слова, описывающие направления. Причем двух разных типов.

Обратите внимание, что задания направления градиента с помощью ключевых слов без ключевого слова to, описанное дальше, справедливо только для старой версии спецификации и применяется только для градиентов с префиксами. Прим. редактора.

Первый вариант использования — это просто объявить направление, перемешав и подставив слова из набора top, bottom, right и left. Диковатенько здесь то, что в этом случае вы определяете не то направление, куда двигается градиент, а откуда он выходит; то есть вы должны определить положение его начальной, а не конечной точки. Соответственно, если вы хотите, чтобы градиент шёл из нижнего левого угла в верхний правый, надо писать bottom left:

 linear-gradient(bottom left, green 50%, lightblue 50%)

Но bottom left — не то же самое, что 45deg (это справедливо только в том случае, если фоновая область элемента — правильный квадрат) Если эта область неквадратна, то линия градиента идет из одного угла в другой, а разделительные полоски — перпендикулярно ей, как на рисунке 2. И снова для ясности я добавил стрелку, показывающую градиентную линию, и центральную точку в Photoshop.

Естественно, это означает, что если фоновая область элемента изменит свои размеры по ширине или высоте, угол линии градиента тоже изменится. Если элемент станет шире по вертикали или уже по горизонтали, то линия повернется против часовой стрелки; уже по вертикали и шире по горизонтали — по часовой. Вполне возможно, именно такой вариант вам и нужен. Во всяком случае, он явно отличается от задания значения угла в градусах, при котором градиент не будет поворачиваться никуда, как бы ни менялся размер фона элемента.

Обратите внимание, что способ задания направления градиента с ключевым словом to, описанный дальше, по стабильной версии спецификации является единственным возможным способом, и должен применяться только для градиентов без префикса. Прим. редактора.

Другой способ использовать ключевые слова выглядит похоже, но результат у него совершенно другой. Вы используете те же самые определения top/bottom/left/right, но перед ними пишете ключевое слово to, вот так:

linear-gradient(to top right, green 50%, lightblue 50%)

В этом случае ясно, что вы определяете конечную точку линии градиента, а не начальную — в конце концов, вы же пишете

Обратите внимание на линию резкого разделения между контрольными точками. Она идет от левого верхнего угла в правый нижний (ни тот, ни другой — не top right). Так происходит потому, что, написав ключевое слово to в начале определения, мы включили то, что называется «магическими углами». Когда «магические углы» включены, то как бы фоновая область элемента ни изменяла свой размер, эта разделительная линия всегда будет идти из левого верхнего в правый нижний угол. Собственно, вот это и есть магические углы. Таким образом, линия градиента направлена не в правый верхний угол (только если фоновая область элемента — правильный квадрат), а в правый верхний квадрант фоновой области.

Если размер фоновой области изменится, эффект будет тем же самым, что в прошлый раз; уменьшим высоту или увеличим ширину фоновой области — линия градиента повернется по часовой стрелке; сделаем обратные изменения размера — линия пойдет в обратном направлении. Единственная разница — в начальном состоянии.

Итак: если вы хотите использовать ключевые слова, которые заставляют градиент быть всегда направленным в угол (как на рис. 2), но хотите указать направление, а не исходную точку — то этого сделать не получится. Точно так же нельзя указать и исходный квадрант, в котором начинается градиент. Чтобы получилась линия градиента, которая всегда идет из угла в угол, нужно объявить начальную точку линии градиента (рис. 2). Если вы хотите получить эффект «магических углов», когда линия контрольной точки цвета на 50% всегда идет из угла в угол, нужно объявить квадрант направления (рис. 3).

Теперь что касается собственно поддержки: на момент написания статьи (26 апреля 2012 — прим. редактора) только Firefox и Opera поддерживают «магические углы». Все остальные браузеры — IE10 в случае Internet Explorer — поддерживают математические углы и ключевые слова без «магических углов» (то есть Opera и Firefox поддерживают оба типа). Никто ещё не переключился с математических углов на углы по компасу (я совершенно специально использовал значение 45deg, поскольку в обеих системах оно описывает одно и то же направление).

Обратите внимание, что на момент публикации перевода (27 июля 2012) спецификацию в полной мере (включая направление поворота и ключевое слово to

Таково состояние дел с линейными градиентами прямо сейчас. Мне очень интересно узнать, что вы думаете о различных форматах ключевых слов и их принципах работы — у меня самого были вначале некие проблемы с их пониманием, и то, что у двух форматов синтаксиса совершенно разные результаты, по-моему, делает всё это довольно-таки запутанным. А вы что скажете?

Карманное руководство по написанию SVG. Глава 6 — CSS-LIVE

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Глава 6. Продвинутые функции: градиенты, паттерны, контуры обрезки

Градиенты

Существует два типа SVG-градиентов: линейные и радиальные. У линейных градиентов переход между цветами происходит вдоль прямой линии, а у радиальных — в круге.

Очень простой линейный градиент имеет вот такую структуру:

<svg>
    <defs>
        <linearGradient>
            <stop offset="<%>" stop-color="<color>" />
            <stop offset="<%>" stop-color="<color>" />
        </linearGradient>
    </defs>
</svg>

<svg> содержит элемент <defs>,позволяющий создавать повторно используемые определения, к которым можно обратиться позже. Эти определения не отображаются (визуально) до тех пор, пока они не будут вызваны по их уникальному id в атрибутах обводки и/или заливке для SVG-фигур или <text>. Эти фигуры и/или текст также находятся в элементе <svg>, но снаружи <defs>.

Как только градиент создан и ему задано ID, к нему можно обратиться через атрибуты fill и/или stroke в SVG. Например: fill= "url(#gradientName)".

Линейные градиенты

Линейные градиенты изменяют цвет равномерно вдоль прямой линии и каждая ключевая точка, которая определена на этой линии, будет представлять соответствующий цвет в пределах элемента <linearGradient>. В каждой точке цвет является на 100% чистым, в промежуточных точках — смесь в разном соотношении, а область между ними отображает переход от одного цвета к другому.

Элементы stop

Элементам <stop> также можно задавать прозрачность при помощи

Ниже представлен код для простого линейного градиента с двумя ключевыми точками, которые применены к прямоугольнику:

<svg>
    <defs>
        <linearGradient x1="0" y1="0" x2="100%" y2="0">
            <stop offset="0%" stop-color="#BBC42A" />
            <stop offset="100%" stop-color="#ED6E46" />
        </linearGradient>
    </defs>
    <rect x="2" y="2" fill= "url(#Gradient1)" stroke="#333333" stroke-width="4px" />
</svg>

Посмотреть демо можно здесь

offset передаёт градиенту, в какой точке установить соответствующий stop-color.

x1, y1, x2, y2

Значения атрибутов x1, y1, x2 и y2 определяют начальные и конечные точки, к которым привязаны ключевые точки градиента. Эти процентные значения размещают градиенты как надо вдоль нужных осей.

Если атрибуту x2 задать значение «100%», а атрибуту y2 — «0», то мы получим горизонтальный градиент (при x1 и y1, равных нулю — прим. перев.), а если наоборот — вертикальный. Установив оба значения в «100%» (или в любое значение отличное от 0), мы получим наклонный градиент.

gradientUnits

Атрибут gradientUnits определяет систему координат для значений x1, x2, y1 и y2. Для него возможны два значения: «userSpaceOnUse» или «objectBoundingBox». userSpaceOnUse устанавливает систему координат градиента в абсолютных единицах, а objectBoundingBox (значение по умолчанию) создаёт эту систему в границах самой фигуры SVG, целевого объекта.

spreadMethod

Значение атрибута spreadMethod указывает, как распространится градиент по фигуре, если он начинается или заканчивается внутри границ объекта. Если градиенту указано не закрашивать фигуру целиком, то spreadMethod определяет, как должен распространиться градиент, покрывая эту пустую область. Для этого атрибута возможны три значения: «pad», «repeat» или «reflect».

Значение pad (по умолчанию) указывает первому и последнему цвету градиента распространиться по всей оставшейся непокрытой областью объекта. repeat указывает градиенту повторять паттерн, постоянно начиная заново. Значение reflect отражает паттерн градиента, повторяясь поочередно то от начала к концу, то от конца к началу.

Начальной и конечной точкой для градиента ниже является: x1=«20%» y1=«30%» x2=«40%» y2=«80%».

gradientTransform

Атрибут gradientTransform необязателен и предусматривает дальнейшую трансформацию градиента, прежде чем тот отобразится, например, добавление поворота.

xlink:href

Атрибут xlink:href позволяет обращаться к ID другого градиента, чтобы унаследовать его значения, но также можно включить различные значения.

<linearGradient xlink:href="#Gradient-1” spreadMethod="repeat" />

Этот градиент унаследовал значения первого градиента, который находится в начале этого раздела, но для него задано другое значение «spreadMethod».

Радиальные градиенты

Большинство атрибутов для <radialGradient> совпадают с атрибутами <linearGradient> кроме того, что для работы с ними существует другой набор координат.

cx, cy, r

Атрибуты cx, cy, и r определяют внешний край круга, а значение 100% stop-color градиента будет привязано к границе этого круга. cx и cy определяют координаты центра, а r устанавливает радиус градиента.

fx, fy

Атрибуты fx, fy представляют координаты фокальной точки градиента или внутреннего круга. Фактически, центр градиента не обязан также быть его фокальной точкой, которая может быть изменена при помощи этих значений.

Несмотря на то, что по умолчанию фокальная точка радиального градиента будет в центре, атрибуты для фокальной точки могут изменить это поведение. Значениями центральной точки на изображении ниже являются fx="95%" fy="70%".

<svg>
    <defs>
        <radialGradient cy="60%" fx="95%" fy="70%" r="2">
            <stop offset="0%" stop-color="#ED6E46" />
            <stop offset="10%" stop-color="#b4c63b" />
            <stop offset="20%" stop-color="#ef5b2b" />
            <stop offset="30%" stop-color="#503969" />
            <stop offset="40%" stop-color="#ab6294" />
            <stop offset="50%" stop-color="#1cb98f" /> 
            <stop offset="60%" stop-color="#48afc1" />
            <stop offset="70%" stop-color="#b4c63b" />
            <stop offset="80%" stop-color="#ef5b2b" />
            <stop offset="90%" stop-color="#503969" />
            <stop offset="100%" stop-color="#ab6294" />
        </radialGradient>
    </defs>
    <text x="20%" y="75%" fill= "url(#Gradient2)" font-family= "'Signika', sans-serif" font-size="200">Cherry</text>
</svg>

Посмотреть демо можно здесь

В этом примере фокальная точка смещена к правому нижнему краю изображения.

Паттерны

Как правило, паттерны считаются одним из самых сложных вариантов закрашивания, доступных для цвета заливок и обводок SVG. Понимание основы и базового синтаксиса могут сделать эти, казалось бы, более сложные паттерны гораздо более доступными.

Ниже приведён синтаксис для базового паттерна, который применён к прямоугольнику:

<svg>
    <defs>
        <pattern x="10" y="10" patternUnits="userSpaceOnUse">
            <circle cx="20" cy="20" r="20" fill= "#BBC42A" />
        </pattern>
    </defs>
    <rect x="10" y="10"
                stroke="#333333" stroke-width="2px" fill="url(#basicPattern)" /> 
</svg>

Посмотреть демо можно здесь

Базовые атрибуты

Атрибуты и значения для паттернов определяют «холст», дизайн и позиционирование в целом. Паттерны состоят из контуров и/или фигур, также могут закрашивать текст и даже быть вложенными в другие паттерны.

x, y, width, height

Атрибуты x и y в элементе <pattern> определяют в какой точке начнётся паттерн внутри фигуры. Ширина и высота, используемые в элементе <pattern>, определяют фактическую ширину и высоту, отведённые для области паттерна.

Упомянутый выше «basicPattern» содержит следующие значения: x="10" y="10". В этом случае паттерн начнётся с 10px от начала оси х, 10px от начала оси y и создаст «холст» 40px ширины и такой же высоты.

patternUnits

Атрибут patternUnits определяет в каких координатах указываются значения x, y, ширина и высота. Здесь можно выбрать два значения: userSpaceOnUse и objectBoundingBox (по умолчанию).

При userSpaceOnUse система координат паттерна определяется системой координат элемента, ссылающегося на <pattern>, а objectBoundingBox берет в качестве системы координат для паттернов прямоугольник, описанный вокруг элемента, к которому паттерн применяется.

patternContentUnits

Значения атрибута patternContentUnits совпадают со значениями для patternUnits, за исключением того, что теперь система координат определяется для содержимого самого паттерна.

Для атрибута patternContentUnits, в отличие от patternUnits, значением по умолчанию является userSpaceOnUse, которое означает, что если не указаны один или оба из этих атрибутов, фигуры, отрисованные в <pattern>, рисуются не в той системе координат, которую использует <pattern>.

Определение patternUnits="userSpaceOnUse" в элементе <pattern> упрощает этот процесс и обеспечивает единообразную рабочую область.

Вложенные паттерны

Паттерны могут быть вложенными, чтобы создать еще более неповторимый и подробный дизайн.

Вот так выглядит структура базового вложенного паттерна:

<svg>
    <defs>
        <pattern
                 x="4" y="4"
                 patternUnits="userSpaceOnUse">
            <circle cx="12" cy="12" r="8"
                stroke="#ed6e46" stroke-width="3" fill="#765373" />
        </pattern>
        <pattern
                 x="10" y="10"
                 patternUnits="userSpaceOnUse">      
                <rect x="2" y="2"
                  stroke="#bbc42a" stroke-width="3" fill="url(#circlePattern)" />
        </pattern>
    </defs>
    <rect x="2" y="2"
          stroke="#333333" stroke-width="3" fill="url(#rectPattern)" /> 
</svg>

Элемент <defs> содержит оба паттерна. В <defs> паттерн для прямоугольника обращается к паттерну круга при помощи fill, а главный прямоугольник затем также обращается к паттерну прямоугольника через fill, закрашивая внутреннюю часть главной фигуры вложенным паттерном.

Посмотреть демо можно здесь

Контуры обрезки

Контур обрезки ограничивает область, к которой будет применено закрашивание в SVG. Любая отрисованная область за пределами границ, установленными контуром обрезки, не будет отображаться.

Для демонстрации возможностей этой функции, давайте используем контур обрезки в виде текста «Apples», наложенный на прямоугольник цвета томата и зелёный круг.

К следующим фигурам не применён контур обрезки, но они настроены так, чтобы растягиваться за пределы области просмотра.

А теперь давайте взглянем на код, позволяющий применить текст «Apples» к этому «холсту».

<svg>
    <clipPath>
        <text x="0" y="50%" fill="#f27678" font-size="120px" font-family=" 'Signika', sans-serif">Apples</text> 
    </clipPath>      
    <rect x="0" y="0" fill="#ed6e46" clip-path="url(#clip-text)" />  
    <circle cx="310" cy="100" r="135" fill="#bbc42a" clip-path="url(#clip-text)" />    
</svg>

Посмотреть демо можно здесь

Контур обрезки определяется в элементе <clipPath>, а затем вызывается обеими фигурами путём обращения к их уникальному id.

Заключение

Написание встроенного SVG дает очень полезные возможности редактирования и позволяет нам, как авторам, иметь полный доступ ко всем графическим элементам в отдельности. В этом коде мы генерируем графику, которая масштабируется без потери качества изображения, видна поисковикам и повышает доступность.

Скорее всего, вам придётся повозиться некоторое время, чтобы освоиться с написанием SVG, но как только вы этого достигнете, я бы порекомендовала поработать над тем, чтобы сделать ваш код настолько коротким и эффективным, насколько это возможно, поисследовать SMIL-анимацию и поэкспериментировать со стилизацией SVG-элементов при помощи CSS.

Надеюсь, это руководство стало как ценным справочником, так и вдохновением в плане понимания мощного потенциала построения и манипулирования встроенным SVG.

За новостями и обновлениями, пожалуйста, заходите на сайт книги. Если у вас есть какие-то вопросы или комментарии насчет книги, вы можете связаться со мной в твиттере или по почте info@jonibologna. com.

Публикуется под лицензией Attribution-NonCommercial-ShareAlike 4.0

P.S. Это тоже может быть интересно:

12 примеров CSS linear-gradient

Коллекция отобранных бесплатных HTML и CSS linear-gradient примеров кода из Codepen и других ресурсов.

О коде

Линейный градиент CSS Тень влево/вправо Динамический

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Линейный градиент границы + радиус границы

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Загрузка скелета с использованием всего нескольких строк CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Анимация линейного градиента

Анимация linear-gradient с использованием переменных CSS и JavaScript. Для этого эффекта я использую два градиента CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Предварительный просмотр коллекции градиентов

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Линейный наклон градиента CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: bootstrap.css

О коде

Парикмахерская палка Pure CSS

Парикмахерская палка Pure CSS с использованием linear-gradient .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

повторяющееся линейное градиентное фоновое изображение

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Только линейный градиент Солнечные лучи

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Анимированный шаблон текста-тени

Использует background-clip: text и linear-gradient для имитации полосатой тени текста.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Шаблон линейного градиента CSS3

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Столбцы с линейным градиентом

Используется фон : линейный градиент для создания узора столбцов.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Одноэлементный логотип Apple радужного цвета

CSS linear-gradient , :before , :after псевдоэлементов и box-shadow трюков.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

Кисти Xamarin.Forms: линейные градиенты — Xamarin

• Артикул
• 08. 07.2021
• 3 минуты на чтение

Загрузить образец

Класс LinearGradientBrush является производным от класса GradientBrush и закрашивает область линейным градиентом, который смешивает два или более цветов вдоль линии, известной как ось градиента. Объекты GradientStop используются для указания цветов в градиенте и их положения. Дополнительные сведения об объектах GradientStop см. в статье Кисти Xamarin.Forms: градиенты.

Класс LinearGradientBrush определяет следующие свойства:

• StartPoint типа Point , который представляет начальные двумерные координаты линейного градиента. Значение по умолчанию этого свойства равно (0,0).
• EndPoint , тип Point , который представляет конечные двумерные координаты линейного градиента. Значение по умолчанию этого свойства равно (1,1).

Эти свойства поддерживаются объектами BindableProperty , что означает, что они могут быть целями привязок данных и стилей.

Класс LinearGradientBrush также как метод IsEmpty , который возвращает логическое значение , указывающее, было ли назначено какой-либо кисти GradientStop объектов.

Примечание

Линейные градиенты также могут быть созданы с помощью функции linear-gradient() CSS.

Ограничители градиента кисти линейного градиента расположены вдоль оси градиента. Ориентацию и размер оси градиента можно изменить с помощью свойств кисти StartPoint и EndPoint . Управляя этими свойствами, вы можете создавать горизонтальные, вертикальные и диагональные градиенты, изменять направление градиента, уплотнять распространение градиента и многое другое.

Свойства StartPoint и EndPoint относятся к закрашиваемой области. (0,0) представляет верхний левый угол закрашиваемой области, а (1,1) представляет нижний правый угол закрашиваемой области. На следующей диаграмме показана ось градиента для кисти с диагональным линейным градиентом:

На этой диаграмме пунктирная линия показывает ось градиента, которая выделяет путь интерполяции градиента от начальной точки до конечной точки.

Создание горизонтального линейного градиента

Чтобы создать горизонтальный линейный градиент, создайте объект LinearGradientBrush и установите его StartPoint на (0,0) и его EndPoint на (1,0). Затем добавьте два или более объекта GradientStop в коллекцию LinearGradientBrush.GradientStops , которые определяют цвета в градиенте и их положения.

В следующем примере XAML показан горизонтальный LinearGradientBrush , который установлен как фон кадра :

 
    <Кадр.Фон>
        
        
            
            
        
     Background>

 

В этом примере фон Frame закрашивается с помощью LinearGradientBrush , которая интерполирует от желтого к зеленому по горизонтали:

Создание вертикального линейного градиента

и установите для его StartPoint значение (0,0), а для его EndPoint значение (0,1). Затем добавьте два или более объекта GradientStop в LinearGradientBrush.GradientStops 9.0005, которые определяют цвета в градиенте и их положения.

В следующем примере XAML показана вертикальная LinearGradientBrush , установленная как Background для Frame :

 
    <Кадр.Фон>
        
        
            
            
        
     Background>

 

В этом примере фон кадра закрашивается с помощью кисти LinearGradientBrush , которая интерполирует от желтого к зеленому по вертикали:

Создайте диагональный линейный градиент

и установите для его StartPoint значение (0,0), а для его EndPoint значение (1,1). Затем добавьте два или более объекта GradientStop в LinearGradientBrush.GradientStops 9.0005, которые определяют цвета в градиенте и их положения.

В следующем примере XAML показана диагональ LinearGradientBrush , которая задана как Background кадра :

 <Кадр.Фон> <Кисть линейного градиента>