linear-gradient() в CSS


Содержание

Линейный и радиальный градиент на CSS, как сделать градиент на сайте

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

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

Градиент может часто пригодиться на любом сайте, поэтому в CSS3 было решено добавить функционал для создания таких градиентов. Различают линейный и радиальный градиенты. На рисунке выше, слева – линейный, справа – радиальный градиент. Если вдруг браузер не будет поддерживать градиент, то для этого в файле стилей выше строки задания градиента, следует указать простой фон для элемента.

Для создания линейного градиента существует значение linear-gradient, для радиального radial-gradient. Кроме того, существуют две функции для повтора градиента repeating-linear-gradient и repeating-radial-gradient. Отдельного свойства для добавления градиента не предусмотрено, он считается фоновым изображением, поэтому добавляется через свойства:

  • background,
  • background-image,
  • border-image,
  • list-style-image.

Рассмотрим примеры создания градиентов. Градиент создается при помощи соответствующей функции и ее параметров. Первый параметр функции – это позиция, можно использовать ключевые слова. Второй и третий параметры — это значение цвета и его положение в градиенте.

Для указания позиции вначале пишется to, а затем добавляются ключевые слова top, bottom, left, right и их сочетания, порядок слов не важен. Также, вместо ключевого слова можно задавать угол наклона градиентной линии, показывающий направление градиента. Сначала пишется положительное или отрицательное значение угла, после чего к нему добавляется deg, пример — 30deg.

Чтобы создать сложный градиент, понадобится больше чем 2 цвета — CSS3 позволяет добавить неограниченное количество цветов через запятую. Можно применить прозрачный и полупрозрачный цвета. Для точного позиционирования цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах.

Что касается радиальных градиентов, то они похожи на линейные градиенты. Чем отличаются линейный и радиальный градиент? Тем, что в радиальных один цвет переходит в другой словно круги по воде вокруг точки, а не вдоль прямой линии. Есть две формы радиального градиента: circle (круг) и ellipse (эллипс). Они различаются внешним видом, по умолчанию используется форма эллипс. Также с формой градиента можно задать и его размер, зависящий от применяемых ключевых слов — размер указывается через пробел после формы градиента.

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

Таким образом, создать градиент с помощью CSS может каждый. При помощи градиентов можно делать уникальные элементы на сайте, например, при помощи градиентов и свойства background-size можно получить различные фоновые картинки без использования изображений. Но самому разрабатывать градиенты может быть не очень удобно, поэтому в сети есть готовые сервисы для генерации кода градиентов.

CSS-градиенты

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

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

Как правило, градиенты — это переходы одного цвета в другой, но в CSS вы можете контролировать каждый аспект того, как это происходит, от направлений перехода цветов (так, как вы захотите) до того, где этот переход цветов осуществляется.

Давайте рассмотрим все по порядку.

Градиенты — это изображения фона

Объявляя применение в CSS сплошного цвета для параметра background-color , градиенты используют background-image . Это дает нам несколько преимуществ, которые можно использовать позже.

Значение параметра background указывает на то, что вы хотите сделать, когда объявляете то или другое действие:

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

Возможно, одним из самых распространенных и полезных типов градиента является linear-gradient() . « Ось » перехода градиента может располагаться слева-направо, сверху-вниз или под любым другим углом на ваше усмотрение.

Если вы не объявляете отдельно угол, по умолчанию преобразования будут происходить сверху-вниз:

Посмотреть пример на Codepen

Вместо разделенных запятыми цветов вы можете использовать те типы цветов, которые вы обычно используете: шестнадцатеричные числа, название цвета, rgba , hsla , и т.д.

Чтобы сделать переход слева-направо, вы задаете дополнительный параметр в начале функции linear-gradient() , начиная код параметра со слова « to », а затем указывая направление.

Например, « to right »:

Посмотреть пример на Codepen

Данный синтаксис « to » применяется для углов переходов. Например, если вы хотите, чтобы ось градиента начиналась в левом нижнем углу и переходила к верхнему правому углу, можно указать « to top right »:

Посмотреть пример на Codepen

Если область перехода имеет квадратную форму, то угол градиента составит 45 градусов, однако если форма не квадратная, то такого угла не будет.

Если вы хотите задать градиент точно в 45 градусов, то вы можете объявить это:

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

Посмотреть пример на Codepen

Вы можете также объявить, откуда вы хотите, чтобы начинался какой-либо определенный цвет. Это называется « color-stop ».

Допустим, вы хотели бы, чтобы желтый цвет занимал большую часть пространства, а красного было только немного в начале.

В таком случае вы можете разместить color-stop желтого цвета несколько раньше:

Посмотреть пример на Codepen

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

Это может быть полезно для объявления фона, который имитирует столбцы, на всю высоту страницы:

Посмотреть пример на Codepen

Поддержка браузерами / Префиксы

До сих пор мы рассматривали только новый синтаксис, но тема CSS градиентов включает в себя и другие аспекты.

Например, поддержка браузерами. Здесь синтаксис и префиксы уже сложнее. Существует три разных набора правил синтаксиса, которые поддерживают браузеры.

Они не декларируют этого официально, но вот как вы можете себе их представить:

  • Старый : оригинальный, только с WebKit , в нем используется синтаксис наподобие from() и color-stop() ;
  • Tweener : старая система углов, например, « left »;
  • Новый : Новая система углов, например, « to right ».

То же касается и префиксов.

Давайте попробуем их перечислить:

