Если вы подписаны на блог, то наверное, помните, что уже была статья с бесплатными боке-текстурами, но то уже готовые файлы. Так почему бы не попробовать реализовать такой эффект вместо фонового изображения с помощью CSS3?
Результат
Дизайн Боке
Были изучены несколько фото с эффектом боке и, как результат, были найдены следующие особенности:
- Должны присутствовать группы кругов похожих цветов. В каждой группе, круги могут перекрывать друг друга.
- Цветовой переход от одной группы в другую может быть выполнен с помощью наложения радиального градиента второго цвета группы на первую.
- Каждая группа должна иметь очень большой размытый фоновый круг, как базу.
- Каждая группа имеет 2 или более маленьких кругов или один большой, используемые, как основы.
- Используемые фоны кругов, как правило, полупрозрачные. Нужно для эффекта наложения.
Реализация
На картинке представлена «единица» нескольких групп кругов с координатами:
Черный бэк определяет размер «единицы» с помощью свойства background-size. В демо это квадрат с размерами 300px. Каждый из этих кругов является фоновым изображением, со свойством background-size.
Затем, мы используем свойство background-position для установки координат центров кругов в этой «единице». Как вы видите, точка отсчета находится в центре квадрата.
Используя свойство background-repeat, мы можем повторять эту «единицу» на экране! Вы можете поиграть размером единицы, чтобы получить свои эффекты боке.
Также напоминаем, что градиенты работают только в
[w2browser class="firefox" rel="3.6+"] [w2browser class="safari" rel="4+"] [w2browser class="chrome" rel="10+"]
и во всех других браузерах, поддерживающих радиальные градиенты CSS3.
Дополнение
Alexis подкинул реализацию такого эффекта с помощью SVG. Это очень хорошее решение для тех браузеров, в которых нет поддержки градиентов! После того, как был прикручен плагин Modernizr, данный сниппет стал работать и для таких браузеров.
P.S.: Интернет-магазины становятся все более и более популярными у современных людей. Например, интернет магазин унитазы наверняка «потеснит» обычные магазины сантехники, которые есть в любом городе. Остается только ждать.