• 1659
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Всем привет. Делаю сайт для газеты,ну и там понадобился такой эффект чтобы все фото были черно-белые,а при наведении становились цветными.Порыскал по интернету и нашел несколько способов :
Некоторые делают это на Flash,
Ещё не перестали делать на Javascript,
Но лучший вариант это - CSS3.

Итак приступим.
Сначала обесцветим наши изображения ,для этого в CSS3 есть специальное средство filter.
Открываем наш файл стилей и добавляем или заменяем

Код:
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
}
Вот теперь все изображения на странице стали черно-белыми.

Далее делаем так, чтобы при наведении на изображение, оно плавно становилась цветной.
Для этого немного дополним наш предыдущий стиль:
Код:
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
/*Добавим вот такой вот код transition*/
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
img:hover {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
filter: none;
}
Теперь изображения при наведении становятся цветными, также мы воспользовались CSS3 transition, чтобы сделать процесс обесцвечивания анимированным ,параметр all в transition говорит, что правило будет работать для всех стилей, а второй параметр — время анимации.
В первый параметр можно указать определённое свойство (например height, чтобы анимировать только высоту), а во второй время в секундах (можно в десятичных дробях — 0,1s).

Можешь почитать и вот эту статейку "Подсветка синтаксиса в статьях от google-code-prettify"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Ваше отношение к TWIG
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element