Наложение градиента на изображение в HTML при помощи CSS
Многие привыкли накладывать градиент на изображение при помощи графического редактора. Но что делать, если градиент нужно изменить? Все верно. Нужно открыть исходник макета в графическом редакторе и изменить градиент. Все проблемы решает использование каскадных таблиц стилей для его изменения.
Я не буду вдаваться в большие подробности и сразу представлю код наложения градиента на изображение при помощи CSS.
<div></div>
Результат код на изображении ниже.
Обратите внимание, что изображение накладывается в видео фона (background-image). Выше представлен сокращенный код. Я сразу прописал необходимые спецификации для свойства background.
Итак, у нас имеется контейнер с шириной 640 точек и высотой 480 точек. Мы подгружаем в него изображение, помещаем его в центре и подгоняем под размеры контейнера. Так мы не сильно зависим от размера изображения и можем сделать контейнер адаптивным (если укажем ширину 100%).
linear-gradient(180deg, rgb(20 47 88 / 0%) 0%, #143458 100%
Как раз эта часть CSS отвечает за наложение градиента поверх помещаемого изображения. Единственной сложностью, с которой вы можете столкнуться – это изменение самого градиента в CSS. Но спешу обрадовать, вам не нужно искать сайты с генерацией этих градиентов. Все можно изменить при помощи обычного браузера.
Рассмотрим изменение градиента CSS при помощи Google Chrome.
Итак, наводим на наше изображение с градиентом и нажимаем правой кнопкой мыши.
В контекстном меню выбираем «Просмотреть код».
В появившейся панели справа мы видим CSS код с параметрами вставки изображения.
Наш градиент построен таким образом, чтобы идти он прозрачного к полному затемнению синим цветом.
Для изменения основного цвета нужно нажать кнопкой мыши на темно-синий квадрат, как указано на рисунке.
После появится панель цвета.
Здесь, передвигая ползунки, вы можете поменять цвет, например, на темно-зеленый.
Здесь также можно перемещать нижний ползунок, он отвечает за прозрачность и установлен по умолчанию на 100%.
Для того, чтобы поменять верхнюю часть градиента CSS на изображении – вам необходимо проделать те же манипуляции, но с первым квадратиком.
В этом случае цвет установлен на полную прозрачность.
Также здесь вы можете изменить угол градиента. Со 180 градусов (вертикального) можно установить любой другой угол.
Например, изменение этого параметра на 90 приведет к тому, что мы получим не вертикальный, а горизонтальный градиент CSS.
Результат:
После того как вы перекрасите и повернете заливку так как вам необходимо, вы должны аккуратно скопировать CSS код из панели редактирования и вставить в свой HTML файл. И все, все изменения будут применены.
Важно! Во время редактирования CSS не обновляете старицу HTML, иначе все ваши изменения будут сброшены и придётся все проделывать заново.
Поделиться в соц. сетях:
29 Примеры градиента CSS
Коллекция бесплатных примеров кода CSS градиента от Codepen и других ресурсов.
- Кнопки градиента CSS
О коде
Радужная градиентная рамка CSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
панели conic-gradient()
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Градиентный счетчик
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Несколько фоновых клипов
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Упорядоченный список градиентов
Простой упорядоченный список с использованием SCSS и HTML5.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отвечает: да
Зависимости: —
О коде
Список счетчиков градиентов CSS
Пример счетчика CSS с фиксированным градиентом фона .
Совместимые браузеры: Chrome, Edge, Opera, Safari
Ответ: да
Зависимости: —
О коде
Коллекция градиентов
Небольшая коллекция градиентов CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Градиент прокрутки
Я решил адаптировать технику индикатора прокрутки только в CSS, чтобы создать фоновый градиент, меняющийся в зависимости от положения прокрутки. Верхний правый угол градиента меняется, а нижний правый остается прежним.Это работает путем наложения 2 градиентов. Первый — это градиент сверху вниз с высотой содержимого. Он содержит цвета, которые вы хотите перебирать. Другой — это градиент слева вверху и справа внизу от прозрачного к сплошному цвету. Этот градиент привязан к размерам области просмотра и располагается за текстом, подобно индикатору прокрутки.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Градиент
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Эффект прожектора с радиальным градиентом
В этом примере показано, как можно использовать радиальные градиенты CSS для создания эффекта фокусируемого прожектора.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Размытые градиенты CSS
Смешивание шума с градиентами CSS помогает удалить полосатость, но приводит к общей зернистой текстуре.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Красивое подчеркивание
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Нумерованные списки только для CSS с фигурами в форме капли
Стилизованный нумерованный список с использованием счетчиков CSS и псевдоэлементов для фона в форме капли.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Анимированная граница градиента CSS
Ответ: да
Зависимости: —
О коде
Градиентные фоны — линейный, радиальный, двухцветный
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: font-awesome. css, jquery.js
О коде
Анимированное фоновое свечение
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отвечает: да
Зависимости: —
О коде
Эффект градиента CSS при наведении
Быстрое доказательство концепции эффекта наведения с использованием режима смешивания-наложения и градиентов CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Анимированные градиенты паралакса
Игра с градиентами, анимацией и положением прокрутки для создания динамического эффекта прокрутки.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: jquery.js
О коде
Вращение оттенка CSS с градиентом
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Кнопка с градиентной тенью
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Радар
Радарный дисплей, состоящий только из одного элемента. Чтобы не использовать дочерний элемент span или div , я нарисовал все, используя несколько наборов фонов. Однако для анимации сканирования нам нужно было использовать :до для анимируемой части.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Плитка с градиентом Название
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Текстовый клип SVG с градиентом и GIF
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Градиентный лес на чистом CSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
С код
CSS Закат Восход солнца
Перемещайте солнце с помощью мыши.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Градиенты
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Градиенты неба
24 градиента неба CSS3 для будущего эксперимента. Нажмите, чтобы получить предварительный просмотр во всю ширину.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Матовый металл
Текстура создана с использованием 3-х повторяющихся градиентов разной длины.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Галерея шаблонов CSS3
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
Gradient.
art — Проектирование и проверка сложных градиентов CSSНедавно я запустил gra.dient.art — расширенный онлайн-редактор градиентов CSS, который поддерживает наложение фона, инструменты дизайна, бесплатное облачное хранилище и растущий список примеров. И самое приятное — это совершенно бесплатно!
С помощью этого редактора вы можете создавать свои собственные уникальные дизайны, от простых шаблонов и значков до более сложных иллюстраций и рисунков, используя чистый CSS. Вы также можете изучить различные проекты на сайте, если хотите использовать некоторые существующие проекты или просто узнать, как это делается.
Редактор
Редактор был разработан, чтобы обеспечить работу, подобную фотошопу, с панелью инструментов слева и панелями справа.
Панель инструментов
На левой панели инструментов вы можете найти инструменты для перемещения, масштабирования и вращения градиентного фона:
Вы можете перемещать градиент:
Масштабировать его:
И вращать его (только для конических/линейных градиентов) ):
Панели
Справа от редактора вы можете найти несколько панелей. Каждая панель посвящена определенному аспекту проекта.
Панель градиентов
На панели «Градиенты» вы можете увидеть все свои градиенты и добавить/удалить/переименовать/переупорядочить их.
Панель свойств
На панели свойств можно изменить выбранный градиент. Поддерживаются все свойства CSS для всех трех типов градиента.
Панель кода
На панели «Код» отображается сгенерированный код CSS для вашего проекта.
Панель документов
Панель документа используется для настройки параметров всего проекта, таких как размер холста, заголовок, описание и ключевые слова. Хорошее название и описание помогут другим пользователям найти ваш проект при поиске примеров на сайте. Вы можете использовать специальные ключевые слова, если хотите, чтобы ваш проект был представлен на одной из страниц проекта. Например, используйте шаблон ключевое слово, если вы хотите, чтобы ваш проект отображался в разделе gra. dient.art/explore/patterns
Изменение размеров панелей
Размеры панелей можно изменять, поэтому вы можете изменить макет по своему усмотрению. В качестве примечания, заставить панели складываться друг на друга, когда они изменяются по размеру за пределы своих братьев и сестер, было немного сложно, но мне нравится результат 😎. Вы можете увидеть, как это выглядит ниже:
Примеры
Ниже приведены некоторые проекты, которые вы можете найти на gra.dient.art. Щелкните любое изображение, чтобы открыть его в редакторе и просмотреть. Здесь вы можете найти еще много проектов.
Дорожная карта
В ближайшее время и в зависимости от популярности и спроса я планирую добавить поддержку следующих функций:
- Переменные — определение и использование переменных для цветов и единиц измерения с использованием пользовательских свойств CSS.
