ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект ретро изображении с помощью CSS

Эффект ретро изображении с помощью CSS

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

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

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

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

Как создать ретро-фотоэффект CSS

Приступаем к установке:

Код

Чтобы создать ретро-фотоэффект, нам сначала понадобится фото, где добавляем изображение в HTML. Некоторые из эффектов CSS зависят от контейнера блочных элементов, поэтому изображение должно быть внутри div или p.

Код

.posekangeval {
  box-shadow: inset 0 0 100px rgba(17, 17, 60, 0.7), 0 5px 15px rgba(23, 19, 19, 0.5);
  background: -webkit-linear-gradient(top, rgba(253, 148, 10, 0.2) 0%,rgba(245, 222, 55, 0.2) 60%), -webkit-linear-gradient(20deg, rgba(249, 11, 11, 0.5) 0%,rgba(239, 9, 9, 0) 35%);
width:499px;
height:340px;
  cursor: pointer;
}

.posekangeval img {
  -webkit-filter:sepia(0.2) brightness(1.1) contrast(1.3);
  transition:-webkit-filter 0.3s ease-in-out;
  position:relative; z-index:-1;
}

.posekangeval:hover { background:none; }
.posekangeval:hover img { -webkit-filter:sepia(0) brightness(1) contrast(1);
}

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

Демонстрация

Как это устроено:

CSS начинается с box-shadow правила, использующего значения inset 0px 100px rgba(0,0,20,1);. Это создает темно-синий эффект внутреннего свечения для имитации виньетки. Проблема заключается в том, что тень от этого блока появляется под изображением и охватывает всю страницу.

Для исправления это position: relative; z-index: -1; добавляется к изображению, чтобы отправить его на уровень ниже, при этом display: table; сворачивает div, чтобы соответствовать размерам изображения.

Затем первый из двух градиентов фона добавляется к родительскому элементу div создает вертикальный градиент от оранжевого до желтого. Значения rgba позволяют уменьшить непрозрачность цветов, чтобы градиент действовал как наложение цвета.

Второй градиент добавляется к родительскому div и течет от 50% до 0% красного и наклоняется под углом 20 для имитации эффекта утечки холодного света.

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

Второй вариант:

HTML

Код

CSS

Код

figure {
  box-shadow: inset 0 0 100px rgba(2, 2, 31, 0.7), 0 5px 15px rgba(14, 14, 14, 0.5);
  background: -webkit-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(241, 216, 35, 0.2) 60%), -webkit-linear-gradient(20deg, rgba(247, 11, 11, 0.5) 0%,rgba(249, 16, 16, 0) 35%);
  width: 500px;
  height: 338px;
}

figure img {
  -webkit-filter:sepia(0.2) brightness(1.1) contrast(1.3);
  transition:-webkit-filter 0.3s ease-in-out;
  position:relative; z-index:-1; }

figure:hover { background:none; }
figure:hover img { -webkit-filter:sepia(0) brightness(1) contrast(1);
}

Этот вариант идет по умолчанию, вероятно на все картинки распространяется эффект.

Демонстрация

Контраст возвращает к жизни плоское изображение, затемняя темные области и осветляя светлые области. Затем сепия добавляет к изображению желто-коричневый оттенок, но использование только 20% помогает сохранить некоторые исходные цвета.

07 Июня 2019 Просмотров: 1083 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0