Аниме ТоП Сайтов системы Ucoz был создан для классификации
направлений аниме сайтов.
Наш Топ аниме сайтов имеет 10 направлений аниме сайтов.
Участвующим в топе бонусы:
1. Возможность рассказать о своём аниме проекте в разделе статей.
2. Добавить свой аниме канал новостей.
3. Следить за показателями своего аниме сайта.
4. Участвовать в программе рандомный аниме баннер.

Категории статей

Статьи об аниме [21]
Статьи для администраторов аниме сайтов [15]
Статейки для админа [12]
Расскажи о своём аниме сайте [20]

Вход / Регистрация


Главная » 2013 » Июнь » 12 » Очень яркие баннеры портят дизайн?
12:28

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

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

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

Например:

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>

<link type="text/css" rel="StyleSheet" href="http://anime-top.moy.su/banner.css" />

  

 

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



Статья опубликована специально для сайта © anime-top.moy.su
Категория: Статейки для админа | Просмотров: 383 | Добавил: Alexiya | Теги: очень, дизайн, портят, баннеры, яркие | Рейтинг: 5.0/2
Всего комментариев: 1
1  
Если что то не понятно то пишите в комментариях! cry

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Аниме Топ Сайтов СИстемы UcoZ. © 2012-2015
Оригинальные статьи о аниме сайтах.