-o-linear-gradient в CSS


Содержание

Взгляд на CSS3 градиент (линейный и радиальный градиенты)

Здравствуйте, уважаемые читатели XoZbloga! Градиент является прекрасным инструментом манипуляции с цветом в CSS3. Вместо того, чтобы использовать изображение, для создания эффекта градиента на веб-странице, куда выгодней будет воспользоваться CSS3 градиентом и тем самым «облегчить» сайт. Так как пользователю не нужно будет тратить времени и трафика на загрузку фонового изображения. Существует два основных вида градиента: радиальный и линейный. Сегодняшний пост будет именно о них.

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

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

В общем случае синтаксис градиента (линейного) выглядит так:

Итак, давайте обо всем по порядку.

Прежде всего, линейный градиент объявлен функцией linear-gradient() . Функция имеет три основных значения. Первое значение определяет исходное положение. В примере указано top т.е. исходное положение сверху. Можно также использовать bottom , left и right ;

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

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

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

Последним значением является второй цвет и его стоп позиция. По умолчанию принимает значение 100% . Эти крайние значения и они подразумевают, что первый цвет сразу начинает переходить во второй. Однако, если мы установим для первого цвета 50% , то он только с середины доступной высоты начнет переходить во второй. Вот так выглядит код:

Теперь давайте изменим значение стоп позиций, и на этот раз мы установим 50% для первого и второго цвета:

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

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

Радиальный градиент также как и линейный объявляется функцией, только уже radial-gradient() . Также есть и основные значения: это форма радиального градиента ( circle — круг или ellipse — эллипс), начальный и конечный цвет. Синтаксис следующий:

Если не указывать форму, то по-умолчанию будет установлен эллипс.

Также по-умолчанию установлена центральная позиция градиента, ее можно изменить. Позицию можно задать командами ( top , bottom , left , right и center ), а также их комбинациями, либо указать в процентах или пикселях.

  • По центру вверху — top — 50% 0%;
  • В левом верхнем углу — left top — 0% 0%;
  • В правом верхнем углу — right top — 100% 0%;
  • По центру — center — 50% 50%;
  • Слева по центру — left center — 0% 50%;
  • Справа по центру — right center — 100% 50%;
  • По центру снизу — bottom — 50% 100%;
  • В левом нижнем углу — left bottom — 0% 100%;
  • В правом нижнем углу — right bottom — 100% 100%.

Вот пример с процентами:

Первое значение по оси Х второе по У.

Также радиальному градиенту можно задавать размер. Размер указывается через пробел после формы градиента. По-умолчанию применяется farthest-corner (к дальнему углу). Расчет ведется от центральной точки градиента до:

Значение Описание
closest-side Размер градиента рассчитывается из расстояния до любой ближней стороны блока (для circle ) или до ближних сторон по X и по У (для ellipse ). Примеры чуть ниже.
farthest-side Размер также рассчитывается из расстояния, но уже до дальних сторон.
closest-corner Теперь в качестве ориентира используются ближние углы.
farthest-corner Рассчитывается из расстояния до дальних углов.

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

Размер рассчитывается из расстояния до ближних сторон, очевидно что верхняя ближе по оси Y и левая по оси X.

А теперь до дальних сторон:

Результат, как говорится на лицо. Размер исчисляется из расстояния до дальних сторон.

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

Альфа канал, тот что последний и равен 0.2 указывает на то, что от 100% цвета используется только 20%.

В обоих видах CSS3 градиента можно использовать не два, а несколько цветов.

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

Для обоих видов можно использовать повторение цветов. То есть, из данных значений образуется цикл. Функции повторяющегося градиента, repeating-linear-gradient() — для линейного и repeating-radial-gradient() — для радиального.

Кроссбраузерность

К сожалению, на момент написания этой статьи, современные браузеры еще не поддерживают стандартный синтаксис. Они по прежнему нуждаются в префиксах, каждый в своих ( -webkit- , -moz- , -ms- и -o- ). Поэтому синтаксически правильным является вот такое описание градиента:

Чтобы упростить задачу с префиксами, можно использовать бесплатную библиотеку Prefix-Free.

Для того чтобы градиент заработал на «9 осле» (Internet Explorer 9), пишем так:

Но даже здесь есть ограничения, нельзя добавить более 3 цветов и для использования прозрачности нужно немного изменить HEX код цвета:

Где 33 сразу после решетки это процент насыщенности цвета.

Надеюсь, что статья оказалась для Вас полезной, а рассмотренная тема полностью раскрытой.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или добавляйте в круги на Google+. Не забывайте оставлять комментарии. Спасибо!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

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). Например, использование градиента с прозрачностью может быть использовано в сочетании с фоновым цветом или изображением, расположенным под градиентом для создания интересных визуальных эффектов:

-o-linear-gradient в CSS

Возможность применения CSS-градиента была реализована Webkit несколько лет назад, но он редко использовалася из-за несовместимости с большинством браузеров. Но теперь Firefox, начиная с версии 3.6+, начал поддерживать градиент, и мы можем создавать градиент без обязательного использования изображения. Opera добавила поддержку CSS-градиента начиная с версии 11.10.

В этой статье мы покажем Вам, как создать CSS-градиент, который будет поддерживаться всеми основными браузерами: IE, Firefox 3.6+, Safari, Opera 11.10+ и Chrome.

В CSS3 градиенты бывают двух видов — линейные и радиальные. Рассмотрим сначала линейный градиент.

Илон Маск рекомендует:  Что такое код asp iisftpservice

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

Для Webkitбраузеров:

Следующий код предназначен для webkit браузеров, таких как Safari, Chrome, и т.д. Он создаст линейный градиент, от верхней точки (#ccc) к основанию (#000).

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

Для Firefox 3.6+:

Для Opera

Этот код будет работать в Опере начиная с версии 11.10.

Для Internet Explorer

Градиент для IE 10+

Этот фильтр будет работать в старых версиях IE:

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

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

background : #999 ; /* for non-css3 browsers */

filter : prog >:DXImageTransform .Microsoft .gradient ( startColorstr = ‘#cccccc’ , endColorstr = ‘#000000’ ) ; /* для IE6-9 */
background : -webkit-linear-gradient ( top , bottom , #ccc , #000 ) ; /* для webkit-браузеров */
background : -moz-linear-gradient ( top , #ccc , #000 ) ; /* для firefox 3.6+ */
background : -o-linear-gradient ( top , #ccc , #000 ) ; /* для Opera 11.10+ */
background : -ms-linear-gradient ( top , #ccc , #000 ) ; /* для IE10+ */

Давайте рассмотрим подробнее синтаксис. Первое значение (point) является необязательным. Если значение не указано, то по умолчанию будет градиент будет идти от верха до низа. Вы можете использовать различные ключевые слова здесь. Это может быть одно ключевое слово или сочетание двух. Вы также можете использовать значения в градусах. Цель этого параметра заключается в определении, в каком направлении градиент будет распространяться. Кроме того, необходимо определить как минимум два цвета. Первый цвет будет в начале градиента, а последний цвет, соответственно, в конце. Здесь перечисленны возможные значения point:

Использование стоп-цвета

Цвета могут иметь необязательные stop значения. Если они не определены, то цвета переходят плавно от первого до последнего. Но вы можете использовать несколько цветов при создании градиента, и при этом вы можете изменять ширину каждого цвета устанавливая stop значения. Устанавливаемое значение может измеряться в любых допустимых CSS единицах (px, pt, em, % и т.д.). Эти значения помещается после цвета. Также вы можете использовать любые допустимые CSS-цвета, такие как ключевые слова (red, yellow, blue), или hex, hsl, rgb или rgba значения.

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

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

Синтаксис похож на линейный градиент, то тут еще добавилась форма и размер. Форма бывает двух видов — ellipse и circle, по умолчанию значение: ellipse. Значение размера может принимать одно из шести значений.

  • closest-side — Ближайшая сторона. Градиент распространяется от центра по направлению к ближайшей стороне элемента (для circle), или к обоим, горизонтальной и вертикальной сторонам (для ellipse).
  • closest-corner — Ближайший угол. Размер градиента таков, что он распространяется от центра к ближайшему углу элемента.
  • farthest-side — Самая дальняя сторона. Градиент распространяется от центра по направлению к наиболее удаленной стороне элемента (для circle), или к обоим, горизонтальной и вертикальной, сторонам (для ellipse).
  • farthest-corner — Самый дальний угол. Размер градиента таков, что он распространяется от центра к самому дальнему углу элемента.
  • contain — тоже что и closest-side.
  • cover — тоже что и farthest-corner.

Онлайн-примеры

Дополнительная информация.

CSS-градиент для выпадающего меню:

Ниже представлено, как пример, выпадающее меню, которое использует только CSS3: CSS-градиент, text-shadow, radius-border и box-shadow (никакого Javascript или изображений).

Ограничения Internet Explorer:

Фильтр градиента для Internet Explorer не поддерживает сolor-stop, gradient angle и radial gradient. Это означает, что Вы можете только определить горизонтальный или вертикальный линейный градиент с 2 цветами: StartColorStr и EndColorStr.

Полезные ссылки по теме:

Заключение.

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

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

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

В 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

С помощью всех этих новых функций CSS3 , мы теперь можем создавать сайты с минимумом изображений. В прошлом использование изображений было неизбежно, если нам нужно было вывести градиентный цвет. Сегодня это можно сделать намного компактнее с помощью CSS3 Gradient Background .

Но CSS3 Gradient может использоваться не только для фона. Знаете ли вы, что вы можете также использовать его для рамки? Прочитайте эту статью, чтобы узнать, как это делается.

Первый способ

Первый способ — это применение CSS3 Gradient внутри псевдо-элементов. Что ж, давайте посмотрим, как это работает.

Градиент рамки сверху вниз

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

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

Илон Маск рекомендует:  Пользовательские скроллбары в WebKit

Разместите прямоугольники по левому и правому краям блока и задействуйте linear-gradient через background-image . Ниже вы можете видеть, как работает этот прием:

Градиент рамки слева направо

Теперь аналогичным образом давайте создадим градиент, который имеет переход слева направо. Только на этот раз мы добавим границу блока по левому и правому краю, а не сверху и снизу. Точно так же мы используем псевдо-элементы — :before и :after — чтобы задать 2 прямоугольника. Но в отличие от предыдущего примера, мы разместим их сверху и снизу блока.

Диагональный градиент рамки

Создание диагонального градиента с помощью этого приема технически немного сложнее.

Однако мы все еще задействуем два псевдо-элемента, :before и :after , и используем linear-gradient . На этот раз, однако, мы будем использовать в псевдо-элементе 2 linear-gradient . И каждый градиент будет располагаться напротив другого. Посмотрите следующий пример.

Второй способ

Второй способ заключается в использовании свойства CSS3 border-image . Свойство CSS3 border-image позволяет нам заполнить рамку изображением, а также градиентом CSS3 . Большинство браузеров поддерживают border-image : Chrome, Internet Explorer 11, Firefox, Safari и Opera нормально выводят border-image .

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

Ниже приведена спецификация свойства border-image :

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

border-image не выведет ничего, если мы не зададим ширину рамки. Так что, как вы можете видеть выше, мы добавляем ширину рамки 20 пикселей с прозрачным цветом. Затем мы устанавливаем значение для border-image и linear-gradient вместе с вендорными префиксами для ранних версий Webkit и Firefox .

Добавление border-image-slice устанавливает внутреннее смещение содержимого image-border . Это свойство необходимо для отображения градиента полностью по всему блоку. Смотрите приведенный ниже пример:

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

Линейный градиент 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

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

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 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 используя градиент — оформление границы на CSS

Благодаря технологии CSS мы можем создавать сайты и использовать при этом меньше изображений. Я думаю вы прекрасно знаете, что изображения действительно замедляют загрузку сайта. Раньше, чтобы создать границы css в виде перехода одного цвета к другому необходимо было использовать именно изображения. Но в CSS3 есть такое новое свойство как linear-gradient , с помощью которого можно осуществить нашу задумку.

Я подобрал некоторые статьи, в которых вместо изображений можно и нужно использовать свойства CSS3:

Границы CSS — СПОСОБ 1

1) Градиент границы сверху вниз

В HTML это просто блок:

А CSS с первого взгляда кажется громоздким:

2) Градиент границы слева направо

Вот как это выглядит на реальной странице:

Как в и прошлый раз HTML очень простой:

А CSS сильно не изменился:

Границы CSS — СПОСОБ 2

Второй способ заключается в использовании CSS3 свойства border-image , которое нам значительно сократит и упростит код. Скоро вы сами в этом убедитесь.

Браузеры, которые поддерживают данное свойство: Chrome, Internet Explorer 11, Firefox, Safari, и Opera.

Также хочу сразу сказать что данное свойство работает только с «квадратными» блоками. То есть вы не сможете сделать закругленные углы границы с помощью свойства border-radius .

1) Градиент сверху вниз

Как видите, результат такой же (если ваш браузер поддерживает данное свойство):

В HTML также различий нет:

А вот CSS даже на глаз стал намного меньше:

2) Градиент слева направо

Также сделаем градиент границы CSS, где цвет меняется слева направо:

CSS также значительно меньше, чем в прошлом способе:

3) Диагональный градиент

Еще один интересный способ — диагональное изменение цвета границы:

CSS код также значительно меньше, чем в прошлом способе:

Вывод

Понравился ли вам этот способ оформления границы? Надеюсь что да! Потому что он экономит «килобайты» при загрузке. Я показал вам не только еще один способ как красиво оформить ваш сайт, но и как сделать его загрузку хоть чуточку быстрее �� !

Взгляд на CSS3 градиент (линейный и радиальный градиенты)

Здравствуйте, уважаемые читатели XoZbloga! Градиент является прекрасным инструментом манипуляции с цветом в CSS3. Вместо того, чтобы использовать изображение, для создания эффекта градиента на веб-странице, куда выгодней будет воспользоваться CSS3 градиентом и тем самым «облегчить» сайт. Так как пользователю не нужно будет тратить времени и трафика на загрузку фонового изображения. Существует два основных вида градиента: радиальный и линейный. Сегодняшний пост будет именно о них.

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

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

В общем случае синтаксис градиента (линейного) выглядит так:

Итак, давайте обо всем по порядку.

Прежде всего, линейный градиент объявлен функцией linear-gradient() . Функция имеет три основных значения. Первое значение определяет исходное положение. В примере указано top т.е. исходное положение сверху. Можно также использовать bottom , left и right ;

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

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

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

Последним значением является второй цвет и его стоп позиция. По умолчанию принимает значение 100% . Эти крайние значения и они подразумевают, что первый цвет сразу начинает переходить во второй. Однако, если мы установим для первого цвета 50% , то он только с середины доступной высоты начнет переходить во второй. Вот так выглядит код:

Теперь давайте изменим значение стоп позиций, и на этот раз мы установим 50% для первого и второго цвета:

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

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

Радиальный градиент также как и линейный объявляется функцией, только уже radial-gradient() . Также есть и основные значения: это форма радиального градиента ( circle — круг или ellipse — эллипс), начальный и конечный цвет. Синтаксис следующий:

Если не указывать форму, то по-умолчанию будет установлен эллипс.

Также по-умолчанию установлена центральная позиция градиента, ее можно изменить. Позицию можно задать командами ( top , bottom , left , right и center ), а также их комбинациями, либо указать в процентах или пикселях.

  • По центру вверху — top — 50% 0%;
  • В левом верхнем углу — left top — 0% 0%;
  • В правом верхнем углу — right top — 100% 0%;
  • По центру — center — 50% 50%;
  • Слева по центру — left center — 0% 50%;
  • Справа по центру — right center — 100% 50%;
  • По центру снизу — bottom — 50% 100%;
  • В левом нижнем углу — left bottom — 0% 100%;
  • В правом нижнем углу — right bottom — 100% 100%.

Вот пример с процентами:

Первое значение по оси Х второе по У.

Также радиальному градиенту можно задавать размер. Размер указывается через пробел после формы градиента. По-умолчанию применяется farthest-corner (к дальнему углу). Расчет ведется от центральной точки градиента до:

Значение Описание
closest-side Размер градиента рассчитывается из расстояния до любой ближней стороны блока (для circle ) или до ближних сторон по X и по У (для ellipse ). Примеры чуть ниже.
farthest-side Размер также рассчитывается из расстояния, но уже до дальних сторон.
closest-corner Теперь в качестве ориентира используются ближние углы.
farthest-corner Рассчитывается из расстояния до дальних углов.

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

Размер рассчитывается из расстояния до ближних сторон, очевидно что верхняя ближе по оси Y и левая по оси X.

А теперь до дальних сторон:

Результат, как говорится на лицо. Размер исчисляется из расстояния до дальних сторон.

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

Альфа канал, тот что последний и равен 0.2 указывает на то, что от 100% цвета используется только 20%.

В обоих видах CSS3 градиента можно использовать не два, а несколько цветов.

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

Для обоих видов можно использовать повторение цветов. То есть, из данных значений образуется цикл. Функции повторяющегося градиента, repeating-linear-gradient() — для линейного и repeating-radial-gradient() — для радиального.

Кроссбраузерность

К сожалению, на момент написания этой статьи, современные браузеры еще не поддерживают стандартный синтаксис. Они по прежнему нуждаются в префиксах, каждый в своих ( -webkit- , -moz- , -ms- и -o- ). Поэтому синтаксически правильным является вот такое описание градиента:

Чтобы упростить задачу с префиксами, можно использовать бесплатную библиотеку Prefix-Free.

Для того чтобы градиент заработал на «9 осле» (Internet Explorer 9), пишем так:

Но даже здесь есть ограничения, нельзя добавить более 3 цветов и для использования прозрачности нужно немного изменить HEX код цвета:

Где 33 сразу после решетки это процент насыщенности цвета.

Надеюсь, что статья оказалась для Вас полезной, а рассмотренная тема полностью раскрытой.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или добавляйте в круги на Google+. Не забывайте оставлять комментарии. Спасибо!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

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