Новогодняя шапка на счетчик или другой элемент сайта на HTML+CSS

Новый год не за горами, и большое количество администраторов подготавливает соответствующую атмосферу на своем сайте.

Сегодня я поделюсь с вами очень красивой шапкой Деда Мороза, которая гуляет по Интернету уже много лет. Сколько помню – ее я ставил еще на свои первые сайты.

Кстати говоря, шапочка эта выглядит следующим образом:

А теперь приступим к ее интеграции на ваш сайт.

1. Скачиваем архив в конце статьи. Распаковываем и загружаем шапку на ваш сайт.

2. Далее ищем нужный вам блок. Предположим, что он выглядит так:

<div class="text">

	Hello, world!

</div>

2.1. Добавляем к нему стиль «position: relative».

2.2. Внутрь него вставляем код шапки:

<div class="cap"></div>

И итоговая картина на примере нашего блока будет следующая:

<div class="text" style="position: relative">

	<div class="cap"></div>

	Hello, world!

</div>

3. В стили вашего сайта вставляете:

.cap {
	background: url("../img/cap_1.png") no-repeat center center;
	width: 64px;
	height: 64px;
	position: absolute;
	margin-left: -27px;
	margin-top: -10px;
	z-index: 9999;
}

4. Сохраняете все изменения и обязательно проставляете корректную ссылку до файла шапки в стилях выше.

В качестве небольшого бонуса специально для посетителей сайта в архиве вы найдете еще несколько цветов этой шапки, которые, я думаю, вы придумаете, куда пристроить.

С наступающим Новым годом!