Веб среда - совершенная игровая площадка для уймы креативных дизайнеров и разработчиков. Статический HTML сегодня уже не так привлекателен для посетителя. Пользователь хочет видеть несколько более приятную глазу веб страницу с множеством различных эффектов. Используя и/или объединяя удивительные веб технологии, подобные JavaScript (в частности, jQuery), CSS(3) и Flash (или Adobe Flex), этого легко достичь. В этой статье приведен CSS трюк, благодаря которому мы получаем эффект размытия основного фона отдельными HTML объектами.

Используя два изображения, мы можем получить довольно простой и в то же время красивый CSS эффект, пример которого вы можете наблюдать на этой странице.

При изменении размера окна браузера и прокрутке страницы вверх/вниз создается впечатление, как будто белая область контент-бокса перекрывает основной фон тела страницы словно запотевшее стекло, делая ленточки размытыми, нечеткими.

Суть трюка заключается в том, что для тела страницы (body) в качестве фона применяется полноцветное, четкое, красивое изображение, а для тела блока с контентом (div id="mainwrapper") – то же изображение, но немного обработанное в графическом редакторе. Атрибут "fixed" для параметра "background" устанавливает фиксированную позицию для обоих изображений и обеспечивает достижение необходимого эффекта.