Раньше, чтобы придать фотографии ретро эффект нужно было воспользоваться фотошопом, теперь благодаря CSS фильтрам мы можем применить этот эффект именно в браузере, с минимумом разметки и к конкретному изображению.

Нам требуется контейнер (<div>, <p>...) и само изображение. Использовать будем градиенты (linear-gradient) и фильтры (-webkit-filter). Пока что фильтры поддерживаются только в браузерах Webkit (Safari, Chrome), но это пока дело времени.

Помещаем наше изображение в контейнер, дадим ему класс retro:

Код: Выделить всё

<div class="retro">
    <img src="наше изображение" alt="Фотография в стиле ретро" />
</div>​
Прописываем CSS стили:

Код: Выделить всё

.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;
}
Для блока мы использовали градиент разных rgba цветов. Также мы использовали эффект тени с параметром inset (тень выводится внутри элемента), что придаёт фотографии эффект старины.
Для фотографии мы использовали три фильтра: сепия, яркость и контраст.

Получаем:
Изображение
Оригинальное изображение:
Изображение
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.