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

Фильтры 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>

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

Instagram.css

Анатолий Куликов

Анатолий Куликов

Автор блога, дизайнер, веб-разработчик
  • at sign
  • vk logo