Красивый CSS эффект затемнения

Адаптивная, SEO подготовленная WordPress тема WordPress тема под вирусный контент и социальные сети

Наверняка Вы встречали на некоторых сайтах в том числе и моем затемненные, тусклые или полупрозрачные счетчики посещений, баннеры, кнопки сайта или просто аватарки в  комментариях. А при наведении на них курсора они как-бы вспыхивали и приобретали нормальную яркость и четкость. Так вот этот эффект можно реализовать с помощью добавления простого кода.

Вот такие счетчики находятся у меня в подвале сайта:

CSS затемнение

Для этого нужно зайти в амин панель сайта /внешний вид /редактор , выбрать файл 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 работает только в современных браузерах таких как Мозила, Хром и Опера. В других браузерах эффект может не наблюдаться.

Мощный SEO плагин Clearfy
Понравилась статья? Поделиться с друзьями:
Комментариев: 5
  1. Андрей

    Пасиба, да сделать немного посветлее затемнение и будет кул.

    1. CMSONY

      Сделать посветлее, можно изменяя параметр opacity=40 — прозрачность а также opacity:0.3 в сторону увеличения

  2. Андрей

    А как спрайты затемнять?

    1. CMSONY

      Спрайт это та же картинка к которой применяются определенные стили. Поэтому и затемнять, можно аналогично.

  3. Андрей

    Я только знаю что для затемнение спрайта используется другая видоизмененная картинка, а как с помощью css не нашел

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: