Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

Многоцветный размытый фон с помощью градиентов CSS3

Продолжаю экспериментировать с градиентами . С помощью градиентов можно добиться по-настоящему фантастичных эффектов в веб-дизайне, в том числе и создавать причудливые фоны, которые смотрятся более симпатично, чем однотонные.
Поскольку любой градиент по сути считается фоновым изображением и отдельного свойства для него нет, добавляется в css через background-image или универсальное свойство background.
Уверен, что создав однажды самостоятельно простейший градиент с переходом между двумя цветами, вы уже не остановитесь и будете искать всё новые, более сложные комбинации эффекта.
Например, с помощью повторяющихся линейных градиентов можно «нарисовать» довольно-таки симпатичный, многоцветный с эффектом размытия:

 

Размытый фон с помощью градиентов CSS3

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

Короче, далее всё по накатанной, в данном примере использовал свойства background-color (базовый цвет фона), background (собственно для добавления градиента), background-repeat (определяет, как будет повторяться фоновое изображение) и background-blend-mode (режим наложения).
Весь фарш представлен ниже, а поковыряться в коде и поиграться со значениями, можете непосредственно песочнице Jsfiddle
 

 

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>