Волшебный фон на CSS

Дата публикации: 02.08.2010

Если включить фантазию, а в помощь ей дать возможности CSS, можно добиться потрясающих вещей. Смотрим пример.

Заметка

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

Как это работает

Основной секрет сокрыт в изображении, которое содержит в себе две картинки:

прозрачный png, в котором кроме прозрачности используется два цвета. Заливаешь фон одним цветом, остается видимой часть картины, которая нарисована другим цветом. Тебе остается только продумать где и как менять заливку фона для подобной картинки.

В этом примере фоновая картинка меняется плавно. Это достигается за счет подстановки градиентного фона. Глянем на код:

<body>
<div id="wrapper">
<div id="fancywrapper">
	<div class="mainWrap">прокручивай вниз страницу</div>
</div>
</div>
</body>

Вот и все теги, которые участвуют в реализации сего эффекта.

body {
	background: #404143; /* цвет фона таков, что скрывает одну из картин */
	text-align: center;
	background-image: url(path-to/bodytiletop.jpg);
	background-position: top left;
	background-repeat: repeat-x;
	}

#wrapper { /* это градиент который отвечает за плавность смены изображений */
	background-image: url(path-to/bodytilebottom-tall.jpg); 
	min-height: 100%;
	background-position: bottom left;
	background-repeat: repeat-x;
	}
#fancywrapper { /* волшебная картинка */
	position: relative;
	margin: 0px auto;
	background-image: url(path-to/robozombies7.png);
	background-position: center bottom;
	background-repeat: repeat-x;
	background-attachment: fixed;
	}
.mainWrap { /* блок для контента */
	width: 800px;
	height: 1700px;
	margin: 0 auto;
	background: #fff;
	position: relative;
}

Впечатление

Просто и гениально, или гениально просто… Такие примеры вдохновляют, демонстрируют, что все-таки версткой можно долго заниматься и продолжать открывать для себя что-то новое.

Материалы

Прием подсмотрен на thinkgeek.com.

Теги: CSS

Показать комментарии