Всем привет, в этом посте опишу как можно сделать счетчик прозрачным, кто то называет это затемнением счетчика. Просмотрев форумы и блоги понял, что многие задаются таким вопросом: «Подскажите пожалуйста как затемнить счетчики? Мне надо так чтоб при загрузке страницы они были темные, а при наводе мышкой становились светлыми.» Эта мысль натолкнула меня сделать на некоторых своих сайтах также. Перепробовал несколько методов, все работали на ура! Вот решил отписать как легко и безболезненно затемнять счетчики. Приведу пару примеров, если кому известны еще варианты, отписывайте их в комментариях к посту.

И так начнем, Пример первый:

Открываем свою таблицу стилей сайта, пусть к примеру она style.css из вашего шаблона. И добавляем в любом месте, но лучше в самом низу, чтобы не париться:

#banners a img
{
opacity:0.3; /* CSS3 — Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
— moz-opacity:0.3; /* Mozilla 1.6 */
filter:alpha (opacity=40); /* IE 5.5+*/
}

#banners a:hover img
{
opacity:1.0; -moz-opacity:1.0; filter:alpha (opacity=100);
}

Сохраняем наш файл style.css. Далее все просто, открываем нужную нам страничку на которой нужно затемнить счетчики, в коде странички счетчики и прочие ненужные картинки закрываем дивом:

<div id="banners">картинки или счетчики</div>

сохраняем и наслаждаемся простотой и эстетикой. Также плюсом к мозиле, сафари, опере и эксплореру добавлю для Konqueror 3.1, Safari 1.1
осветление счетчиков:

-khtml-opacity: 0.3; /* Konqueror 3.1, Safari 1.1 */

при наведении на счетчик

-khtml-opacity: 1;

Кстати данную фишку можно использовать и наоборот. Тоже в некоторых местах будет отлично смотреться.

Пример второй:

Также как и в первом примере в CSS файл добавить в самый низ или верх.

/* Начало-Затемнение */
.gradualfader img {
filter:alpha (opacity=20);
— moz— opacity:0.2;
— khtml— opacity:0.2;
opacity:0.2;
}

.gradualfader a:hover img {
opacity:2.0;
— moz— opacity:2.0;
— khtml— opacity:2.0;
filter:progid:DXImageTransform.Microsoft.Alpha (opacity=200);
}

/* Конец-Затемнение */

Отвечает за степень прозрачности, цифры ставьте на нужные Вам. В данном случае прозрачность 20%.

filter:alpha (opacity=20);
— moz-opacity:0.2;
— khtml-opacity:0.2;
opacity:0.2;

А сами счетчики, картинки, баннера и т.д. в эти теги

<span class="gradualfader">счетчики и баннера</span>

Ну и напоследок небольшой совет:

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

<noindex> все ссылки, счетчики </noindex>