01.04.2018 в 09:31:14 | Добавил: rayven | Просмотров: 60 | 0 ответов

Вы встречали на некоторых сайтах в том числе и моем затемненные, тусклые или полупрозрачные счетчики посещений, баннеры, кнопки сайта или просто аватарки в  комментариях. А при наведении на них курсора они как-бы вспыхивали и приобретали нормальную яркость и четкость. Так вот этот эффект можно реализовать с помощью добавления простого кода.Вот такие счетчики находятся у меня в подвале сайта: Для этого нужно зайти в амин панель сайта /внешний вид /редактор , выбрать файл style.css и в самом низу этого файла добавить такой код: 
Код
/* затемнение картинки -----------------------------*/ #banners a img {opacity:0.3; -moz-opacity:0.3;  filter:alpha(opacity=40);} #banners a:hover img { opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100); }  /* /затемнение картинки ---------------------------*/
После чего, можно любую картинку или код счетчика заключать в следующий блок:
Код
<div id="banners"> код картинки или баннера </div>
Вот собственно говоря и все. Эффект должен появиться. Также можно поиграть с атрибутом opacity — он определяет уровень прозрачности элемента веб-страницы (значение «0» — полная прозрачность, а «1» наоборот полная непрозрачность. Данный эффект можно применять не только к изображениям, например, можно затенить социальные кнопки или кнопки меню — красиво смотрится. И самое главное, в CSS3 довольно много возможностей для создания простого эффекта затемнения. Но, CSS3 работает только в современных браузерах таких как Мозила, Хром и Опера. В других браузерах эффект может не наблюдаться.
| | обсудить на форуме | | Рейтинг: 5.0/1 | Теги: CSS, эффект, затемнения, фон

60 визитов
↳ 0 ответов
Ваше мнение о материале 10 из 10
Голосовало: 1
avatar