Артём Мáлков

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

27 дек0 комм

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

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

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

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

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

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

Файл
Размер
Ссылка
cap.zip
26,13 Kb
Скачать с сервера
Рекомендуем к просмотру
Новогодняя мотня от Яндекса (со звуком)
Модули и скрипты
Как убрать подчеркивание у ссылок в HTML на CSS/jQuery
Статьи и советы
Плавная прокрутка страницы до нужного блока на jQuery
Модули и скрипты
0
комментариев
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
Подняться наверх
«Pandoge» - помощник вебмастера