Как сделать градиент для сайта
Несколько слов о градиентах
Всем привет! Сегодня хочу поговорить немного о градиентах, популярных сайтах, предоставляющих пользователям возможность выбирать и/или генерировать их, а так же, о нескольких градиентах, которые я люблю и применяю в различных проектах. Возможно, кому-то из вас они тоже понравятся.
Сегодня мало кто не знает, что такое градиенты и как их применять в разработке. Если верить статьям, то в 2018 году, применение ярких и насыщенных градиентов — это некий тренд.
Что такое градиент?
Давайте, для галочки, вспомним, что такое градиент.
Градие́нт (от лат. gradiens, род. падеж gradientis — шагающий, растущий) — вектор, своим направлением указывающий направление наибольшего возрастания некоторой величины <\displaystyle \varphi >\varphi, значение которой меняется от одной точки пространства к другой (скалярного поля), а по величине (модулю) равный скорости роста этой величины в этом направлении
Градиенты применяются в различных сферах, но нас интересует сфера веб-разработки, где градиенты часто применяются в качестве основного фона сайтов и различных контейнеров, линий, цитат, блоков и даже текста.
Форма записи градиентов в css
Давайте коротко рассмотрим, из чего же состоит классический градиент.
Градиент может быть записан двумя способами:
background: linear-gradient(36deg, #0dd3ff, #0389ff, #1c79c0);
background-image: linear-gradient(36deg, #0dd3ff, #0389ff, #1c79c0);
Какую форму записи использовать — решать вам.
В коде, приведенном выше, мы указали три значения свойств background:
Все значения разделяются запятыми, а количество цветов может быть абсолютно любым, от двух до бесконечности. Но, разумеется, в пределах разумного.
Написание цвета градиентов
Цвет градиента может быть записан любым доступным обозначением:
Вы также можете указывать цвета в процентном соотношении, добавив после цвета %. Например, rgb(0, 0, 0) 0%, rgb(255,255,255) 100%.
Вот собственно и все базовые знания, необходимые для применения градиентов в веб-разработке. Но наверняка не все знают, что градиенты можно использовать и в других случая. Ниже о них.
Градиенты с изображениями
Для записи комбинированного градиента, с картинкой в качестве фона, можно использовать и другие свойства background. Давайте рассмотрим на двух примерах:
В первом примере мы создали градиентный фон (пример 1), а во втором добавили изображение и наложили на него наш градиент (пример 2).
Градиент для текста
Иногда хочется сделать текст ссылки или заголовка более ярким, заметным и/или заменить обычный текст на какую-нибудь картинку. CSS позволяет нам это сделать, используя следующие свойства:
Аналогичные действия можно совершать, заменив градиент на ссылку с изображением.
Главное помните, что некоторые свойства поддерживаются не всеми версиями браузеров. Проверить совместимость можно на сайте Can I use
Объединение градиентов CSS в режиме Background Blend Mode
Такие функции, как linear-gradient(), radial-gradient(), и repeating-linear-gradient(), repeating-radial-gradient() и другие разновидности имеют широкую поддержку и более стандартизированный синтаксис во всех современных браузерах. Однако, свойство background также может включать в себя более одного градиента, причем каждая функция разделяется запятой. Lea Verou продемонстрировала впечатляющие модели — паттерны, которые могут быть созданы с помощью этой техники: от шахматных досок, до кирпичей, до звезд. Но теперь, когда у нас есть свойство background-blend-mode, мы можем создать новые градиенты и шаблоны. Примеры ниже.
Спектральный фон
Наложим три градиента, чтобы создать фон с почти полным спектром цветов, который можно отобразить на мониторе.
.spectrum-background <
background:
linear-gradient(red, transparent),
linear-gradient(to top left, lime, transparent),
linear-gradient(to top right, blue, transparent);
background-blend-mode: screen;
>
И вот у нас уже получился разноцветный фон. Создание подобного эффекта ранее было возможно только с изображением, вес которого составлял бы десятки килобайт. Но мы только что воспроизвели этот эффект через CSS менее чем на 200 байт, не говоря уже о сохранении HTTP-запроса.
Создаем плед на css
Мы также можем создать интересные шаблоны с градиентами при помощи background-blend-mode.
.plaid-background <
background:
repeating-linear-gradient(
-45deg,
transparent 0,
transparent 25%,
dodgerblue 0,
dodgerblue 50%
),
repeating-linear-gradient(
45deg,
transparent 0,
transparent 25%,
tomato 0,
tomato 50%
),
repeating-linear-gradient(
transparent 0,
transparent 25%,
gold 0,
gold 50%
), white;
background-blend-mode: multiply;
background-size: 100px 100px;
>
В итоге вот что у нас получилось, 
Фон сайта с кружочками
Эффект ночного видения
Давайте теперь попробуем воссоздать еще один эффект с режимами смешивания CSS и сделать фотографию, как будто мы просматриваем ее через объектив очков ночного видения.
Возьмем обычное изображение 
и наложим на него радиальный градиент и градиент, который мы использовали при создании пледа — repeating-linear-gradient
.night-vision-effect <
background:
url(https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg),
radial-gradient(
rgba(0,255,0,.8),
black
),
repeating-linear-gradient(
transparent 0,
rgba(0,0,0,.2) 3px,
transparent 6px
);
background-blend-mode: overlay;
background-size: cover;
>
И вот результат.
Сайты-генераторы градиентов
Ниже я приведу подборку сайтов, позволяющих генерировать те самые градиенты, делать из них canvas, png и svg форматы и копировать код для установки в ваши проекты.
И напоследок, хочу поделиться с вами своей подборкой градиентов, которые мне очень нравятся и которые я применяю в различных проектах и при разработке сайтов.
Всем удачи и приятного творчества. Пишите в комментариях свои любимые градиенты.
Больше цвета! Гид по градиентам для начинающих
Плоский дизайн, или Flat дизайн, теперь выглядит скучно. Вместо минимализма хочется добавить немного красивых переходов, сделать дизайн объемнее. Вновь появляется градиент в оформлении известных брендов: Google, Instagram, Apple.
Многие думают, что работать с градиентом можно только в фотошопе. Но это не так! В статье вы узнаете, как в редакторе Canva в режиме онлайн можно сделать красивый переход оттенков и как наложить градиент на фото за несколько кликов.
Что такое градиент
Градиент – это плавный переход от одного цвета к другому. Сочетание цветов позволяет создать новый оттенок и сделать красивый переход, добавляя глубины объекту или фону. Океан возможностей для творчества!
Не бойтесь добавлять градиент при оформлении постов для Инстаграм. В Canva есть готовые шаблоны, на которых вам остается только изменить текст и картинку.
Виды градиентов
Для начала нужно разобраться с видами градиентов. Все начинается с отправной точки, от которой и происходит плавный переход цвета. В зависимости от того, где находится точка, различаются и виды перехода.
Смешивать цвета можно несколькими способами. Наиболее распространенные – линейные или радиальные градиенты. Мы подготовили для вас плакат с самыми популярными видами градиента, дизайн с которыми можно сделать не только в фотошопе, но и в редакторе Canva.
Учтите, что линейный градиент рекомендуется использовать только для квадратных или многоугольных областей, а радиальный – для круглых. Кстати, логотип Instagram создан с использованием радиального градиента.
Как сделать красивый дизайн с градиентом
В 2020 году градиент можно найти повсюду: в брендинге, иллюстрациях, типографике, оформлении упаковки и т. д. Начните обращать внимание и заметите эту тенденцию! Итак, делимся идеями, как легко сделать крутой дизайн с градиентом в редакторе Canva.
1. Правильно выбирайте цвета для градиента
Если коротко, то лучше всего выбирать цвета, которые ближе друг к другу на цветовом круге. Например, градиент из фиолетового и зеленого будет выглядеть «грязным». Посмотрите на пример!
Источник: UX Planet
Еще один важный момент – выбирайте цвета, которые несут в себе какую-то конкретную эмоцию. Если вы хотите, чтобы ваш дизайн оказывал успокаивающее действие на аудиторию, используйте градиент с переходом от мягкого зеленого к синему. Про значения цветов читайте в Canva – перейдите по ссылке и в поисковую строку введите название цвета, чтобы узнать =о нем больше.
Цветовая психология – мощная вещь, поэтому не забывайте об этом, выбирая цвета для дизайна. Например, дизайнеры Trello используют спокойные оттенки для градиентов, чтобы пользователи не уставали от работы с платформой.
Если ваша цель – что-то продать или привлечь внимание, выбирайте смелые сочетания. Можете использовать готовые шаблоны Canva для социальных сетей.
Всем привет. На этом уроке мы научимся создавать и добавлять в стили оформления сайт (CSS) градиентную заливку.
Как добавить градиент в бекграунд оформления сайта (CSS)
Итак. Что такое CSS объяснять не надо, если непонятно, добро пожаловать в раздел: Помощь начинающим web-мастерам. Для остальных продолжаем здесь.
Иногда необходимо, чтобы фон, на котором что-либо располагается, плавно перетекал из одного цвета в другой. Это называется добавить градиент. Это можно сделать, добавив в стиль оформления сайта необходимый код. Я не стану описывать, как его придумывать. В Интернете так всё упростили, что достаточно воспользоваться онлайн сервисом генератором добавления градиента на наш сайт.
Ну и теперь самое главное. Как это всё внедрить на наш сайт. Нашим подопытным будет сайт нашего клиента веломагазина в Тамбове Velomax-Tambov.ru. Задача состояит в том, что в подложку логотипа нам нужен добавить градиент, который будет гармонировать с цветом логотипа.
Итак. Заходим на один из вышепредставленных ресурсов и определяем код градиента. В нашем случае он будет выглядить так:
Далее если вы работаете в браузере Chrome, то наводите мышку на объект и кликаете правой кнопкой мыши. В меню выбираете «Просмотр кода элемента». Откроется консоль web-разработчика. В левом блоке консоли находите строчку отвечающую на Background логотипа.
Если вы незнаете как работать с FTP-клиентом для работы с CSS стилями, то можете добавить код в HTML сайта или читайте другие мои статьи, ну или спрашивайте здесь.
Ну, а для тех кто хочет научиться сам генерировать и добавлять градиенты на свой сайты могу посоветовать поизучать эту статью: Урок по добавлению градиентов и прозрачности в оформление Web-страниц. Если вдруг научитесь, добавляйте в комментарии к этой статье то, что сумели начудить. То есть хвалитесь! 🙂
Да. Чуть не забыл главное. Эти градиенты не всегда работают. А именно не все браузеры правильно понимают, что от них хотят при показе того или иного фона, поэтому надо всегда тестировать их на различных браузерах и желательно делать свой стиль для каждого из них. Как? Читайте в следующей статье, а пока можете просто добавлять префикс браузера к коду.
Спасибо за внимание. Удачи вам в ваших Web-разработках!
Красивые градиенты CSS
Поддержка браузерами
CSS-градиенты — это функция, которая была введена относительно недавно, а это означает, что старые версии браузеров могут не распознавать и не поддерживать их.
Линейные градиенты
linear gradient CSS плавно переводит один цвет в другой по прямой линии. Синтаксис следующий:
Замените цвет 1 и цвет 2 обозначениями цветов по своему выбору: распознаваемое имя цвета или шестнадцатеричный код. А затем разделите два цвета запятой.
Этот код создает вертикальный градиент, который начинается с цвета 1 вверху и переходит в цвет 2 внизу. Это выглядит примерно так:
Различные варианты
Направления градиента
Есть несколько способов, с помощью которых это можно сделать. Три приведенных выше градиента были созданы с помощью следующего кода:
Диагональные градиенты можно создавать, указывая, в каком углу начинается или заканчивается градиент, например, top left или bottom right — две стороны разделяются пробелом. Это тот случай, когда для браузеров нужно предоставлять немного различающиеся инструкции:
Несколько переходов цветов
Также можно указать, где вы хотите разместить переходы цветов, добавив после цвета значение в процентах или пикселях через пробел. Например, я создал градиент, в котором красный цвет начинает переходить в желтый на 30% ширины, а затем желтый переходит в зеленый на 70% ширины:
Так как я не указал, где должен закончиться последний цвет, он по умолчанию заканчивается на 100% или в самом конце градиента.
Также можно указать точки перехода с использованием пикселей вместо процентов ( например: #c94A4a 100px ). Но не используйте и пиксели, и проценты в одной строке кода.
Радиальные градиенты
Если задать радиальный CSS gradient внутри фигуры, которая не является кругом, градиент будет корректироваться так, чтобы внешний цвет заканчивался по краям фигуры равномерно:
Как использовать CSS градиенты в вебе
Дата публикации: 2017-12-04
От автора: в этом уроке вы узнаете, как использовать градиент CSS в вебе. Я дам несколько примеров, уроков (например, как создать градиент для рамки) и подкину парочку полезных ссылок, которые сильно упростят создание градиентов.
Основы градиентов
Раньше градиенты нельзя было использовать без изображений, но CSS развивается, и теперь с помощью стилей очень легко создавать надежные градиенты.
В простейшей форме градиенты представляют собой фоновые изображения. Устанавливается фоновое изображение (с помощью сокращения background) в значение linear-gradient или a radial-gradient. Внутрь значения передается начальный и конечный цвет:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
По умолчанию линейный градиент направлен сверху вниз, и мы получаем примерно вот это:
Мы можем изменить направление, если добавим новый параметр перед цветами:
Если изменить параметр на to top right, получится диагональный градиент. Диагональ можно создать и по-другому, если установить 45deg (или любой другой угол).
Немного усложним, необязательно использовать 2 цвета. Можно использовать названия цветов:
В этом случае все 4 цвета займут равную площадь, создавая плавный и сбалансированный градиент.
Если необходимо, чтобы один цвет занимал больше места, чем другие, то после цвета можно указать процентное значение:
Радиальные градиенты
Мы можем воспользоваться полученными знаниями и изменить градиент на radial. Нужно лишь заменить linear-gradient на radial-gradient.
Радиальный градиент растягивается до родительского блока, поэтому этот прямоугольник заканчивается эллипсоидным градиентом. Градиент можно ограничить, чтобы его форма не зависели от пропорций родителя. Для этого необходимо добавить ключевое слово circle:
Можно указать источник радиального градиента. Например, чтобы он начинался в верхнем левом углу родителя.
Эффект незаметный, но, возможно, именно это вам и нужно вместо линейного градиента.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Реальное применение
Где же можно использовать градиенты таким интересным образом?
1. Перекрывающий баннерный слой
Пример перекрытия, когда градиент слегка прозрачный (с помощью rgba значений) и расположен поверх фото.
Свойство background может принимать несколько значений, формирующих стек, где первое значение самое верхнее, а последнее расположено в самом низу. Если сначала задать градиент, то он будет расположен поверх всего, что идет следом. Посмотрите на пример ниже:
2. Градиент на тексте
Сначала берем текст (h1) и применяем градиент к его background. Затем свойство background-clip со значением text удаляет фон со всего блока кроме области под текстом. Color текста загораживает фон, поэтому делаем цвет transparent, чтобы был виден градиент:
3. Градиентные рамки
Градиентные рамки вы могли видеть на Envato Elements – отличный способ визуально приправить ваш UI. Он очень тонкий, но вы только посмотрите на линейный градиент от синего до фиолетового на рамках этих кнопок:
Добиться такого эффекта можно разными способами. Первый требует сначала задать элементу прозрачную рамку. Далее применяется градиент через свойство border-image. В конце border-image-slice задается в 1, чтобы градиент использовал всю обводку рамки.
У подхода несколько проблем. Во-первых, border-image не одинаково поддерживается во всех браузерах. В основном это касается старых версий IE. Во-вторых, этот подход не позволит добавить border-radius, как на UI Envato Elements. Давайте рассмотрим другой способ.
Сначала div задается position: relative. Далее к блоку добавляется псевдоэлемент с отрицательным абсолютным позиционированием для ширины рамки (5px у нас):
Далее (фух, в этот раз много шагов) мы добавляем border-radius к псевдоэлементу, равный своему родителю (пусть будет 10px). Далее задаем фон родителя. Если задать цвет фона страницы, то он будет прозрачным.
Наконец, применяем нашего друга background-clip к родителю, но в этот раз со значением padding-box. Так div будет залит до края рамки, но не далее.
Последний способ не совсем рамка, но эффект похож.
Есть и третий способ, на box-shadow. Советую посмотреть Border-gradient mixin от John Grishin на сайте CodePen.
Заключение
Вот и все! Этот пример CSS градиентов показал вам, с чего начать, а также, как использовать градиенты в вебе. Если видели другие креативные способы применения в сети, оставляйте их в комментариях.
Автор: Adi Purdila
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3