Ефект сірого відтінку на 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.