Chrome 1-9: Старый, с префиксами.
10-25: Tweener, с префиксами.
26: Новый, без префиксов.
Safari 3-: Не поддерживаются.
4-5.0: Старый, с префиксами.
5.1-6.0: Tweener, с префиксами.
6.1: Новый, без префиксов.
Firefox 3.5-: Не поддерживаются.
3.6-15: Tweener, с префиксами.
16: Новый, без префиксов.
Opera 11.0-: Не поддерживаются.
11.1-11.5: Tweener, с префиксами, только линейные.
11.6-12: Tweener, с префиксами, добавлены радиальные.
12.1: Tweener, без префиксов.
15: Новый, без префиксов.
IE 8-: Не поддерживаются.
9: Только фильтры.
10+: Новый, без префиксов (также поддерживается префикс Tweener w/).
Android 2.0-: Не поддерживаются.
2.1-3.0: Tweener, с префиксами.
4.0-4.3: Новый, с префиксами.
4.4+: Новый, без префиксов.
iOS 3-: Не поддерживаются.
3.2-4.3: Tweener, с префиксами.
5.0-6.1: Новый, с префиксами.
7.0: Новый, без префиксов.

Тут существуют некоторые накладки. Например, если браузер поддерживает новый синтаксис, он, как правило, также поддерживает и старые синтаксисы, в том числе и префиксы.

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

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

Это ужасно большое нагромождение кодов. Добавлять их все вручную чревато большим количеством ошибок и, в любом случае, отнимет много времени.

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

Примеси Compass помогут перевести SVG -данные в URI под IE 9 , если это для вас существенно.

Фильтры IE

Internet Explorer (IE) 6-9 не поддерживает синтаксис CSS градиентов, однако предлагает программный способ задать градиенты фона:

Существует несколько критериев относительно того, применять вам фильтры или нет:

  1. Считается, что filter негативно влияют на производительность;
  2. background-image накладывается поверх фильтров, так что если вы хотите использовать его как запасной вариант, применение фильтров противопоказано. Однако если сплошной цвет является резервным вариантом ( background-color ), использование фильтров приемлемо.

Даже с учетом того, что фильтры работают только с шестнадцатеричными значениями, вы все равно можете получить альфа-прозрачность соотнеся шестнадцатеричное значение со значение прозрачности от 00 (0%) до FF (100%).

RGBA ( 92,47,90,1 ) == # FF5C2F5A
RGBA ( 92,47,90,0 ) == # 005C2F5A

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

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

Градиенты часто используются для имитации эффекта освещения, при котором, как мы знаем, свет не всегда равномерно освещает объекты, так что они могут быть полезны, чтобы создать градиент, который будет казаться естественным цветом объекта.

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

Переход осуществляется равномерно независимо от направления:

Посмотреть пример на Codepen

Вот как градиент задает эллиптическую форму, когда элемент не имеет квадратной формы.

Это по умолчанию ( ellipse по умолчанию задается в качестве первого параметра), но если вы хотите чтобы градиент создавал круг, мы можем задать это отдельно:

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

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

Для этого в первом параметре мы через пробел задаем « closest-side »:

Посмотреть пример на Codepen

Также могут задаваться значения: closest-corner (ближайший угол), closest-side (ближайший край), farthest-corner (самый дальний угол), farthest-side (самый дальний край).

Вы можете представить себе это так: « Я хочу, чтобы радиальный градиент переходил из центральной точки в __________ , и везде цвет распределялся сообразно этому ».

Радиальный градиент не обязательно должен начинаться в центре, вы можете задать центральную точку преобразований, указав ее с помощью « at ______ » в первом параметре:

Здесь я сделал это более наглядно, подготовив пример с квадратом и настроив точки color-stop :

Посмотреть пример на Codepen

Здесь в значительной степени все так же, как в случае с linear-gradient() , за исключением очень старых версий браузера Opera, которые поддерживают только линейные градиенты, но не радиальные.

Аналогично синтаксис radial-gradient() претерпел несколько изменений. Здесь также существует три набора: « Старый », « Tweener » и « Новый »:

Их отличительными чертами являются:

  • Старый : с префиксами использует -webkit- , синтаксис типа from() и color-stop() ;
  • Tweener : Первый параметр в нем определяет центр градиента. Это полностью сломает структуру в новых браузерах, поддерживающих синтаксис без префикса, поэтому проверяйте, чтобы все префиксы синтаксиса Tweener были расставлены;
  • Новый : первый параметр имеет синтаксис типа « circle closest-corner at top right «.

Опять же, я всегда обрабатываю код с помощью Autoprefixer . Вы пишете код в соответствии с новейшим синтаксисом, он делает резервные варианты.

Радиальные градиенты более гибкие, чем линейные, поэтому я рекомендую вам просто освоить новейший синтаксис и следовать ему (в крайнем случае, старый синтаксис можно не учитывать).

Повторяющиеся градиенты

Повторяющиеся градиенты имеют более слабую поддержку браузерами . Они представляют собой смесь линейных и радиальных градиентов.

В веб-дизайне существует такой трюк. Берется неповторяющийся градиент. С его помощью создается небольшой фрагмент, он стыкуется с таким же небольшим фрагментом, копией самого себя.

И в результате из таких прямоугольников выстраивается узор. По сути, вы создаете один небольшой прямоугольник и задаете background-size . С помощью подобного подхода легко создавать узоры полос, которые вы можете разворачивать в любую сторону.

С помощью repeating-linear-gradient() , вам не нужно прибегать к таким хитростям.

