Раньше, чтобы придать фотографии ретро эффект нужно было воспользоваться фотошопом, теперь благодаря CSS фильтрам мы можем применить этот эффект именно в браузере, с минимумом разметки и к конкретному изображению.
Нам требуется контейнер (
Помещаем наше изображение в контейнер, дадим ему класс
Прописываем CSS стили:
Для блока мы использовали градиент разных rgba цветов. Также мы использовали эффект тени с параметром
Для фотографии мы использовали три фильтра: сепия, яркость и контраст.
Получаем: Оригинальное изображение:
Нам требуется контейнер (
<div>
, <p>
...) и само изображение. Использовать будем градиенты (linear-gradient
) и фильтры (-webkit-filter
). Пока что фильтры поддерживаются только в браузерах Webkit (Safari, Chrome), но это пока дело времени.Помещаем наше изображение в контейнер, дадим ему класс
retro
:
Код: Выделить всё
<div class="retro">
<img src="наше изображение" alt="Фотография в стиле ретро" />
</div>
Код: Выделить всё
.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;
margin: 10px;
}
.retro img {
-webkit-filter: sepia(20%) brightness(10%) contrast(130%);
position: relative;
z-index: -1;
display: block;
}
inset
(тень выводится внутри элемента), что придаёт фотографии эффект старины.Для фотографии мы использовали три фильтра: сепия, яркость и контраст.
Получаем: Оригинальное изображение:
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.