Главная > Полезные подсказки > Как затемнить счетчик

Как затемнить счетчик

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

И так, чтобы осуществить «затемнение счетчика» нужно в файл style.css разместить вот такой код:

1
2
3
4
5
6
7
8
9
10
.counter a img {
    opacity:0.4;
    -moz-opacity:0.4;
    filter:alpha (opacity=40);
}
.counter a:hover img {
	opacity:1.0;
	-moz-opacity:1.0;
	filter:alpha (opacity=100);
}

В тегах opacity и -moz-opacity прозрачность регулируется значениями от 0.0 до 1.0, в filter от 0 до 100.

Да, еще небольшое уточнение: в каком же месте в style.css разместить этот код? Разместить можно где угодно и код в любом случае будет работать, лишь бы Вы, по истечении времени, могли понять, что это за код и за что он отвечает. Над кодом можно сделать вот такую запись:

1
/*Код затемнения счетчиков и картинок*/

главное обязательно отделите ее слешами со звездочками и тогда запись не повлияет на работу стилей.
Далее создаем вот такой див:

1
<div class="counter">код счетчика</div>

и вставляем в него код счетчика, баннера или еще чего, что нужно сделать прозрачным. Созданный див с кодом нужно разместить в файле где должен находиться счетчик, как правило это либо footer, либо sidebar.

Вот и все, если Вы уже более менее ориентируетесь в файлах своего шаблона, то делов тут буквально на две-три минуты.

Подпишитесь на обновления блога по e-mail

Подпишитесь на обновления блога по e-mail

  1. Пока что нет комментариев.
  1. Пока что нет уведомлений.