Как создать линейный и радиальный градиент CSS использование в вебе
Линейный градиент CSS
Линейный градиент CSS — это переход одного цвета в другой. Благодаря этому можно создавать интересные эффекты на страницах сайта. Для создания градиента существует специальное свойство CSS linear-gradient совместно с background .
Синтаксис CSS linear-gradient
- позиция — указывается направление в котором будет осуществляться переход. Может принимать следующие значения:
- to top — переход снизу вверх (0deg)
- to left — переход справа налево (270deg)
- to bottom — переход сверху вниз (180deg)
- to right — переход слева направо (90deg)
- to top left — переход правого нижнего угла к левому верхнему
- to top right — переход от левого нижнего угла к правому верхнему
- to bottom left — переход от правого верхнего угла к левому нижнему
- to bottom right — переход от левого верхнего угла к правому нижнему
Помимо точных значений можно указать угол наклона в deg
- цвет1 — начальный цвет
- цвет2 — конечный цвет
Цвет можно задавать в формате RGB, конкретный цвет или в формате rgba (см. коды цветов html для сайта).
Можно задавать переход нескольких цветов через запятую.
Как сделать нелинейное изменение градиента
Синтаксис linear-gradient также позволяет задавать ширину каждого цвета в процентном соотношении. Например
Для браузеров нужно задавать это свойство с вендорными префиксами: -moz-,-webkit-, -ms-, -o
СSS3 Градиент
CSS3 градиенты позволяют отображать плавные переходы между двумя или более указанными цветами.
CSS3 определяет два типа градиентов:
- Линейные градиенты (вниз/вверх/влево/вправо/по диагонали)
- Радиальные градиенты (определяются по центру)
CSS3 Линейные градиенты
Для создания линейного градиента необходимо определить по крайней мере, два цвета. Остановки цвета — это цвета, которые вы хотите отобразить плавными переходами. Можно также задать начальную точку и направление (от угола) вдоль с эффектом градиента.
Синтаксис
Линейный градиент — сверху вниз (по умолчанию)
В следующем примере показан линейный градиент, начинающийся сверху. Он начинает красный, переход к желтому:
Пример
Линейный градиент — слева направо
В следующем примере показан линейный градиент, начинающийся слева. Он начинает красный, переходит в желтый:
Пример
Линейный градиент — по диагонали
Вы можете сделать градиент по диагонали, указав как горизонтальное, так и вертикальное начальное положение.
В следующем примере показан линейный градиент, который начинается в левом верхнем углу (и идет в нижний правый угол). Он начинается красным, переход к желтому:
Пример
Использование углов
Если вы хотите больше контроля над направлением градиента, вы можете определить угол, вместо предопределенных направлений (снизу, сверху, справа, слева, снизу справа и т. д.).
Синтаксис
Угол определяется, как угол между горизонтальной линией и линией градиента.
В следующем примере показано, как использовать углы для линейных градиентов:
Пример
Использование нескольких цветов
В следующем примере показан линейный градиент (сверху-вниз) внесколько цветовых стоков:
Пример
В следующем примере показано, как создать линейный градиент (слева-направо) с цветом радуги и текстом:
Пример
Использование прозрачности
Градиенты CSS3, также поддерживают прозрачность, которую можно использовать для создания эффектов затухания.
Чтобы добавить прозрачность, мы используем функцию rgba() для определения цветовых стопов. Последним параметром в функции rgba() , может быть значение от 0 до 1 , и это определяет прозрачность цвета: 0 означает полную прозрачность, 1 указывает на полный цвет (без прозрачности).
В следующем примере показан линейный градиент, начинающийся слева. Он начинает полно-прозрачным, переходящий к полному красному цвету:
Пример
Повторение линейного градиента
Функция repeating-linear-gradient() используется для повтора линейных градиентов:
Пример
Повторяющийся линейный градиент:
CSS3 Радиальный градиент
Радиальный градиент определяется по центру.
Чтобы создать радиальный градиент, необходимо определить как минимум два цвета.
Синтаксис
По умолчанию форма эллипс, размер, самый дальний угол и положение по центру.
Радиальный градиент — равномерно расположенные остановки цвета (по умолчанию)
В следующем примере показан радиальный градиент равномерного цвета:
Пример
Радиальный градиент — различные цветовые остановки
В следующем примере показан радиальный градиент с различными цветовыми остановками:
Пример
Установить фигуру
Параметр shape определяет фигуру. Может принимать значение circle или ellipse . Значение по умолчанию — ellipse .
В следующем примере показан радиальный градиент с фигурой круга:
Пример
Использование ключевых слов разного размера
Параметр side определяет размер градиента. Он может принимать четыре значения:
- closest-side
- farthest-side
- closest-corner
- farthest-corner
Пример
Радиальный градиент с разными ключевыми словами размера:
#grad1 <
background: radial-gradient(closest-side at 60% 55%, red, yellow, black);
>
#grad2 <
background: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
>
Повторение радиального градиента
Функция repeating-radial-gradient() используется для повтора радиальных градиентов:
CSS: Линейный градиент для фона
Градиент — заполнение выделенной области последовательностью цветовых оттенков с плавными переходами между ними. Градиент используется для отображения плавного перехода между двумя или более указанными цветовыми оттенками. Пример градиента:
Раньше, для создания эффекта градиента использовались фоновые изображения. Теперь для создания градиентного фона можно использовать CSS3. Элементы с установленными с помощью CSS3 градиентами выглядят лучше при увеличении, чем их аналоги — подключаемые фоновые изображения, так как градиент генерируется браузером непосредственно под указанную область.
Обратите внимание, что CSS градиент является фоновым изображением создаваемым браузером, а не фоновым цветом, поэтому он определяется как значение свойства background-image. Это означает, что градиент можно указывать не только в качестве значения свойства background-image, но и везде, где можно вставлять фоновое изображение, например в list-style-image и background.
CSS3 определяет два типа градиентов:
- Линейный градиент (Linear Gradient) — плавный переход от цвета к цвету по прямой линии.
- Радиальный градиент (Radial Gradient) — плавный переход от цвета к цвету из одной точки во все направления.
Линейный градиент
Линейный градиент распространяется по прямой линии, демонстрируя плавный переход от одного оттенка цвета к другому. Линейный градиент создаётся с помощью функции linear-gradient(). Функция создаёт изображение, которое представляет собой линейный градиент между указанными оттенками цветов. Размер градиента соответствует размеру элемента, к которому он применён.
Функция linear-gradient() принимает следующие, разделяемые запятой, аргументы:
- В качестве первого аргумента указывается градус угла или ключевые слова, определяющие угол направления линии градиента. Необязательный аргумент.
- Разделяемый запятыми список состоящий из двух или более цветов, за каждым из которых может следовать стоп позиция.
Простейший линейный градиент требует только два аргумента, определяющие начальный и конечный цвет:
При передаче функции двух аргументов устанавливается вертикальный градиент с начальной точкой сверху.
Направление линии градиента может быть определено двумя способами:
Использование градусов В качестве первого аргумента можно передать градус угла линии градиента, определяющий направление градиента, так например, угол 0deg (deg сокращение от англ degree — градус) определяет линию градиента от нижней границы элемента к верхней, угол 90deg определяет линию градиента слева на право и т.д. Проще говоря, положительные углы представляют собой вращение по часовой стрелке, отрицательные соответственно против часов. Использование ключевых слов В качестве первого аргумента могут также передаваться ключевые слова «to top», «to right», «to bottom» или «to left», они представляют собой углы линий градиентов «0deg» «90deg» «180deg» «270deg» соответственно.
Угол можно так же задать с помощью двух ключевых слов, например, to top right — линия градиента направлена в верхний правый угол.
Пример градиента заданного в разных направлениях:
Как уже упоминалось, линейный градиент может включать список более чем из двух цветов, разделяемых запятой, браузер будет их равномерно распределять по всей доступной области:
После цвета допускается указывать стоп позицию для него, которая определяет место расположение цвета (где один цвет начинает переходить в другой) относительно начальной и конечной точки градиента. Стоп позиция указывается с помощью единиц измерения поддерживаемых в CSS или с помощью процентов. При использовании процентов, расположение стоп позиции вычисляется в зависимости от длины линии градиента. Значение 0% является начальной точкой градиента, 100% — конечной.
Значение цвета можно указывать различными способами, например: указать имя цвета, использовать шестнадцатеричные значения (HEX), с помощью синтаксиса RGB (RGBA) или HSL (HSLA). Например, использование градиента с прозрачностью может быть использовано в сочетании с фоновым цветом или изображением, расположенным под градиентом для создания интересных визуальных эффектов:
MnogoBlog
как создать сайт на wordpress, настроить и оптимизировать wordpress
Создаем градиенты с помощью CSS
Здравствуйте, в данной статье с помощью CSS мы будем создавать разнообразные линейнын и радиальные градиенты.
Скачать исходники для статьи можно ниже
Линейные градиенты.
Линейные градиенты могут иметь следующие направления: вниз, вверх, влево, вправо или по диагонали.
Чтобы создать линейный градиент, вам нужно задать два или более цветовых узла, которые будут образовывать плавные цветовые переходы. Кроме того, Вы также должны установить начальную точку, а также направление или угол.
Основной синтаксис для этого является:
Линейный градиент сверху вниз
В данном примере линейный градиент переходит от зеленого цвета (сверху) к желтому (снизу):
Линейный градиент слева направо
В следующем примере линейный градиент переходит от синего цвета (слева) к фиолетовому (справа):
Линейный градиент по диагонали
Для того, чтобы сделать переход цвета в градиенте по диагонали, нужно задать ему угол (-45deg) или направление (to bottom, to top, to left, to right, to bottom left и др).
Линейный градиент с несколькими цветовыми узлами
В приведенном ниже примере используется три цветовых узла (красный – red, желтый – yellow и зеленый – green). По умолчанию они распределены равномерно. Однако, если вы хотите определить интервал, просто введите процент после каждого цвета (например, red 10%, green 85%, blue 90%).
Повторение Линейного Градиента
Все ранее упомянутые линейные градиенты могут быть сделаны повторяющимися с помощью функции repeating-linear-gradient():
Радиальные градиенты CSS3
Радиальные градиенты определяются их центром. Чтобы создать радиальный градиент, вам также как и в линейном, нужно будет задать два или более цветовых узла.
Основной синтаксис для этого следующий:
Как и в случае с линейным градиентом, по умолчанию в радиальных градиентах интервал образует равномерно расположенные эллипсы, но вы можете указать форму (например, эллипс или круг), а также интервал в процентах (например: red 5%, yellow 15%, green 60%).
Повторение Радиального Градиента
Все ранее упомянутые радиальные градиенты могут быть сделаны повторяющимися с помощью функции repeating-radial-gradient():
Прозрачные Градиенты
Вы также можете использовать CSS3 для создания прозрачных градиентов, используя функцию rgba (), к тому же её можно применить к любому градиенту описанному выше.
Функция rgba () использует значения от 0 до 1, где 0 означает полную прозрачность, в то время как 1 означает полный цвет или нулевую прозрачность.
В приведенном выше примере градиент начинается от полностью прозрачного к полностью красному.
Про CSS
Радиальные градиенты
Радиальные градиенты отрисовываются иначе, чем линейные. Если цвета линейных располагаются перпендикулярно линии, задающей направление, то в радиальных цвета расходятся от заданного центра, а градиент может принимать форму круга или эллипса.
Для самого простого градиента достаточно задать только цвета:
По умолчанию центр градиента находится по центру, градиент имеет форму эллипса:
Помимо цветов градиенту можно задавать форму, положение и размер. Параметры сочетаются и ведут себя сложнее, чем в линейных градиентах.
Форма (конечная фигура градиента) может быть кругом и эллипсом. По умолчанию — эллипс, градиент стремится занять всё свободное пространство элемента, вытягиваясь, если это необходимо.
Чтобы градиент имел форму круга — это нужно задать явно с помощью ключевого слова circle .
Если форма не задана, но задан размер — одно значение задает радиус круга, если значений два — градиент получает форму эллипса. При наличии размеров явное задание формы градиента игнорируется.
Положение определяет где будет расположен центр градиента. Используются те же ключевые слова, что и для линейного градиента, но с приставкой at : at top , at right , at bottom , at left и at center — значение по умолчанию.
Их так же можно сочетать между собой, чтобы расположить градиент на заданной стороне, например: at right top — в верхнем правом углу.
Ниже можно увидеть как работают разные положения:
Код первого квадрата:
Также можно задавать точное положение градиента, например at 20% 50% или at 10px 150px .
Размер определяет размеры конечной фигуры градиента. Для эллиптических градиентов значения можно задавать в процентах, для круглых — нет.
Если задано одно значение — оно считается радиусом круглого градиента. Если задано два значения — первое считается горизонтальным радиусом эллипса, второе — вертикальным.
Ниже примеры круглых и эллиптических градиентов. Форма фигуры определяется заданными размерами:
Также можно использовать ключевые слова:
closest-side — градиент заканчивается у границы элемента ближайшей к центру градиента. Если это эллипс, градиент касается всех границ элемента. farthest-side — градиент заканчивается у дальней границы элемента. Если это эллипс, градиент касается всех границ элемента. closest-corner — конечная фигура растягивается таким образом, чтобы она проходила через угол элемента, ближайший к центру градиента. Если конечная фигура — эллипс, градиент растягивается на всю фигуру. При этом параметре градиент заполняет собой всю фигуру, частично выходя за её пределы. farthest-corner — аналогично closest-corner , только конечная фигура проходит через угол, дальний от центра градиента. Значение по умолчанию.
Некоторым градиентам добавлено положение at bottom , чтобы было лучше видно действие кода:
Радиальный градиент также может быть повторяющимся — это repeating-radial-gradient .
Как и в случае с линейным градиентом, повторяющийся градиент не очень аккуратно отрисовывается.
Сочетая несколько фонов с разными параметрами можно получить удивительные вещи:
See the Pen Rounds by yoksel (@yoksel) on CodePen.
See the Pen Circles by yoksel (@yoksel) on CodePen.
Если при создании узоров использовать относительные единицы ( em , % ), а не абсоюлютные ( px ), размер получившихся паттернов потом можно будет легко регулировать изменяя только размер шрифта.
Если вы заинтересовались кодом паттернов, я бы советовала попробовать повторить узор не подглядывая в исходники, это полезно : )
Создание градиентов. Линейный градиент
В 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» — и, вуаля, градиент готов.
Справа вверху вы можете выбрать линейный вам нужен градиент или радиальный и получить код с помощью крайней правой кнопки.
Минусом этого генератора градиентов является то, что можно настроить градиент только из двух цветов и не более. Хотя, следует признать, что чаще всего больше и не требуется.
Линейный градиент
Градиентом называют плавный переход от одного цвета к другому, причём самих цветов и переходов между ними может быть несколько. С помощью градиентов создаются самые причудливые эффекты веб-дизайна, например, псевдотрёхмерность, блики, фон и др. Также с градиентом некоторые элементы смотрятся более симпатично, чем однотонные.
Отдельного свойства для добавления градиента нет, поскольку он считается фоновым изображением, поэтому добавляется через свойство background-image или универсальное background с помощью функции linear-gradient() , как показано в примере 1.
Пример 1. Градиент
Результат данного примера показан на рис. 1.
Рис. 1. Линейный градиент для абзаца
Для простого градиента с двумя цветами вначале пишется позиция, от которой будет начинаться градиент, затем начальный и конечный цвет.
Для записи позиции первым идёт to , а затем добавляются ключевые слова top , bottom и left , right , а также их сочетания. Порядок слов не важен, можно написать to left top или to top left . В табл. 1 приведены разные позиции и тип получаемого градиента для цветов #fff и #000, по другому от белого к чёрному.
| Позиция | Угол | Описание | Вид | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| to top | 0deg | Снизу вверх. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| to left | 270deg | Справа налево. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| to bottom | 180deg | Сверху вниз. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| to right | 90deg | Слева направо. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| to top left | От правого нижнего угла к левому верхнему. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| to top right | От левого нижнего угла к правому верхнему. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| to bottom left | От правого верхнего угла к левому нижнему. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| to bottom right | От левого верхнего угла к правому нижнему. |
Вместо ключевого слова допускается задавать угол наклона градиентной линии, который показывает направление градиента. Вначале пишется положительное или отрицательное значение угла, затем к нему слитно добавляется deg. Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт ведётся по часовой стрелке, как показано ниже. Для значения top left и ему подобных угол наклона градиентной линии вычисляется исходя из размеров элемента так, чтобы соединять две диагонально противоположные угловые точки. Для создания сложных градиентов двух цветов уже будет недостаточно, синтаксис позволяет добавлять их неограниченное количество, перечисляя цвета через запятую. При этом можно использовать прозрачный цвет (ключевое слово transparent ), а также полупрозрачный с помощью формата RGBA, как показано в примере 2. Пример 2. Полупрозрачные цвета Результат данного примера показан на рис. 2. Рис. 2. Градиент с полупрозрачными цветами Чтобы точно позиционировать цвета в градиенте, после значения цвета указывается его положение в процентах, пикселях или других единицах. Например, запись red 0%, orange 50%, yellow 100% означает, что градиент начинается с красного цвета, затем на 50% переходит в оранжевый, а затем до конца в жёлтый. Для простоты крайние единицы вроде 0% и 100% можно не писать, они подразумеваются по умолчанию. В примере 3 показано создание градиентной кнопки, в которой положение второго цвета из трёх задано как 36%. Пример 3. Градиентная кнопка Результат данного примера показан на рис. 3. Рис. 3. Градиентная кнопка Задавая положения цветов можно получить резкие переходы между ними, что в итоге даёт набор однотонных полосок. Так, для двух цветов надо указать четыре значения, первые два цвета одинаковы и начинаются от 0% до 50%, оставшиеся цвета также одинаковы между собой и продолжаются от 50% до 100%. В примере 4 полоски добавляются в качестве фона веб-страницы. Из-за того, что крайние значения подставляются автоматически их можно не указывать, достаточно написать всего-лишь два цвета. Пример 4. Однотонные полоски Результат данного примера показан на рис. 4. Обратите внимание, что один из цветов градиента задан прозрачным, поэтому он меняется косвенно через цвет фона веб-страницы. Рис. 4. Фон из горизонтальных полосок Градиент также можно масштабировать, тем самым получая самые разные эффекты. Например, добавив background-size к линейному градиенту, мы заставим его повторяться, что образует чередующиеся градиентные полоски (пример 5). Заодно устанавливаем ширину этих полосок. Пример 5. Вертикальные полосы Результат примера показан на рис. 5. Рис. 5. Вертикальные градиентные полоски Поскольку можно одновременно добавлять несколько фонов, перечисляя их параметры через запятую, то же самое допустимо проделать и с градиентами. Только один из цветов должен быть полупрозрачным, иначе градиенты будут перекрывать друг друга. В примере 6 для фона веб-страницы применяется два градиента, пересекающихся под прямым углом, что в сочетании с background-size создаёт клетки. Пример 6. Два градиента Результат данного примера показан на рис. 6. Сочетание градиента и свойства background-size позволяет получить самые разнообразные виды фоновых заливок, созданных без применения фоновых изображений. radial-gradient()На этой страницеCSS функция radial-gradient() создает картинку состоящую из последовательных переходов между двумя и более цветами, которые исходят из заданного центра. Они могут принимать форму круга или эллипса. Результатом функции будет объект типа , который является расширением типа . The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. Как и любой градиент, радиальный градиент не имеет внутренних размеров, тоесть заданных или предпочитаемых размеров, как и заданного коэффициента соотношения сторон. Его итоговый размер будет соответствовать размеру элемента к которому он применен. Чтобы создать повторяющийся радиальный градиент, который будет заполнять контейнер, необходимо использовать функцию repeating-radial-gradient . Поскольку ы относятся к типу , они могут быть использованы только там где используется тип . По этой причине radial-gradient() не будет работать совместно с background-color и другими свойствами, которые используют тип CSS data type предоставляет цвте в цветовом спектре sRGB. В может включять значения прозрачности Альфа-канала (alpha-channel), уыказывающие, как цвет сочетаеться с его фоном.»> . Композиция свойстваРадиальнй градиент задается позицией центра, конечной формой, и двумя или более точками изменения цвета. Чтобы создать плавный градиент, функция radial-gradient() рисует серию концентрических форм исходящих из центра к краям формы градиента (и потенциально далее за его пределы). Конечная форма может быть как кругом так и эллипсом. Точки изменения цвета расположены на виртуальном луче градиента, который расширяется горизонтально направо. Позиция точек заданных в процентах расчитывается относительно пересечения конечной формы таким лучем, что является 100% . Цвет каждой такой формы задается цветом на пересечении луча градиента и этой формы. СинтаксисПараметрыПозицию начала градиента можно рассматривать как background-position или transform-origin . По умолчанию позиция равна center . Форма градиента. Может принимать значение circle (подразумевается что формой является круг с постоянным радиусом) или ellipse (форма является эллипсом, выровненным по оси). По умолчанию имеет значение ellipse . Параметр определяющий размер конечной формы. Возможные значения:
Заметка: Ранние реализации этой функции включают в себя другие значения свойства ( cover and contain ) которые являются синонимами farthest-corner и closest-side , соответственно. Рекоментуется использовать только стандартные значения, так как некоторые реализации уже перестали использовать старые значения свойств. или вдоль оси градиента). Значения 0% , или 0 представляют центр градиента; значение 100% представляет собой виртуальное пересечение конечной формы с виртуальным лучем граддиента. Процентные значения будут линейно расположены на луче градиента. CSS градиенты. Примеры использования градиентов в HTML & CSSПояснения к статье:
Градиент — элемент дизайна, который чаще всего используется для создания уникальных элементов. Его функция заключается в плавном перетекании из одного цвета в другой. Фоны, созданные с помощью 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. Основное отличие в том, что такой вид градиента распределяет цвета не по ровной линии, а выводит их наружу. Цвета будут располагаться в виде круга.
Пример использования градиента. HTML & CSSПеред тем, как показывать примеры, скажем пару слов о CSS генераторах градиента. Они позволяют создать вам очень просто и быстро создать нужную форму и переход, не высчитывая значения вручную. CSS функция linear-gradient()Определение и применениеCSS функция linear-gradient() (линейный градиент) используется для заливки определенной области заданной последовательностью цветовых оттенков с плавными переходами между ними. Функция линейный градиент является самой простой в понимании, она распространяет градиент по прямой от одного края элемента к другому с плавно переходящими цветовыми оттенками. Для построения линейного градиента достаточно задать начальный и конечный цвет. Более подробно о работе с градиентами вы можете ознакомиться в статьях «CSS функции: линейные градиенты» и «CSS функции: радиальные градиенты». Обращаю Ваше внимание, что в статьях освещены нюансы работы со старыми браузерами и приведены многочисленные примеры. Поддержка браузерами
CSS синтаксис:Создавая градиент, допускается использовать не только «Предопределенные цвета», но и любые «значения цвета, используемые в CSS» — шестнадцатеричные (HEX), значения цвета RGB / -A и HSL /-A. НаправлениеВсе линейные градиенты (по умолчанию) размещаются по направлению от верхнего края элемента к нижнему. В CSS есть несколько вариантов изменения начальной позиции градиента — это использование значений в градусах, либо ключевых слов. Для указания начальной позиции градиента применяются следующие ключевые слова:
Для того, чтобы задать угол градиента в градусах необходимо указать значение в диапазоне от 0 до 360 совместно с ключевым словом deg . Современный стандарт допускает использование отрицательных значений. Линейный градиент, заданный в градусах проходит через середину точки центра элемента и отображается (рендерится) вдоль этой линии. Ниже представлено изображение, на котором указано как располагается градиент под тем или иным углом на примере квадратного элемента: Расположение градиента, заданного в градусах в квадратном элементе. Значения 0deg , 90deg , 180deg и 270deg соответствуют значениям ранее рассмотренных ключевых слов независимо от того является элемент квадратным или имеет прямоугольную форму. В случае если элемент полностью квадратный, то следующие значения в градусах будут полностью соответствовать ключевым словам:
* — верно, только для квадратного элемента. На изображении ниже отображена разница между значениями в 45 градусов и значениями to right top для прямоугольного элемента. Главное, что необходимо понять, что для квадратных элементов значения 45deg и to right top , 135 deg и to right bottom , 225deg и to left bottom , 315deg и to left top будут одинаковы, а для прямоугольных градиентов эти значения будут отличаться: Расположение градиента в прямоугольном элементе (сравнение 45deg и to right top). Точки остановкиСинтаксисом предусмотрена возможность задать для определенного цвета градиента размер, который он занимает по отношению к другим цветам, используя специальные точки остановки. Точка остановки сообщает браузеру, что градиент должен достичь заданного цвета к заданному значению и плавно перейти к следующему цвету, если он есть. Допускается указывать значения точек остановки (color stops) в единицах измерения длины (например – px или em), так и в процентных значениях. Как правило, процентные значения являются более удобными и адаптивными в использовании. Версия CSSПример использованияРассмотрим как указать позицию градиента с использованием ключевых слов: В данном примере мы создали восемь блоков, для каждого блока мы указали различные направления размещения градиента, которые можно задать с использованием ключевых слов. Кроме того, применили вертикальное выравнивание, выравнивание текста по центру, установили высоту строки равную высоте элемента, указали внешние отступы для всех сторон. Результат нашего примера представлен на изображении: Позиция градиента (использование ключевых слов). Рассмотрим как указать позицию градиента с использованием градусов: В данном примере мы создали элемент высотой 100 пикселей (ширина автоматически растягивается на весь экран). Задали для него трехцветный градиент под углом 135 градусов . Кроме того применили вертикальное выравнивание, выравнивание текста по центру и установили высоту строки равную высоте элемента. Позиция градиента (использование градусов). Рассмотрим использование точек остановки градиента на следующем примере: В данном примере мы создали пять элементов высотой 50 пикселей (ширина автоматически растягивается на весь экран). Задали для них трехцветный градиент, располагающийся слева направо. Кроме того, применили вертикальное выравнивание, выравнивание текста по центру, установили высоту строки равную высоте элемента и указали внешний отступ с нижней стороны равный 0.7em . Для первых четырех блоков указаны значения точки остановки только для красного цвета (остальные цвета занимают равномерное расстояние). Для последнего блока мы указали три точки остановки:
Результат нашего примера: Рис. 128 Пример использования точек остановки градиента. Современный стандарт CSS по аналогии работы с фоновыми изображениями позволяет указать для одного элемента несколько линейных градиентов (функций). Для этого необходимо перечислить их через запятую. В следующем примере мы создадим флаг Швейцарии (один к одному), используя три градиента, которые мы укажем в одном объявлении:
Порядок наложения градиентов в примере. Результат нашего примера: Пример создания флага Швейцарии с использованием нескольких градиентов. CSS функции |
