CSSgram - Instagram фильтры на CSS
Простая до безобразия CSS библиотечка для применения фильтров к изображениям в стиле Instagram.
Реализация осуществляется за счёт использования псевдо-элементов (::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
Просмотров: 9123
Правила перепечатки
5 последних уроков рубрики "CSS"
-
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
-
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
-
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
-
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
-
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.