Размер градиента определяется окончательным color stop . Если размер color stop 20 пикселей, то размером градиента (который затем повторяется) будет квадрат 20 на 20 пикселей:

Посмотреть пример на Codepen

То же самое касается радиальных градиентов:

Посмотреть пример на Codepen

Некорректная резервная загрузка

Как мы уже упоминали, некоторые очень старые браузеры вовсе не поддерживают CSS-синтаксис градиентов. Если вам нужен запасной вариант, который бы работал, как замена градиентам, здесь можно применить изображение ( .jpg/ .png ).

Самое неприятное, это если некоторые чуть менее старые браузеры, в которых только появилась поддержка CSS градиентов, будут загружать резервное изображение.

Тогда они будут отсылать HTTP-запрос к изображению, даже если мог быть использован CSS-градиент.

Так происходит с Firefox 3.5.8 ( скриншот ), а также с Google Chrome ниже 5 версии и Safari 5.0.1 :

Отказ загрузки Safari 5.0.1

Правда на сегодняшний день это уже не является серьезной проблемой. Единственные браузеры, в которых наблюдались такие трудности, это Google Chrome и Safari . В Chrome это исправлено в версии 6, в Safari — в версии 5,1, которые вышли три года назад.

Данная публикация представляет собой перевод статьи « CSS Gradients » , подготовленной дружной командой проекта Интернет-технологии.ру

Linear-gradient(): линейный градиент в фоне

Цветовой градиент — это плавный переход от одного заданного цвета к другому через промежуточные цвета. В линейном градиенте переход происходит по прямой, от точки A к точке B. Градиент может иметь и более двух опорных точек — тогда переход совершается от точки A к точке B, затем от точки B к точке C и так далее.

Как сделать фоновый линейный градиент в CSS

В CSS3 вы можете добавлять градиентный фон к элементам через уже известное свойство background-image . В качестве значения используется ключевое слово linear-gradient() , где в скобках необходимо указать стартовую точку градиента, начальный цвет и конечный цвет.

Например, давайте сделаем фоновый линейный градиент с переходом от фиолетового цвета к красному. При этом мы хотим, чтобы начальная точка с фиолетовым цветом была с правой стороны, а вектор градиента направлялся влево. Запишем код:

Фоновый градиент на блоке

Цвета точек градиента можно записывать в любом формате, доступном в CSS, будь-то шестнадцатеричный код, формат RGB или другой. Направление градиента задается с помощью приставки to и затем ключевых слов left , right , top и bottom , которые можно комбинировать для изменения наклона. Например:

Кроме этого, можно прямо указать угол наклона, использовав положительное либо отрицательное число с приставкой deg (без пробела). При заданном угле 0º либо 360º градиентная линия будет идти снизу вверх. При увеличении угла наклона движение вектора происходит по часовой стрелке (при использовании отрицательного значения движение меняется на противоположное). Пример записи кода:

Чтобы лучше понять поведение линейных градиентов, необходимо видеть их. Поэтому рекомендуем вам самостоятельно попрактиковаться после прочтения данного урока.

Несколько опорных точек

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

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

Длина переходов

По умолчанию браузер размещает точки на равном расстоянии, поэтому и градация получается равномерной. Но этим расстоянием можно управлять, используя единицы измерения CSS. Давайте разберем следующий пример:

В нашем коде после цвета #92009b указано значение 20% . Поскольку оно стоит возле первой опорной точки, это означает, что указанным цветом будет закрашено 20% длины элемента. После чего уже начинается градиент: значение 90% говорит браузеру, что нужно достичь цвета #f5e944 к 90% длины элемента (начав на уровне 20%). После чего в оставшемся пространстве начинается переход к третьему цвету — #00ffa2 .

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

Вендорные префиксы

Для обеспечения кроссбраузерности к некоторым поздним CSS-свойствам нужно дописывать вендорные префиксы — специальные приставки, которые добавляют разработчики браузеров:

  • -webkit- — префикс для Chrome, Safari, Android;
  • -moz- — префикс для Firefox;
  • -o- — префикс для Opera.

Градиентный фон тоже требует использования данных префиксов, если есть необходимость в поддержке максимального количества браузеров. Для этого адаптируйте код следующим образом:

Для добавления префикса требуется создавать отдельное объявление. Кроме того, как вы могли заметить, свойства с вендорными префиксами не требуют использования приставки to при указании направления градиента.


Поддержка Internet Explorer

К сожалению, градиентный фон работает только в IE10+. Предыдущие версии не понимают его и будут игнорировать. Чтобы обеспечить хотя бы обычный фон в старых браузерах, можно создать т. н. «заглушку»: выберите подходящий оттенок и запишите свойство background-color над свойством с градиентом. Таким образом, старый браузер применит «резервный» фоновый цвет, а неизвестные ему свойства пропустит, тогда как в более современном браузере градиентный фон наложится на сплошной фон и перекроет его.

Если же у вас установлен полупрозрачный градиент (например, с использованием цветового формата RGBA) и вы не хотите, чтобы сквозь него просвечивался резервный фон-заглушка, задавайте градиент через сокращенное свойство background вместо background-image . Тогда значение background-color будет перезаписано на transparent .

Далее в учебнике: repeating-linear-gradient() — повторяющийся линейный градиент.

Создание градиентов. Линейный градиент

В CSS3.0 появилась возможность создавать градиенты для элементов, что раньше выполнялось только с помощью изображения, предварительно созданного, как правило, в Photoshop.

