Коды всех смайликов «ВКонтакте» с обозначениями   •   Online-инструменты
449 просм
0 комм
Поделиться:

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

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

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

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

Новогодняя шапка на счетчик или другой элемент сайта на 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. Сохраняете все изменения и обязательно проставляете корректную ссылку до файла шапки в стилях выше.

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

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

ФайлРазмерСсылка
0
комментарий
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария