Боке с помощью градиентов на CSS3

Давайте попробуем реализовать эффект Боке вместо фонового изображения с помощью CSS3.
















Дизайн Боке
Были изучены несколько фото с эффектом боке и, как результат, были найдены следующие особенности:

• Должны присутствовать группы кругов похожих цветов. В каждой группе, круги могут перекрывать друг друга.

• Цветовой переход от одной группы в другую может быть выполнен с помощью наложения радиального градиента второго цвета группы на первую.

• Каждая группа должна иметь очень большой размытый фоновый круг, как базу.

• Каждая группа имеет 2 или более маленьких кругов или один большой, используемые, как основы.

•  Используемые фоны кругов, как правило, полупрозрачные. Нужно для эффекта наложения.

Реализация

На картинке представлена «единица» нескольких групп кругов с координатами:

Черный бэк определяет размер «единицы» с помощью свойства background-size. В демо это квадрат с  размерами 300px. Каждый из этих кругов является фоновым изображением, со свойством background-size.

Затем, мы используем свойство background-position для установки координат центров кругов в этой  «единице». Как вы видите, точка отсчета находится в центре квадрата.

Используя свойство background-repeat, мы можем повторять эту «единицу» на экране! Вы можете
поиграть размером единицы, чтобы получить свои эффекты боке.

Также напоминаем, что градиенты работают только в Firefox 3.6+, Safari 4+, Chrome 10+ и во всех других браузерах, поддерживающих радиальные градиенты CSS3.

---

Источник: Bokeh with CSS3 Gradients

---