inuasparwil.ru

Ефект сірого відтінку на css.

Відео: ЯК ОТРИМАТИ СІРИЙ КОЛІР ВОЛОССЯ / КАТЕРИНА ЦАРСКАЯ

Ефект сірого відтінку на CSS.

Всім привіт! У цій статті я розповім, як зробити ефект сірого відтінку на CSS.

Щоб довго не томити, відразу привожу вам HTML і CSS код. Скопіюйте його і подивіться на результат.

HTML


lang="En"gt;

charset="UTF-8"gt;
Ефект сірого відтінку
rel="Stylesheet"href="Style.css"gt;


class="Profile"gt;
src="Images / profile.jpg"alt="Ефект сірого відтінку"gt;


CSS

.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%) -
}


ми створили div з класом profile не просто так, тому що це дуже гарне застосування для даного ефекту. Далі, в css, ми застосували властивість filter і його функцію grayscale, яка як раз і робить сірий відтінок. Щоб все це було плавно, ми також використовували властивість transition.

Відео: Фарбування в Сірий колір




Ось так просто можна зробити дуже красивий і цікавий ефект сірого відтінку.

Дякую за увагу і до наступної статті!

Поділися в соціальних мережах:

Схожі
Nodejs. Template engine. Частина 1.Nodejs. Template engine. Частина 1.
Як зробити прогрес бар на чистому css3.Як зробити прогрес бар на чистому css3.
Profile schedulerProfile scheduler
Як зробити блоки зі слайдер ефектом на чистому css3.Як зробити блоки зі слайдер ефектом на чистому css3.
Ефект збільшення картинки.Ефект збільшення картинки.
Як користуватися програмою process monitorЯк користуватися програмою process monitor
Плавне зміна зображення в jаvascriptПлавне зміна зображення в jаvascript
Як отримати випадковий колір на сторінці.Як отримати випадковий колір на сторінці.
Ефект плавного перегортання на jаvascript.Ефект плавного перегортання на jаvascript.
Як зробити вигнуту тінь на чистому css3.Як зробити вигнуту тінь на чистому css3.
» » Ефект сірого відтінку на css.