CSSgram - Instagram фильтры на CSS

Простая до безобразия CSS библиотечка для применения фильтров к изображениям в стиле Instagram.

demo

Реализация осуществляется за счёт использования псевдо-элементов (::before и ::after). Согласно данной специфике, изображение нужно обвернуть в какой-то другой элемент — лучше всего в <figure>.

Браузерная поддержка

Использование

Прежде всего нужно подключить CSS файл. Это можно сделать, выбрав один из следующих способов:

  • Через CDN в разделе <head>: <link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">
  • В качестве альтернативы можно скачать CSSgram локально и подключить к проекту: <link rel="stylesheet" href="css/vendor/cssgram.min.css">

Далее необходимо присвоить одно из названия фильтров в качестве класса.

К примеру:

<!-- HTML -->
<figure class="aden">
  <img src="../img.png">
</figure>

Если вам нужен какой-то отдельный эффект, то можете скачать и подключить только его (к примеру <link rel="stylesheet" href="css/vendor/aden.min.css">).

Фильтры

  • Aden: class="aden"
  • Reyes: class="reyes"
  • Perpetua: class="perpetua"
  • Inkwell: class="inkwell"
  • Toaster: class="toaster"
  • Walden: class="walden"
  • Hudson: class="hudson"
  • Gingham: class="gingham"
  • Mayfair: class="mayfair"
  • Lo-fi: class="lofi"
  • X-Pro II: class="xpro2"
  • 1977: class="_1977"
  • Brooklyn: class="brooklyn"
  • Nashville: class="nashville"
  • Lark: class="lark"
  • Moon: class="moon"
  • Clarendon: class="clarendon"
  • Willow: class="willow"

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://github.com/una/CSSgram
Перевел: Станислав Протасевич
Урок создан: 13 Июля 2016
Просмотров: 9200
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^