Градиенты для CSS бывают линейными (linear-gradient) и радиальными (radial-gradient). И если вы знакомы с Photoshop, то наверняка знаете, что это наиболее часто используемые градиенты.

Для того, чтобы применить градиент, нужно использовать свойство background-image или составное свойство background. Основная проблема здесь заключается в том, что свойство это так долго ожидалось верстальщиками, что все браузеры успели создать свой синтаксис для его отображения. Но об этом мы поговорим ниже, а сейчас основным синтаксисом мы будем считать стандартный.

Итак, сначала о линейном градиенте.

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

Подразумевает, как минимум, наличие 2-х значений цвета: начального и конечного. Самая простая запись выглядит так:

Но вы можете задать направление градиента, используя ключевое слово to и само направление: left (влево), right (вправо), top (вверх), bottom (вниз):

Кроме того, задать направление градиента можно в градусах, например, диагональный градиент будет иметь угол 45deg:

Можно задавать и отрицательное значение, тогда градиент «перевернется», т.е. будет направлен в противоположную сторону.

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

Если вы просто перечисляете цвета через запятую, то количество пространства распределяется между ними поровну. Но вы можете указать в какой точке должен начинаться и заканчиваться цвет. По умолчанию начальная точка задается как 0%, а конечная — как 100%. Поэтому, если вы не планируете ее никуда смещать, можно эти данные не указывать. Записываются значения цвета и значения места расположения через пробел:

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

В чем еще прелесть назначения позиций для градиента? Да в том, что с помощью указаний одних и тех же позиций для разных маркеров можно градиент превратить в . флаг, например, или сделать макет с 2-х или 3-х-колоночной версткой с колонками разного цвета.

Посмотреть результат всех предыдущих экспериментов можно здесь:

Кроссбраузерный линейный градиент

Теперь о многообразии вариантов градиента: для старых браузеров, не поддерживающих градиенты в принципе, нужно указать цвет фона, соответствующий одному из оттенков градиента: background: #b4e391;

Есть еще вариант показать для них изображение с градиентом, например:

Изображение в этом случае должно быть размером, например, 30×1920 px, чтобы охватывать большинство современных экранов. Градиент направлен слева направо.

Для Mozilla Firefox версий 3.6-15, Chrome версий 10-25, Safari версий 5.1 — 6 и 7+, Opera версии 11.5 и старше нужно указывать и ввендорные префиксы (-moz-, -webkit-, -o-), и убирать ключевое слово to.

А для IE до версии 10 существует специальный фильтр.

Результат будет выглядеть так:

Генератор градиента от Colorzilla

Чтобы не думать о кроссбраузерности, можно воспользоваться отличным редактором-генератором градиента, представляемым сайтом colorzilla.com. Очень наглядно, как в Photoshop, можно выбирать градиенты из набора существующих, изменять цвета и расположения маркеров, менять направление и вид градиента (линейный, радиальный), выбирать формат цвета, задавать прозрачность. И в конце нужно просто скопировать готовый код. Масса удовольствия, причем абсолютно бесплатно.

Кроме того, можно установить расширение от Colorzilla для браузеров Chrome и/или Firefox, и пользоваться еще пипеткой, например, или палитрой цветов, или анализировать цветовую палитру любого сайта. Для этого всего навсего нужно нажать на значок пипетки в правом верхнем углу браузера. Там есть опция CSS Gradient Generator — так вот это прямая ссылка на описанный выше генератор градиента.

CSS Matic Gradients

Еще один отличный сервис для создания градиента — это CSS Matic Gradients. Он предоставляет примерно те же возможности, что и Colorzilla Gradient Generator, но немного иначе. Мне очень нравится ползунок Hue (оттенок), с помощью которого можно легко изменить цвета выбранного градиента, не правя при этом оттенок каждого маркера.

На скриншоте ниже видно, что цвет маркера красный, ползунок Hue сдвинут в левую сторону, в результате получился сине-фиолетовый градиент. Ползунок Lightness позволит сделать градиент темнее/светлее.

Справа от градиента можно выбрать его направление (вправо, вниз, по диагонали) и вид (линейный, радиальный).
Есть поддержка IE младше 10 версии.

Кроме того, здесь есть возможность получить цвет в формате SASS, что очень удобно для тех, кто использует этот CSS-препроцессор.

UI Gradients

Еще один сайт, посвященный градинтам uiGradients. На нем есть ряд приятных двухцветных линейных градиентов, которые вы можете использовать как при дизайне сайта, так и в его верстке.

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

Кроме того, нажав клавишу SHIFT или кнопку внизу слайдера с градиентом, вы увидите ряд блоков с примерами градиентов. Сделать выбор в этом случае будет проще и быстрее.

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

CSS3 Maker

Еще один сервис, на котором вы можете настроить градиент — CSS3 Maker. Он содержит генератор не только градиента, но и других CSS3-свойств. Что касается градиента, то сайт определяет, какой браузер вы используете для серфинга по Интернету и выдает вам код с соответствующим вендорным префиксом (в моем случае -moz-linear-gradient для Mozilla Firefox). Не очень удобно в плане унификации кода. Зато можно поиграться с настройками. И посмотреть заодно, как работают другие свойства.

Blend — Create and customize beautiful CSS3 gradients.

В заголовке сервиса Blend написано «Создавайте и изменяйте красивые CSS3 градиенты». И так оно и есть.

