Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » HTML & CSS » Многоцветный размытый фон с помощью градиентов CSS3

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

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

 

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

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

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

 

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

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

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться без комментирования

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru