RSS-лента

Лучшие CMS интернета бесплатно для создания сайта

Мар
14

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

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

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

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

Получай первым обновления блога!

Введите Ваш e-mail:


Комментарии (5) на “Красивый CSS эффект затемнения”

  • Андрей (12 коммент.) 26 Март 2013 в 17:10

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

    • CMSONY
      CMSONY (172 коммент.) 26 Март 2013 в 21:45

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

  • Андрей (12 коммент.) 9 Октябрь 2015 в 19:52

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

    • CMSONY
      CMSONY (172 коммент.) 10 Октябрь 2015 в 19:25

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

  • Андрей (12 коммент.) 11 Октябрь 2015 в 19:20

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

Оставить комментарий


вверх