• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Как сделать прозрачный баннер или счетчик
Как сделать прозрачный баннер или счетчик
Kosten
Дата: Четверг, 2017-06-29, 02:48 | Сообщение 1
Администраторы
Сообщений:18439
Награды: 55


Здесь вы можете сделать прозрачным баннеры или счетчики, что будут еле просматриваемые. Думаю многие видели такой эффект на любом сайте, где счетчик но больше все баннеры идут не яркие в сделаны под фон сайта или его дизайн.

Устанавливаем код-css у себя в конец вашего CSS:

Код
/* ----////// Эффект прозрачности /////------- */    

#banners a img {    
opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=30);    
}    

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


Заключаем счётчики или любое изображение,баннеры в дивы:

Код
<div id="banners">Тут ваши счётчики</div>
Страна: (RU)
-SAM-
Дата: Четверг, 2017-06-29, 03:30 | Сообщение 2
Друзья сайта
Сообщений:463
Награды: 18


Еще к стилям прописывают скрипт для достижения эффекта плавного перехода прозрачности:
Код
<script>
   jQuery(function(){
   $("#banners img").hover(function(){
   $(this).stop().animate({opacity:'1.0'})},
   function(){$(this).stop().animate({opacity:'.3'})}
   );
   });
</script>

Правда, в наше время с появлением CSS3 вместо скрипта можно использовать свойство transition, чтобы была плавная трансформация.




Сообщение отредактировал
-SAM- - Пятница, 2017-06-30, 00:13
Страна: (UA)
Kosten
Дата: Четверг, 2017-06-29, 04:14 | Сообщение 3
Администраторы
Сообщений:18439
Награды: 55


-SAM-, от души за дополнение + подарок!
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Как сделать прозрачный баннер или счетчик
  • Страница 1 из 1
  • 1
Поиск: