Очень яркие баннеры портят дизайн?

Name: Очень яркие баннеры портят дизайн?
Item: Очень яркие баннеры портят дизайн?
Author: Alexiya

Многие владельцы веб сайтов сталкиваются с этой проблемой.

Например:

1. Дизайн сайта светлый, а баннеры имеют тёмные оттенки.

2. Дизайн сайта тёмный, а баннеры имеют светлые оттенки.

Но не переживайте, так как из любой ситуации есть выход и в этой статье мы с вами научимся обрабатывать любые баннеры!

Для примера возьмём пару светлых баннеров

и пару тёмных баннеров

И попробуем поэкспериментировать! Теперь мы создали для примера таблицу с двумя

ячейками и будем впихивать туда баннеры!!

Далее мы заключим баннеры в Div слои:

Для светлых создадим Div слой white <div class="white">...</div>

Для тёмных создадим Div слой black <div class="black">...</div>

html код:

<table style="width: 100%; border-collapse: collapse;"><tbody><tr>
<td style="width: 180px; letter-spacing: 0px; word-spacing: 0px; height: 70px;
background-color: rgb(105, 105, 105); text-align: center; vertical-align: middle;">
<div class="white"><p><img alt="" src="http://neko.moy.su/ban.jpg" height="31" width="88">
&nbsp;&nbsp;<img alt="" src="http://anibox.zz.mu/images/icons/1.gif" height="31" width="88">
</p></div></td><td style="width: 180px; letter-spacing: 0px; word-spacing: 0px; 
background-color: rgb(255, 255, 224); text-align: center; vertical-align: middle;">
<div class="black"><p><img alt="" src="http://black-anime.moy.su/banner.gif" height="31" width="88">
&nbsp;
<img alt="" src="http://vebsite-animeg.ucoz.ru/banners/Banner-650x426px.png" height="31" width="88">
</p></div></td></tr></tbody></table>

Теперь нам нужно задать стиль для этих Div слоёв и мы создадим в блокноте файл banner.css

И там пропишем:

#white a img {opacity:0.6; -moz-opacity:0.6; filter:alpha(opacity=60);}
#white a:hover img {opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);}
#white img {opacity:0.6; -moz-opacity:0.6; filter:alpha(opacity=60);}
.white a img {opacity:0.6; -moz-opacity:0.6; filter:alpha(opacity=60);}
.white a:hover img {opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);}
.white img {opacity:0.6; -moz-opacity:0.6; filter:alpha(opacity=60);}
#black a img {opacity:0.6; -moz-opacity:0.6; filter:alpha(opacity=60);}
#black a:hover img {opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);}
#black img {opacity:0.6; -moz-opacity:0.6; filter:alpha(opacity=60);}
.black a img {opacity:0.6; -moz-opacity:0.6; filter:alpha(opacity=60);}
.black a:hover img {opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);}
.black img {opacity:0.6; -moz-opacity:0.6; filter:alpha(opacity=60);}

Файл вставляем между тегами <head>... </head>

И теперь смотрим что получилось! В файле banner.css вы сможете отрегулировать цветность фильтра от 0.1 до 0.9.