5695 Андрей Барткевич 27 Сентября 2016



Instagram фильтры чистом на CSS (CSSgram)CSS 3

Интересная CSS библиотека с множеством фильтров  в стиле Instagram, которые можно применять к изображениям на своем сайте.

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

Прежде всего нужно подключить CSS файл.
Это можно сделать, выбрав один из следующих способов:
Через CDN в разделе <head><link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">

В качестве альтернативы можно скачать CSSgram локально и подключить к проекту: <link rel="stylesheet" href="/css/cssgram.min.css">


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

Пример



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

Поддержка браузеров

Данная библиотека использует CSS фильтры и режимы Basics of CSS Blend Modes. Эти функции поддерживаются в следующих браузерах:

Google Chrome: 43+
Mozilla Firefox: 38+
Internet Explorer: Nope
Opera: 32+
Safari: 8+

Доступные классы ( фильтры )

Для использования в HTML-разметке

1977: class="_1977"
Aden: class="aden"
Brannan: class="brannan"
Brooklyn: class="brooklyn"
Clarendon: class="clarendon"
Earlybird: class="earlybird"
Gingham: class="gingham"
Hudson: class="hudson"
Inkwell: class="inkwell"
Lark: class="lark"
Lo-Fi: class="lofi"
Mayfair: class="mayfair"
Moon: class="moon"
Nashville: class="nashville"
Perpetua: class="perpetua"
Reyes: class="reyes"
Rise: class="rise"
Slumber: class="slumber"
Toaster: class="toaster"
Valencia: class="valencia"
Walden: class="walden"
Willow: class="willow"
X-pro II: class="xpro2"
Демо
Скачать
Источник

Рейтинг:

Поделится с друзьями:

Вы можете оставить свой комментарий:


98

материалов о web-разработке

1345

читателей нашего блога

15

городов и стран

96

разработанных проектов