→   Черно-белые картинки с помощью CSS3

Казалось бы о возможностях css3 написано уже на всех углах интернета. Но оказывается не все рябята знают, что с помощью css можно обесцветить в черно-белый цвет любую картинку.

Возьмем для примера какую-нибудь знаменитую цветную картинку и обесцветим по наведению на неё курсором.

Делается это простой комбинацией css свойств:

.gray:hover {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; /* IE 6-9 */
}