• 309
  • 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).

Можешь почитать и вот эту статейку "Выводим дополнительные поля xfields в секцию head вашего шаблона"

mistakes

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

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

Ваше мнение

Вы нашли что искали?
Результаты

Облако тегов

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