как изменить цветное фото на чёрно - белое с помощью CSS

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

эффект для картинок

Для наглядности, скопируйте приведённый ниже код и вставьте в этом редакторе, чтобы понять о чём идёт речь.

<style>
.profile img {
  border-radius: 50%;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  transition: filter 0.5s ease;
  -webkit-transition: filter 0.5s ease;
}
.profile img:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
}</style>

<div class="profile">
   <img src="https://1.bp.blogspot.com/-xOfXxt_KCN4/XqPLWY3P-TI/AAAAAAAANoQ/lqkM1idY8CYDO_VzswikhrNw60oibAZ2QCLcBGAsYHQ/s1600/%25D1%2581%25D0%25BB%25D0%25B0%25D0%25B9%25D0%25B4%25D0%25B5%25D1%2580.jpg" alt="Эффект для картинок">
  </div>


Не нужно здесь ни какого фотошопа. Для эффекта серого фона просто используется функция grayscale(), которая и  превращает изображение в чёрно-белое. Значение 100%.  Значения меньше 100% (или меньше 1) линейно меняют цветность картинки.

Я взяла самую простую картинку. Вместо строк серого цвета, вставьте адрес вашего изображения.

 border-radius: 50%;  - добавили закругление углов картинки. Можно убрать, если хотите.

Если захотите использовать такой вариант оформления картинок в одном сообщении, или гаджете, при написании перейдите в формат HTML и вставьте в нужном месте готовый код.

Можно применить этот эффект ко всем изображениям блога. Для этого необходимо зайти во вкладку тема, изменить HTML и в открывшемся окне найти строку ]]></b:skin>. Сразу над ней вставьте сам код  CSS , только без тегов <style> и </style>. Сохраните шаблон.
Теперь при создании поста , в том месте где предполагается картинка с эффектом серого оттенка, нужно, так же в формат HTML, добавить только код div

<div class="profile">
   <img src="https://1.bp.blogspot.com/-xOfXxt_KCN4/XqPLWY3P-TI/AAAAAAAANoQ/lqkM1idY8CYDO_VzswikhrNw60oibAZ2QCLcBGAsYHQ/s1600/%25D1%2581%25D0%25BB%25D0%25B0%25D0%25B9%25D0%25B4%25D0%25B5%25D1%2580.jpg" alt="Эффект для картинок">
  </div>


Вот и всё.

Благодарю всех за ваше внимание. Всем добра.


хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :

16 комментариев:

  1. Вроде цветное фото интереснее выглядит!

    ОтветитьУдалить
    Ответы
    1. Ирина, это не важно. Такой эффект на любителя. Особенно кто плотно занимается фото.

      Удалить
  2. Наверно, я старомоден, но любил и продолжаю любить классное чёрно-белое фото. да и кино тоже. Со врёмен почившего в бозе чехословацкого журнала "Фото-ревю". Впрочем, перекрашивать туда-сюда ничего не буду, как те лохи, которые додумались "раскрасить" "17 мгновений весны".

    ОтветитьУдалить
    Ответы
    1. Семён, я с Вами вполне согласна про кинушки разукраски. Как и сами чёрно белые фотографии. Они да оригинальны по своему.

      Удалить
  3. Хороший прием при обработке фото. Можно придать интересные оттенки. Я это делаю иногда в специальном редакторе. Есть моменты, которые цевтные фото не передают))))

    ОтветитьУдалить
  4. Light Knight, с оттенками поиграться вполне реально. Да и приёмчик совсем не сложный. О, да я вспомнила на Вашем одном, или не одном блоге даже фоны в таких тонах. И аватар тоже. Завтра сбегаю посмотрю.

    ОтветитьУдалить
  5. Есть вообще карандашная живопись она принципиально черно-белая. Также красивы линогравюры.
    А тут мы можем делать свой черно-белый перформанс. Вообще блоги очень гибки.

    ОтветитьУдалить
  6. Light Knight, карандашная живопись меня тоже впечатляет. На самом деле с помощью кодов можно создать на сайтах (правильно подмечено) перформанс.

    ОтветитьУдалить
  7. Добрый день, Вика!
    Для моего Блокнота эта тема была бы актуальна! Но... Попробовала на тестовом блоге. Изменила тему в HTML. Сохранила. В сообщении просто добавила картинку и получилось! Пробую в основном блоге - нет. Пробую снова в тестовом - нет. Так и не получилось!

    ОтветитьУдалить
  8. Здравствуйте, Татьяна. Через форму связи мне Ваш код перешлите, пожалуйста.

    ОтветитьУдалить
  9. Здравствуйте, Татьяна. Там У Вас код не правельный. Ответила на почту Вам.

    ОтветитьУдалить
  10. Здравствуйте, Вика! Эффект применила! Но... при наведении картинка не увеличивается, как всегда было раньше. Ошибка у меня?

    ОтветитьУдалить
  11. Татьяна, я так поняла, что Вы только в одном сообщении сделали его. А у Вас увеличение всех картинок было?

    ОтветитьУдалить
  12. Татьяна, Не понимаю, каким образом этот код мог на увеличение картинки повлиять. Вы не помните, какой код Вы использовали для эффекта увеличения картинки.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск