Простой эффект затемнения CSS | iT заметки | HTML&CSS | Статьи

Главная
Статьи iT заметки HTML&CSS

01.04.2018 в 09:31:14 | Добавил: rayven | Просмотров: 512 | 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 работает только в современных браузерах таких как Мозила, Хром и Опера. В других браузерах эффект может не наблюдаться.