Я вже створив багато уроків на тему ретро ефекту, але всі вони робилися з використанням Photoshop. Граючись з деякими новими фічами CSS3, я вирішив створити досить пристойний ретро ефект використовуючи лише цей інструмент. Давайте поглянемо, як використовуючи CSS градієнти та фільтри, можна зробити такий ефект прямо в браузері.
Наразі, CSS фільтри підтримуються тільки у Webkit браузерах (Chrome, Safari), але досить скоро вони будуть підтримуватися в усіх сучасних браузерах.
Як створити ретро ефект
Перше, що нам потрібно для створення ефекту — це, звичайно, якесь зображення. Додайте його в HTML файл, як ви це зазвичай робите. Зображення повинно знаходитися в середині div або p елемента.
.retro {
-webkit-box-shadow: inset 0px 0px 100px rgba(0,0,20,1);
background: -webkit-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%),
-webkit-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
display: table;
}
.retro img {
-webkit-filter: sepia(20%) brightness(10%) contrast(130%);
position: relative;
z-index: -1;
}
Додайте вищевказаний код на сторінку із зображенням. Не забудьте задати -moz- варіанти для кожного правила, якщо ви хочете щоб цей ефект працював у Firefox в майбутньому.
Як це працює
CSS починається з правила box-shadow, яке має значення inset 0px 0px 100px rgba(0,0,20,1);. Завдяки чому, створюється темно синій внутрішній ефект світіння. Проблема в тому, що тінь промальовується після зображення і розтягується на всю сторінку. Щоб виправити це, потрібно додати position: relative; z-index: -1; до зображення, що перемістить зображення на рівень нижче. Задля того, щоб div розтягувався відповідно до розмірів зображення, потрібно додати display: table;.
Далі, перший з двох градієнтів доданий до батьківсього div-а. -webkit-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%) — створює вертикальний жовто-гарячий градієнт. Для зменшення прозорості градієнта використовуються rgba значення.
Наступний градієнт — -webkit-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%) доданий для створення світлового ефекту.
В певній мірі ефект вже працює, але зображення виглядає дуже пласким. На щастя, ми маємо багато CSS фільтрів, які дають змогу погратися із зовнішнім виглядом зображень: -webkit-filter: brightness(10%) contrast(130%) sepia(20%);. Збільшуємо яскравість (brightness) на 10%, контраст (contrast) затемнює темні частини і висвітлює світлі частини зображення, сепія (sepia) додає жовто-коричневий відтінок. Після поєднання всіх ефектів і градієнтів разом створюється прекрасний ретро ефект.
Першоджерело — «Create a Trendy Retro Photo Effect Purely with CSS»