Вы задаете нужные вам цвета, нажимаете на кнопку «Let’s Blend» — и, вуаля, градиент готов.

Справа вверху вы можете выбрать линейный вам нужен градиент или радиальный и получить код с помощью крайней правой кнопки.

Минусом этого генератора градиентов является то, что можно настроить градиент только из двух цветов и не более. Хотя, следует признать, что чаще всего больше и не требуется.

CSS Gradient Generator

Gradient Generator for Linear and Radial Css Color Gradients

В© 2020 CSS-GRADIENT.COM ⤏ Contact

About CSS Gradients

The CSS Gradient online generator tool is a nice and simple to use utility to quickly generate linear and radial color gradients. You can create the gradients and export the CSS code with colors in HEX or RGB format.

Keep reading below to learn more about Linear Gradients, Radial Gradients or Text Gradients.

CSS Gradients Browser compatibility

IE Edge Firefox Chrome Safari Opera iOS Safari Opera
Mini
Android
Browser
Chrome
Android
10+ 12+ 16+ 26+ 6.1+ 12 7.1+ x 4.4+ 46+

What is a CSS Gradient?

CSS3 gradients let you display smooth transitions between two or more specified colors.
Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser.

CSS3 defines two types of gradients:
— Linear Gradients (direction down/up/left/right/diagonally)
— Radial Gradients (defined by their center)

The CSS data type denotes a CSS made of a progressive transition between two or more colors. A CSS gradient is not a CSS but an image with no intrinsic dimensions; that is, it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the one of the element it applies to.

There are three kinds of color gradients:
— linear gradients, generated by the linear-gradient() function, where the color smoothly fades along an imaginary line.
— radial gradients, generated by the radial-gradient() function. The more away from an origin a point is, the more far from the original color it is.
— repeating gradients, which are fixed sized linear or radial gradients repeated as much as needed to fill the entire box.
Definition from MDN — Mozilla Developer Network

CSS Linear Gradients

What is a CSS Linear Gradient?

A linear gradient is created by specifying a straight gradient line, and then several colors placed along that line. The image is constructed by creating an infinite canvas and painting it with lines perpendicular to the gradient line, with the color of the painted line being the color of the gradient line where the two intersect. This produces a smooth fade from each color to the next, progressing in the specified direction.

Probably the most common and used type of gradient is the linear-gradient().
To create a linear gradient you must define at least two colors (or color-stops), and their value can be any type of color format (e.g. Hex, named colors, rgba, hsla, etc.).
The gradient direction can be specified as a 2 words value (e.g. «to top», «to bottom», «to left» and «to right») or it can be specified as an angle value (e.g. «0deg», «90deg»‘ «180deg»). If you don’t declare any value, the default direction will be set «to bottom», meaning the gradient will go from top (color-stop-1) to bottom (color-stop-2).

Syntax

Example

Result

CSS Radial Gradients

What is a CSS Radial Gradient?

In a radial gradient, rather than colors smoothly fading from one side of the gradient box to the other as with linear gradients, they instead emerge from a single point and smoothly spread outward in a circular or elliptical shape.
A radial gradient is specified by indicating the center of the gradient (where the 0% ellipse will be) and the size and shape of the ending shape (the 100% ellipse). Color stops are given as a list, just as for linear-gradient(). Starting from the gradient center and progressing towards (and potentially beyond) the ending shape uniformly-scaled concentric ellipses are drawn and colored according to the specified color stops.

Probably the second most common type of gradient, the radial-gradient().
To create a radial gradient you must define at least two colors, and their value can be any type of color format (e.g. Hex, named colors, rgba, hsla, etc.).
The gradient shape can be «circle» or «ellipse», and if not specified it defaults to «ellipse», while the position, which can be interpreted in the same way as «background-position», if not specified will default to «center» and meaning the gradient will go from inside (start-color) to outside (end-color).

Syntax

Example

Result

CSS Text Gradients

What is a CSS Text Gradient?

Probably less known than the linear gradient and the radial gradient, is the text gradient.
It’s the same background idea as the linear gradient, only that in this case you apply the gradient to a text instead of filling a background.
You’ll love it. Just try to hover over the website logo on the left and you’ll see for yourself.

CSS градиенты. Примеры использования градиентов в HTML & CSS

Пояснения к статье:

  1. — CSS свойство которое принимает несколько значений. Свойство < background : linear-gradient(to top white 20%, red 50%, black 30%)>задает градиент переходящий снизу вверх. Цвета будет располагаться по площади следующим образом: 20% — белый, 50% — красный, 30% — черный.
  2. radial-gradient > — CSS свойство, которое служит для создания радиального градиента. Принимает несколько значений. Запись background: radial-gradient(circle at 65% 15%, aqua, darkblue) создаст фигуру сине-голубого шара.
  3. @keyFrame — ключевое слово, которое используется для стилизации некоторых элементов, чаще всего для анимации.
  4. animation > — свойство, которое отвечает за анимацию. Её значения определяют длительность(в секундах), функции и количество повторений.

Градиент — элемент дизайна, который чаще всего используется для создания уникальных элементов. Его функция заключается в плавном перетекании из одного цвета в другой. Фоны, созданные с помощью css градиента, могут придать шикарный вид любому сайту.

Сама по себе тема градиентов является довольно сложной, поэтому в этой статье мы разберем её как можно подробнее. Ниже вы найдете 3 примера использования градиентов, а также сможете скачать исходники для самостоятельного изучения.

Синтаксис

