Делаем рекламный баннер для сайта на CSS

Приветствую всех, кто оказался на страницах SerBlog.ru. В сегодняшнем небольшом уроке мы с вами будем делать рекламный баннер для сайта размером 468 на 60 пикселей с использованием только CSS и без картинок. Прошу заметить, что я уже делился со своими читателями баннером для сбора подписчиков на сайте. Для чего это нужно? Этот баннер, что стоит выше с использованием изображения в формате GIF имеет достаточно большой объем, почти 64 кб. А что если ваша страница и так весит очень много и не желательно ее перегружать дополнительной графикой. Вот как раз для этого и можно использовать CSS баннер. CSS код весит гораздо меньше картинки и в своем объеме не превысит и трех килобайт. Итак, начнем. Для начала напишем HTML разметку. И наш будущий баннер должен будет уместиться в одну, максимум в две строчки.

<div class="banner">
  <a href="#" title="">Ваша реклама</a>
</div>

Теперь напишем код CSS. Здесь тоже можно экспериментировать. Например установить другой цвет или подключить свой шрифт.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.banner{
  width:468px; /* Ширина */
  height:60px; /* Высота */
  background:#ccffff; /* Цвет фона */
  margin:0 auto; /* Выравнивание */
  display:block; /* Делаем блоком */
  text-align: center; /* текст по центру */
  font:bold 32px Arial; /* Стиль текста */
  border: 2px solid #666; /* Рамка вокруг */
}
 
a {
  display: block;
  height: 60px;
  padding: 9px 0 0;
  width: 468px;
  text-decoration:none;
  color: #660000;
}
.banner:hover {
  background: #66CCCC; /* Цвет фона при наведении */
}
a:hover {
  color: #006600; /* Цвет текста при наведении */
}

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