Онлайн заработок, создание и монетизация сайтов, веб-разработка, SEO и SMO продвижение, фриланс, партнерки, полезные сервисы вебмастерам, блоггинг.

Главная » Сервисы и сайты » CSSFilters - CSS эффекты изображений на сайте быстро и легко

CSSFilters — CSS фильтры изображений для сайта

Большинство моих читателей наверняка знакомы с инстаграмом и, думаю, активно его используют для своей работы или личного фотоблога. Одной из фишек данного сервиса являются специальные фильтры, создающие разные эффекты для картинок и позволяющие сделать их «интереснее». По сути, фильтр — это набор графических правок, что применяются к изображению: затемнения по краям, изменение освещенности, усиление цвета, добавление оттенков, черно-белое фото и т.п. Инструмент похожий на фотошоп экшены только онлайн.

Сегодня хочу рассказать об интересном сервисе CSSFilters, который позволяет добавлять через CSS эффекты для картинок на вашем веб-проекте. Интеграция достаточно простая и не вызовет особых проблем. Получится такой себе аналог интсаграма с фильтром для изображений, но на сайте.

CSSFilters - css эффекты изображений

Сверху на странице находится «полоска» со всеми эффектами. При выборе определенного варианта увидите его воздействие на картинку в центре экрана. Вы можете загрузить другое фото из архива или свое. Справа найдете код для вставки на сайт. Алгоритм прост: выбираете понравившийся вариант модификации картинки, а затем используете готовый код CSS фильтра изображений для своего шаблона.

Если переключиться в закладку «Generator», то увидите множество разных настроек. С их помощью сможете подправить любой эффект под свои нужды, изменив: контраст, яркость, прозрачность, размытие, наложение цветов и т.п.

CSSFilters - настройка эффектов для фото

После установки всех параметров сервис CSSFilters выдает вам готовый код CSS фильтра изображений. Интеграция состоит из двух частей. Для HTML должен быть прописан соответствующий класс (например, filter):

<figure class="filter">
  <img src="...">
</figure>

 После этого в стилях добавляете сгенерированный CSS:

.filter {
  position: relative;
  -webkit-filter: contrast(105%) saturate(110%) sepia(6%) grayscale(34%) invert(10%) blur(1px);
  filter: contrast(105%) saturate(110%) sepia(6%) grayscale(34%) invert(10%) blur(1px);
}
 
.filter::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(0, 0, 0, 0) 70, rgba(34, 34, 34, 1));
  background: radial-gradient(50% 50%, circle closest-corner, rgba(0, 0, 0, 0) 70, rgba(34, 34, 34, 1));
}

Если у вас имеется, например, сайт на WordPress и вы хотите добавить CSS эффекты для картинок всем страницам, то смотрите в файл page.php и находите внешний контейнер функции вывода контента the_content:

<div class="post" id="post-<?php the_ID(); ?>">
 <h1><?php the_title(); ?></h1>
 <div class="entry">
  <?php the_content(); ?>
 </div>
</div>

В данном случае внешний DIV использует класс entry, поэтому вы просто меняете в примере кода выше значение filter на entry. Кстати, вордпресс автоматически добавляет для каждого поста идентификатор, поэтому с помощью id вы можете создать правило в стилях чтобы выбранные эффекты фото в CSS применялись только для конкретной заметки, например post-123. При этом помните, что у идентификаторов в стилях перед названием используется символ «#» вместо «.» (как у классов).

#post-123 {
position: relative;
  -webkit-filter: contrast(150%) saturate(110%);
  filter: contrast(150%) saturate(110%);
}
#post-123::before {
 content: "";
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(0, 0, 0, 0) 70, rgba(34, 34, 34, 1));
  background: radial-gradient(50% 50%, circle closest-corner, rgba(0, 0, 0, 0) 70, rgba(34, 34, 34, 1));
}

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

19.09.16

Категории: Web разработка, Сервисы и сайты.

Теги: , , , , , ,

1 Comment
  1. Seoonly

    Крутотенски! Спасибо

Добавить комментарий

Ваш e-mail не публикуется. Обязательные поля помечены *
Если вы комментируете впервые, то текст будет отправлен на модерацию.