Сейчас мы расскажем о том, как сделать простой градиент в CSS. Существует несколько разновидностей плавного цветового перехода.

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

Для начала мы рассмотрим самый простой — создание линейного градиента. Он создается с помощью свойства linear-gradient.

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

Также, можно задать распределение цвета по всей области градиента. По умолчанию все цвета распределяются равномерно, вдоль указанной линии.

Способов создания направления несколько, для этого используются точные и не точные значения. Из не точных значений выделяют to top, to bottom, to right и to left, которые задают направления вверх, вниз, вправо и влево соответственно.

Для указания другого направления записывается значение градусов угла наклона, которое измеряется в deg. 1 deg равен 1 градусу.

Для создания перехода цвета по диагонали можно использовать и ключевые слова, например сочетание to top left. Он задает линию переходящую влево, в верхний край экрана.

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

Запись < background : linear-gradient(to top, #fff 20%, #ccc, #000)>будет означать, что белый цвет будет занимать первые 20% области.

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

Задается с помощью команды radial-gradient. Основное отличие в том, что такой вид градиента распределяет цвета не по ровной линии, а выводит их наружу. Цвета будут располагаться в виде круга.

  • Первое значение, которое принимает команда radial-gradient — форма. Её можно указывать простыми словами — circle, ellipse и другие. По умолчанию стоит 2 значение.
  • Второе значение, в отличие от линейного градиента, задает положение центра. Для этого задаются такие же ключевые слова, с небольшим отличием: приставка to меняется на at.
  • С помощью точных значений можно задавать ширину и высоту градиента. Первое значение определяет ширину, а второе высоту. Для изменения ширины подходят такие размеры: %, rem и em.

Пример использования градиента. HTML & CSS

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

Подборка любимых градиентов

by Andrej — Category Обзоры on 24/08/2020

Всем привет! Сегодня хочу поговорить немного о градиентах, популярных сайтах, предоставляющих пользователям возможность выбирать и/или генерировать их, а так же, о нескольких градиентах, которые я люблю и применяю в различных проектах. Возможно, кому-то из вас они тоже понравятся.

  • Что такое градиент?
  • Форма записи градиентов в css
  • Написание цвета градиентов
  • Градиенты с изображениями
  • Градиент для текста
  • Сайты-генераторы градиентов

Сегодня мало кто не знает, что такое градиент, но для галочки, давайте вспомним.

Что такое градиент?

Градие́нт (от лат. gradiens, род. падеж gradientis — шагающий, растущий) — вектор, своим направлением указывающий направление наибольшего возрастания некоторой величины <\displaystyle \varphi >\varphi , значение которой меняется от одной точки пространства
к другой (скалярного поля), а по величине (модулю) равный скорости роста этой величины в этом направлении

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

Исходя из этого, давайте посмотрим на пример.

Способ записи градиентов в css

Градиент может быть записан двумя способами:

Какой способ записи использовать — решать вам.

Возвращаемся к примеру. В нем мы указали три значения свойств background :

  • 1. Каким будет градиент — linear-gradient — в данном случае он линейный. В дальнейшем в статье мы будем говорить именно о нем.
  • 2. Указали угол наклона градиентной линии, который показывает направление градиента. Указывать направление можно двумя способами: [ | to ] , где угол измеряется в deg, то есть — градус, или вторым способом
    — указанием позиции от и до. Например, to top , to right , to bottom left и т.д.
  • Значение цвета #****** , которым будет начинаться и заканчиваться градиент.

Написание цвета градиентов

Цвет градиента может быть записан любым доступным обозначением:

  • Hex Color Code — #000000 или сокращением #000;
  • RGB Color Code — rgb(0, 0, 0);
  • Color Name — black;
  • HSL Color Code — hsl(0, 0%, 0%);

Вы также можете указывать цвета в процентном соотношении, добавив после цвета %. Например, rgb(0, 0, 0) 0%, rgb(255,255,255) 100%.

Вот собственно и все базовые знания, необходимые для использования градиентов.

Градиенты с изображениями

Для записи комбинированного градиента, с картинкой в качестве фона, можно использовать и другие свойства background.

Давайте посмотрим на пример.

В нем мы создали градиентный фон (код 1) и добавили изображение, с наложенным на него градиентом (код 2).

Градиент для текста


Иногда хочется сделать текст ссылки или заголовка более ярким, заметным и/или заменить обычный текст на какую-нибудь картинку. CSS позволяет нам это сделать, используя следующие свойства:

Главное помните, что некоторые свойства поддерживаются не всеми версиями браузеров. Проверить совместимость можно на сайте Can I use

Объединение градиентов CSS в режиме Background Blend Mode

Совсем недавно появились еще три новых свойства CSS, которые получили довольно хорошую поддержку в современных браузерах. Эти свойства включают:

  • background-blend-mode, для смешивания фоновых изображений, градиентов и цветов фона
  • mix-blend-mode, для смешивания элементов над другими элементами и, наконец,
  • isolation, менее используемое свойство, применяется в режиме mix-blend, для смешивания элементов.

Давайте немного поговорим о первом. Такие функции, как linear-gradient(), radial-gradient(), и repeating-linear-gradient(), repeating-radial-gradient() и другие разновидности имеют широкую поддержку и более стандартизированный
синтаксис во всех современных браузерах. Однако, свойство background также может включать в себя более одного градиента, причем каждая функция разделяется запятой. Lea Verou продемонстрировала впечатляющие модели— паттерны, которые могут быть созданы с помощью этой техники: от шахматных досок, до кирпичей, до звезд. Но теперь, когда у нас есть свойство background-blend-mode, мы можем создать новые градиенты и шаблоны. Примеры ниже.

Спектральный фон

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

И вот у нас уже получился разноцветный фон. Создание подобного эффекта ранее было возможно только с изображением, вес которого составлял бы десятки килобайт. Но мы только
что воспроизвели этот эффект через CSS менее чем на 200 байт, не говоря уже о сохранении HTTP-запроса.

Создаем плед на css

Мы также можем создать интересные шаблоны с градиентами при помощи background-blend-mode.

В итоге вот что у нас получилось,

Фон сайта с кружочками

Как насчет еще одного, на этот раз с радиальным градиентом:

Результат превосходит все ожидания,

Эффект ночного видения

Давайте теперь попробуем воссоздать еще один эффект с режимами смешивания CSS и сделать фотографию, как будто мы просматриваем ее через объектив очков ночного видения. Возьмем обычное изображение и наложим на него радиальный градиент и градиент, который мы использовали при создании пледа — repeating-linear-gradient

И вот результат:

Градиент для border через border-image

Давайте создадим пустой div и сделаем ему градиентную рамку.

Как вы видите, у блока появилась цветная рамка, однако, цвет у нее один. Давайте добавим градиент.

В итоге наш блок будет выглядеть вот так:

Сайты-генераторы градиентов

Здесь небольшая подборка сайтов, позволяющих генерировать градиенты, делать из них canvas, png и svg форматы и копировать для установки в проекты.

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

Всем удачи и приятного творчества. Пишите в комментариях свои любимые градиенты.

Возможно Вас также заинтересует…

Уважаемые дизайнеры, программисты и разработчики! У меня лежат два инвайта на Dribbble. К сожалению, сейчас…

В разработке интернет-проектов, как и в промышленности активно используется термин ЧПУ. Однако здесь он не…

Привет, дорогие читатели! Эта статья может пригодиться веб-мастерам, использующим в работе JSFiddle. В ней я…

Изготовление сайта — это еще не гарант привлечения посетителей. И даже если привлечь их получится,…

Про CSS

CSS-градиенты: линейные градиенты

CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой. Они с нами уже достаточно давно, и имеют довольно неплохую поддержку браузерами. Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть Gradient Filter, также для IE9 можно использовать SVG.

Градиенты могут быть использованы везде, где используются картинки: в фонах, в качестве буллетов списков, они могут быть заданы в content или border-image .

Linear-gradient

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

Цветов может быть любое количество больше двух. Также можно управлять направлением градиента и границами (точками остановки) цветов.

Направление можно задавать градусами или ключевыми словами.

В градусах: от 0 до 360, например 270deg .

Ключевыми словами: to top = 0deg ; to right = 90deg ; to bottom = 180deg — значение по умолчанию; to left = 270deg .

Ключевые слова можно сочетать между собой, чтобы получить диагональный градиент, например to top left .

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

Вот код самого первого квадрата, для примера:

Следует помнить, что to top right не то же самое, что 45deg . Цвета градиента располагаются перпендикулярно линии направления градиента. При to top right линия идет из нижнего левого в верхний правый угол, при 45deg — располагается строго под этим углом независимо от размеров фигуры.

Разница хорошо видна на прямоугольных фигурах:

Также можно задавать точки остановки для цветов градиента, значения задаются в единицах или в процентах и могут быть больше 100% и меньше 0%.

Примеры задания значений в % , в em и значения, выходящие за границы элемента:

Чем ближе находятся точки остановки соседних цветов, тем четче будет граница между ними. Таким образом можно легко делать полосатые фоны:

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

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

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

При отсутствии ограничений код может быть гораздо короче:

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

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

Также важно знать, что ключевое слово transparent означает прозрачный черный, а не прозрачный белый, поэтому при его использовании в Firefox можно получить вот такую неприятность:

Действующий пример (смотреть в Firefox): jsbin.com/OvOwEma/2/edit.

Чтобы этого избежать, используйте полностью прозрачные цвета нужного оттенка, например, белый: rgba(255, 255, 255, 0) или черный rgba(0, 0, 0, 0) . Про разные способы задавать цвета можно почитать здесь.

Чтобы узнать rgb-нотацию конкретного цвета, можно воспользоваться CSS.coloratum, инструментом от Lea Verou.

Помимо обычного linear-gradient можно сделать repeating-linear-gradient — повторяющийся градиент

К сожалению, повторяющиеся градиенты ведут себя как попало и подойдут только для узоров, которым не важна точность. Если нужна аккуратность, используйте linear-gradient в сочетании с background-size и background-repeat .

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

Другое ограничение состоит в том, что градиенты не анимируются, что, впрочем, можно до какой-то степени обойти.

Для быстрого создания кроссбраузерных градиентов есть очень удобный инструмент: colorzilla.com/gradient-editor/. Помимо кода для современных браузеров, он предложит код для старых IE и SVG для 9-го.

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

Linear-gradient() в CSS

Доброго времени суток дорогие друзья и приступим. С появлением возможности реализации градиентов в CSS3 мы можем в значительной мере сократить использование картинок для фона. Здесь мы можем реализовать два вида градиентов линейный и радиальный. Рассмотрим подробнее:

Что мы здесь видим? У нас есть некий блок div высотой 200px, которому мы в качестве фонового изображения задали линейный градиент. Как видите значением свойства background-image(фоновое изображение) является функция linear-gradient, аргументами которой являются два цвета красный и синий, расположенных сверху вниз.

В перечислении цветов в градиенте мы не ограничены:

в этом примере мы с помощью градиента реализовали подобие радуги.

Мы можем также менять направление и угол градиента:

слева на направо.

под углом 45 градусов.

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

здесь у нас переход к синему цвету заканчивается на 50% высоты блока. Сам переход мы также можем сократить:

здесь мы указали у красного цвета, что его переход начинается на отметке в 40%. В результате чего переход составляет 10% чистая математика(50% — 40%).

И как вы наверное уже догадались если мы укажем:

то у нас получится эффект глянца, жесткого резкого переходя от одного цвета к другому.

флаг Российской Федерации с помощью градиента CSS.

С линейными градиентами мы более или менее разобрались, да кстати цвет мы можем указывать в любом удобном для нас формате(black, #000, rgb(0,0,0), rgba(0,0,0,1)).

Теперь рассмотрим радиальные градиенты. Чтобы вам все сразу стало понятно, изобразим наш флаг с помощью радиального градиента:

как видите эффект довольно необычный. Для того чтобы изобразить радиальный градиент мы воспользовались функцией radial-gradient(). В радиальном градиенты мы уже не можем задавать угол и направление, в плане всего остального они идентичны с линейным градиентом. Если у нас блок которому задается радиальный градиент представляет собой прямоугольник с разной шириной и высотой, то сам градиент представляет собой овальные области.

Поэтому если мы хотим область представлять в виде круга, то нам необходимо указать дополнительный параметр circle:

Помимо всего выше перечисленного мы можем менять позицию радиального градиента:

здесь мы указали дополнительный параметр farthest-side at и перечислили в процентах позицию по x и y. ,обратите внимание что между параметрами circle и farthest-side at нет запятой.

И напоследок давайте рассмотрим повторяющиеся градиенты.

Для того чтобы наш градиент дублировался мы можем записать так:

здесь как видите произошло дублирование нашего радиального градиента в результате чего у нас получился эффект волны.

Тоже самое мы можем делать и с линейным градиентом:

заметьте для того чтобы у нас градиенты стали дублировались мы воспользовались функциями repeating-radial-gradient — дублирование радиального градиента и repeating-linear-gradient — дублирование линейного градиента.

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

Градиент поверх фоновой картинки в CSS

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

Сейчас вы наверное задумались, а зачем вообще что-то накладывать на картинку и почему в CSS, если есть Photoshop?

На первую половину вопроса я отвечу, демонстрируя два изображения. На первом нет наложения градиента, а на втором – используется градиент. Что смотрится интереснее по дизайну?

Первый вариант

Второй вариант

Ответ очевиден. В первом варианте, из-за более широкой палитры цветов, тяжелее читается текст, да и зрительное восприятие неправильно расставляет акценты. Мы смотрим на верхушки деревьев, но вряд ли это главный посыл дизайнера.

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

Демонстрация.

Photoshop или CSS?

Ответ будет разный, смотря, о ком мы говорим? Дизайнер рисует свой макет в Photoshop, вынося градиенты на отдельный слой. Верстальщик, анализируя макет, должен решить – объединять ли слой картинки с градиентом и сохранить их в одном jpg/png/gif файле или градиенты верстать на CSS?

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

Переходим к написанию кода примера и как всегда начинаем с разметки.

HTML разметка

Тег header будет служить контейнером для фоновой картинки, а тег div с классом header_box – контейнером для двух заголовков.

The Forest

where nature and people

CSS код

В теге header опишем все свойства сразу для двух заголовков, поскольку стилизуем мы их одинаково и сознательно помещаем одну фразу в заголовки разных уровней. Здесь мы решаем вопрос переноса строки и вторая часть фразы меньше в размерах, так как находиться в теге h2. Разбивание одной фразы – это хороший дизайнерский приём, опять же делает фразу более значимой.

header <
font-family: sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: #fff;
text-transform: uppercase;
letter-spacing: 7px;
>

Кроме стилизации текста, в теге header лежит наш градиент вместе с фоновой картинкой. Свойство cover растягивает картинку на всю ширину и высоту хедера.

Градиент поверх картинки

Для справки: Градиенты бывают линейные и радиальные, линейный тянется по прямой линии, от одного цвета к другому, как правило их используют для заполнения фигур с углами (прямоугольники, квадраты). Радиальный градиент тянется из центра окружности к краям и он хорошо подходит округлым фигурам (круг, овал), на сайтах это обычно кнопки.

Итак, у нас линейный градиент (linear-gradient), тянущийся снизу вверх (to top), от светлого-зеленого оттенка к темно-зеленому (rgba и цифры).

background-image: linear-gradient (to top, rgba (89,106,114, 0.6), rgba (206,220,23, 0.4)), url (fog.jpg);

Последние две цифры – 0.6/0.4 регулируют степень прозрачности градиента, без этих цифр, мы вообще не увидели бы картинки, а один сплошной градиент.

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

Это не фотошоп, в реальности фотография целиковая, это мы виртуально её подрезали с помощью свойства clip-path. Пара цифр обозначает координаты X и Y, по которым строится кривая, маскирующая все лишнее. Данное свойство не поддерживается IE и Edge.

clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);

Позиционирование текста

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

.header_box <
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
>

Примеры градиентов

Оттуда можно скопировать код цвета и вставить в Photoshop или сразу в ваш CSS код.

Илон Маск рекомендует:  Что такое код mt_srand
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL