Фильтры Instagram для вашего сайта

Дизайнер, разработчик и просто хороший человек Yan Zhu выложил на GitHub проект instagram.css, в которой воссозданы фильтры для фотографий из популярной соцсети Instagram.

Поскольку это обычная CSS, то эффекты применяются к тем элементам, для которых указан необходимый класс.

Instagram.css использует autoprefixer, чтобы сделать большинство стилей совместимыми с более ранними браузерами. Для лучшей совместимости рекомендуется использовать эти браузеры:

• Chrome (18+)
• Microsoft Edge (13+)
• Firefox (35+)
• Safari (6+)
• Опера (15+)

Для работы автор советует скачать сжатый файл CSS и подключить его, после чего проставить нужные стили. Автор предлагает такую структуру для применения фильтров:

<figure class="filter-[filter-name]">
  <img src="assets/img/instagram.jpg">
</figure>

Все примеры работы библиотеки с фильтрами можно посмотреть здесь. А некоторые — прямо тут, у меня.