Вы встречали на некоторых сайтах в том числе и моем затемненные, тусклые или полупрозрачные счетчики посещений, баннеры, кнопки сайта или просто аватарки в комментариях. А при наведении на них курсора они как-бы вспыхивали и приобретали нормальную яркость и четкость. Так вот этот эффект можно реализовать с помощью добавления простого кода.Вот такие счетчики находятся у меня в подвале сайта:
Для этого нужно зайти в амин панель сайта /внешний вид /редактор , выбрать файл 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 работает только в современных браузерах таких как Мозила, Хром и Опера. В других браузерах эффект может не наблюдаться.
В этой теме Вы можете задать вопрос о материале Простой эффект затемнения CSS .
Суббота 23.11.2024, 07:47:24 
