Затемнение счетчиков или прозрачный счетчик

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

И так начнем, пример первый: Открываем свою таблицу стилей сайта, пусть к примеру она 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>

P.s. Если Вы зарабатываете в Sape то этого делать не советую, т.е. прятать их ссылки.