Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Эффект старой фотографии на CSS Категория: CSS
Название: Эффект старой фотографии на CSS
Дата добавления: 12-11-2012
Раз просмотрено: 1327
Комментарии: 3
Рейтинг: * * * * * · · · · · (3 голоса)

Эффект старой фотографии на CSS

Возможности активно развивающегося языка CSS3 поистине великолепны. В нем появляется все больше и больше свойств, позволяющих разработчикам работать меньше с Photoshop и больше с кодом. В этом уроке вы узнаете как с помощью одного только CSS кода придать вашему изображению вид старой фотографии. С помощью позиционирования, градиентов и фильтров, вы получите великолепный реалистичный ретро эффект для фотографии без использования графических редакторов.

Эта простая техника CSS градиентов и CSS фильтров позволит вам сделать наложение цветов на фотографию и добиться характерного эффекта фотографий прошлого времени. Обратите внимание, на то, что к настоящему моменту CSS фильтры работают только в WebKit браузерах (Chrome и Safari), но пройдет немного времени, когда эта техника будет применима и для других браузеров. В результате ее применения, вы получите такой эффект:

Эффект старой фотографии на CSS

HTML

Чтобы создать эффект старой фотографии, нам, конечно же, нужно будет изображение. Но нам также потребуется контейнер, которому мы зададим такие эффекты, как градиент и тени, поэтому давайте поместим фотографию в тег <div> и определим ему класс retro:

<div class="retro">
  <img src="images/retro.jpg" alt="Фотография с ретро эффектом на CSS" />
</div>

CSS

Вот весь CSS код, который вам необходим для придания желаемого ретро эффекта. Несмотря на то, что CSS фильтры к настоящему моменту работают только в WebKit браузерах, в код были добавлены вендорные префиксы для всех браузеров, с учетом прогрессивного улучшения. Подробно схема действия кода будет рассмотрена ниже.

.retro {
	-webkit-box-shadow: inset 0px 0px 100px #000014;
	-moz-box-shadow: inset 0px 0px 100px #000014;
	-o-box-shadow: inset 0px 0px 100px #000014;
	-ms-box-shadow: inset 0px 0px 100px #000014;
	box-shadow: inset 0px 0px 100px #000014;
	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%);
	background: -moz-linear-gradient(top, rgba(255, 145, 0, 0.2) 0%, rgba(255, 230, 48, 0.2) 60%), -moz-linear-gradient(20deg, rgba(255, 0, 0, 0.5) 0%, rgba(255,0,0,0) 35%);
	background: -o-linear-gradient(top, rgba(255, 145, 0, 0.2) 0%, rgba(255, 230, 48, 0.2) 60%), -o-linear-gradient(20deg, rgba(255, 0, 0, 0.5) 0%, rgba(255,0,0,0) 35%);
	background: -ms-linear-gradient(top, rgba(255, 145, 0, 0.2) 0%, rgba(255, 230, 48, 0.2) 60%), -ms-linear-gradient(20deg, rgba(255, 0, 0, 0.5) 0%, rgba(255,0,0,0) 35%);
	background: linear-gradient(top, rgba(255, 145, 0, 0.2) 0%, rgba(255, 230, 48, 0.2) 60%), 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%);
	-moz-filter: sepia(20%) brightness(10%) contrast(130%);
	-o-filter: sepia(20%) brightness(10%) contrast(130%);
	-ms-filter: sepia(20%) brightness(10%) contrast(130%);
	filter: sepia(20%) brightness(10%) contrast(130%);
	position: relative;
	z-index: -1; 
}

Принцип работы

Наш CSS код начинается с задания внутренней тени. Это создает темно синюю подсветку для винтажного эффекта. Однако, есть проблема, которая заключается в том, что подсветка находится под фотографией, а также, блок растягивается на всю ширину страницы. Для решения этого, мы относительно позиционируем наш блок и задаем ему отрицательный z-index. А также отображаем блок, как таблицу, чтобы он принял размеры самой картинки.

Подсветка фотографии

Затем, мы задаем первый градиент блока, идущий сверху-вниз и переходящий от оранжевого в желтый. Потом задаем второй красный градиент слева, который будет симулировать утечку света при проявлении фотографии. В результате, мы получим нечто похожее на это:

Пример ретро эффекта фотографии на CSS

Наша фотография изменилась, но все равно выглядит еще простой. К счастью, у нас есть набор CSS3 фильтров, которые помогут нам закончить превращение нашей в фотографии в старинную, в стиле ретро. Увеличим яркость фотографии на 10%, затемним темные участки картинки и осветлим светлые, повысив контрастность фотографии. Добавим немного эффекта сепии, силой в 20%, что позволит нам сохранит цвета фотографии. Ну вот и все, теперь мы создали очень интересный ретро эффект для фотографии, практически аналогичный тому, как если бы мы использовали Photoshop.

Это интересно: «Работа с PSD файлами при помощи PHP».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:
Гость  •  2012-11-21 10:36:59
Автор если показываешь как делать, то и примеры ставь а не картинки готовые.
Андрей  •  2012-11-21 15:31:02
Наверное, вы невнимательно читали статью, там сказано, что эти эффекты (фильтры) поддерживаются только в последних WebKit браузерах, если выкладывать примеры, а не картинки, многие не увидят результат.
Гость  •  2013-03-28 09:59:23
вы что только 2 щакинули