Новогоднее оформление минималистических сайтов с использованием CSS3

Минималистические сайты – одна из последних тенденций в веб дизайне.  В  оформлении подобных сайтов нужна лёгкость, минимальная элегантная графика, которую легко внедрить на сайт. В этом помагают  свойства CSS3. По сравнению со старыми временами табличной вёрстки, когда приходилось вырезать и позиционировать в ячейках многочисленные элементы оформления, новые свойства CSS3 можно применить к одному элементу и получить оформленный сайт.

При расположении фона по краям страницы изображения соответственно позиционируются с изменением ширины браузера.  Используя новое свойство CSS3  - несколько изображений в одном объявлении фона, новогоднее оформление можно добавить всего к одному HTML тегу.

Шаг 1
Находим изображения снежинок на стоковых сайтах или, как в данном случае, рисуем свои:

Шаг 2
Снежинки можно приукрасить использовуя белую обводку и серое внешнее свечение

Шаг 3
Изменяем размеры и углы наклона снежинок, формируем часть повторяющегося фона:

Шаг 4
Создаём 4 png изображения для каждой стороны страницы:

Шаг 5
CSS код:

html {
min-height:100%;
}
body {
background: url("images/bg-top.png") repeat-x center top, 
url("images/bg-bot.png") repeat-x  center bottom,
url("images/bg-l.png") repeat-y  left top,
url("images/bg-r.png") repeat-y  right top; 
height:100%;
}

100% высота для элемента Body и минимальная высота для элемента HTML нужны для позиционирования фона внизу страницы, если в ней немного контента.

Страница выглядит наряднее:

Шаг 6
Углы страницы выглядят чуть незавершенными. Чтоб приукрасить их, в каждом углу добавляем угловые снежинки. Внутри угловые снежинки окрашены в цвет общего фона, чтоб не просвечивался повторяющийся фон:

Шаг 7
Угловые снежинки по ширине и высоте чуть больше снежинок, использованных в фоне сторон, чтоб перекрывать их:

Дописываем код для позиционирования угловых снежинок:

body {
background: url("images/corner-br.png") no-repeat right bottom,
url("images/corner-bl.png") no-repeat left bottom,
url("images/corner-tl.png") no-repeat left top,
url("images/corner-tr.png") no-repeat right top,
url("images/bg-top.png") repeat-x center top, 
url("images/bg-bot.png") repeat-x  center bottom,
url("images/bg-l.png") repeat-y  left top,
url("images/bg-r.png") repeat-y  right top; 
height:100%;
}

Теперь страница выглядит праздничной и завершенной:

Выводы: технологии CSS3 позволяют добавлять новые элементы в дизайн сайта легко и с минимальными трудовыми затратами, так как к одному HTML тегу можно применить несколько фоновых изображений. Это особенно важно в предпраздничный период, когда многие заказчики хотят дополнительно оформить свои сайты.