Способ затемнить сайт (траурное оформление)

Я поддерживаю сайт небольшого регионального СМИ. 28.03.2018 в стране был объявлен день траура по погибшим в страшной трагедии 25.03.2018 в Кемерово. Придя утром на планерку журналисты решили, что на сайте помимо новостей нужно изменить оформление. Сделать его траурным заменив фон на темный или сделать черно белыми картинки.

Поскольку это не основная моя работа, хобби, я не находился за компьютером, когда мне сообщили что нужно сделать.

С телефона вносить большие правки не удобно, но сделать фото чернобелым не сложно. Сначала попробовал сделать чернобелыми изображения к новостям применив стиль к тэгу IMG. Это выглядело невзрачно, цветными оставались некоторые картинки, например подгружаемые позже слайдером, багграунды, для них нужно было прописывать тоже. Получившиеся картинки тоже смотрелись не очень, среди окрашенного текста.

Тогда в CSS для body был добавлен следующий код стиля

filter: gray;
filter: gray; filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
-webkit-filter: grayscale(100%);

Он делает абсолютно весь сайт чёрнобелым.

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

Комментарии 3

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *