Многоцветный размытый фон с помощью градиентов CSS3
Продолжаю экспериментировать с градиентами CSS3. С помощью градиентов можно добиться по-настоящему фантастичных эффектов в веб-дизайне, в том числе и создавать причудливые фоны, которые смотрятся более симпатично, чем однотонные.
Поскольку любой градиент по сути считается фоновым изображением и отдельного свойства для него нет, добавляется в css через background-image или универсальное свойство background .
Уверен, что создав однажды самостоятельно простейший градиент с переходом между двумя цветами, вы уже не остановитесь и будете искать всё новые, более сложные комбинации эффекта.
Например, с помощью повторяющихся линейных градиентов можно «нарисовать» довольно-таки симпатичный, многоцветный фон с эффектом размытия:
Всего несколько строк несложного кода и вы получите результат представленный в примере. Многие скажут, зачем так заморачиваться, когда полным-полно всевозможных онлайн-генераторов и библиотек градиентов. Да, конечно, ресурсов представлено достаточно, но ведь важен сам процесс, точнее его понимание.
Короче, далее всё по накатанной, в данном примере использовал свойства background-color (базовый цвет фона), background (собственно для добавления градиента), background-repeat (определяет, как будет повторяться фоновое изображение) и background-blend-mode (режим наложения).
Весь фарш представлен ниже, а поковыряться в коде и поиграться со значениями, можете непосредственно песочнице Jsfiddle
С Уважением, Андрей .
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Анимируем linear-gradient (background-image).
При верстке, периодически необходимо создать фон, который является градиентной заливкой (картинкой или чем-то другим, нужное подчеркнуть).
Такую задачу вполне легко сделать, используя background-image (linear-gradient в случае с градиентной заливкой).
Разберем анимирование background-image в случае работы с кнопками:
Кнопка с background-image: linear-gradient
При взаимодействии с кнопкой очень желательно получать “отклик”, например, при наведении (hover) на нее.
Один из способов организовать такой отклик — изменить background, как это сделано в разбираемом примере.
Но у нас есть один недостаток — кнопка меняет свою заливку мгновенно, переход получается слишком резким.
Установить просто transition: background не получится, так как background-image является не анимируемым свойством (www.w3schools.com/cssref/pr_background-image.asp)
Что можно сделать в таком случае, чтобы решить задачу?
Самый простой и бронебойный способ — создаем какой-нибудь элемент рядом (или внутри) с нужным нам, скрываем его, а когда наводим курсор на кнопку — отображаем с анимированием прозрачности.
С одной стороны, мы можем вкладывать в button какой-нибудь span, но это не особо удобный и масштабируемый подход. Почему подход неудобный? Представьте, что с кнопкой всегда нужно вставлять рядом span, не забывать об этом, да и для других элементов подобный подход будет доставлять неудобства. Поэтому обратимся к псевдоэлементам. Алгоритм действий в таком случае будет следующим:
- Создаем кнопку
- Задаем кнопке position: relative. Это позволит нам растягивать псевдоэлемент по размеру кнопки. Подход практически аналогичный тому, который я описывал в статье “Селекторы на любой вкус” (https://medium.com/@xnim/%D0%BD%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B5-select-%D1%8B-%D0%BD%D0%B0-%D0%BB%D1%8E%D0%B1%D0%BE%D0%B9-%D0%B2%D0%BA%D1%83%D1%81-13c9a2a5bb36)
- Задаем кнопке:
— размеры (top:0; left: 0; width: 100%; height: 100%),
— нужный background-image (для состояния hover)
— z-index: -1 (чтобы контент псевдоэлемента не скрывал наш текст
— opacity: 0 + transition: opacity для анимаций - Добавляем :hover состояние для кнопки, по которому наш псевдоэлемент будет проявляться.
Полученный результат можно посмотреть на СodePen:
На CodePen также можно поэкспериментировать с временем анимации 🙂
Градиент поверх фоновой картинки в CSS
На этом уроке мы не просто познакомимся с градиентами, но и узнаем, как их можно применять на практике. Вариантов применения градиентов в веб-дизайне, несчетное количество, но нас не интересует все и сразу. Будем двигаться постепенно и начнем мы с популярного дизайнерского приёма – это наложения градиента поверх большой фоновой картинки, используя CSS стили.
Сейчас вы наверное задумались, а зачем вообще что-то накладывать на картинку и почему в CSS, если есть Photoshop?
На первую половину вопроса я отвечу, демонстрируя два изображения. На первом нет наложения градиента, а на втором – используется градиент. Что смотрится интереснее по дизайну?
Первый вариант
Второй вариант
Ответ очевиден. В первом варианте, из-за более широкой палитры цветов, тяжелее читается текст, да и зрительное восприятие неправильно расставляет акценты. Мы смотрим на верхушки деревьев, но вряд ли это главный посыл дизайнера.
Во втором варианте градиенты используются и в качестве тонирующего слоя, убираются резкие цветовые переходы, задний фон никак не отвлекает от текста.
Демонстрация.
Photoshop или CSS?
Ответ будет разный, смотря, о ком мы говорим? Дизайнер рисует свой макет в Photoshop, вынося градиенты на отдельный слой. Верстальщик, анализируя макет, должен решить – объединять ли слой картинки с градиентом и сохранить их в одном jpg/png/gif файле или градиенты верстать на CSS?
Здесь нет чёткого правила, но одно мы знаем точно, что если по замыслу дизайнера, предполагается делать анимированный фон, то без CSS/JS уже не обойтись. И конечно не надо забывать, что картинка с градиентом будет больше весить, поэтому если градиент простой, то лучше написать его кодом.
Переходим к написанию кода примера и как всегда начинаем с разметки.
HTML разметка
Тег header будет служить контейнером для фоновой картинки, а тег div с классом header_box – контейнером для двух заголовков.
The Forest
where nature and people
CSS код
В теге header опишем все свойства сразу для двух заголовков, поскольку стилизуем мы их одинаково и сознательно помещаем одну фразу в заголовки разных уровней. Здесь мы решаем вопрос переноса строки и вторая часть фразы меньше в размерах, так как находиться в теге h2. Разбивание одной фразы – это хороший дизайнерский приём, опять же делает фразу более значимой.
header font-family: sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: #fff;
text-transform: uppercase;
letter-spacing: 7px;
>
Кроме стилизации текста, в теге header лежит наш градиент вместе с фоновой картинкой. Свойство cover растягивает картинку на всю ширину и высоту хедера.
Градиент поверх картинки
Для справки: Градиенты бывают линейные и радиальные, линейный тянется по прямой линии, от одного цвета к другому, как правило их используют для заполнения фигур с углами (прямоугольники, квадраты). Радиальный градиент тянется из центра окружности к краям и он хорошо подходит округлым фигурам (круг, овал), на сайтах это обычно кнопки.
Итак, у нас линейный градиент (linear-gradient), тянущийся снизу вверх (to top), от светлого-зеленого оттенка к темно-зеленому (rgba и цифры).
background-image: linear-gradient (to top, rgba (89,106,114, 0.6), rgba (206,220,23, 0.4)), url (fog.jpg);
Последние две цифры – 0.6/0.4 регулируют степень прозрачности градиента, без этих цифр, мы вообще не увидели бы картинки, а один сплошной градиент.
Градиент по высоте заполняет первый экран на 95 процентов, просто так лучше смотрится скошенная линия снизу.
Это не фотошоп, в реальности фотография целиковая, это мы виртуально её подрезали с помощью свойства clip-path. Пара цифр обозначает координаты X и Y, по которым строится кривая, маскирующая все лишнее. Данное свойство не поддерживается IE и Edge.
clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
Позиционирование текста
Для текста мы создали специальный блок, с позиционировали его относительно окна браузера ровно посередине.
.header_box position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
>
Примеры градиентов
https://cssgradient.io
https://webkul.github.io/coolhue/
https://www.grabient.com/
Оттуда можно скопировать код цвета и вставить в Photoshop или сразу в ваш CSS код.
Создано 12.09.2018 10:45:08
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.
Полосатый фон на чистом CSS
Чтобы плавный градиент превратить в четкие полоски, нужно максимально сблизить разные цвета. Там где заканчивается первый цвет, сразу же начинается второй, и вместо градиентного перехода мы имеем резкую границу.
Выглядит это вот так linear-gradient(yellow 50%, green 50%) .
Но указывать для второго цвета точную позицию необязательно, можно просто указать 0 , а умный браузер уже сам подставит его куда нужно.
.block< /*соотношение цветов*/ background: linear-gradient(yellow 30%, green 0); /*размер повторяющегося фона*/ background-size:100% 30px; >.block
.block < background: repeating-linear-gradient(45deg, yellow, yellow 15px, green 0, green 30px); >/*или так*/ .block