Вітаю всіх, хто опинився на сторінках SerBlog.ru. У сьогоднішньому невеликому уроці ми з вами будемо робити рекламний банер для сайту розміром 468 на 60 пікселів з використанням тільки CSS і без картинок. Прошу зауважити, що я вже ділився зі своїми читачами банером для збору передплатників на сайті . Для чого це потрібно? Цей банер, що стоїть вище з використанням зображення в форматі GIF має досить великий обсяг, майже 64 кб. А що якщо ваша сторінка і так важить дуже багато і не бажано її перевантажувати додаткової графікою. От саме для цього і можна використовувати CSS банер. CSS код важить набагато менше картинки і в своєму обсязі не перевищить і трьох кілобайт. Тож почнемо. Для початку напишемо HTML розмітку. І наш майбутній банер повинен буде вміститися в одну, максимум в два рядки.

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

<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; / * Колір тексту при наведенні * /}

.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; / * Колір тексту при наведенні * /}

демо

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