Бесплатный генератор кода CSS для фильтров в стиле Instagram

Как здорово было бы добавить фильтры изображений на свой сайт? Несколько лет назад для этого потребовался бы JavaScript, но в настоящее время вы можете создавать собственные фильтры изображений со старым добрым HTML и CSS.

А с веб-приложением cssFilters вам даже не нужно писать какой-либо код CSS!

Этот бесплатный инструмент поможет вам создавать пользовательские фильтры изображений, используя фильтры CSS3. Вы можете найти множество руководств, которые подробно описывают свойство фильтра CSS. Но с cssFilters вам не нужно беспокоиться о том, как все это работает, вы просто настраиваете свои настройки и копируете код.

В верхней части экрана вы увидите длинную полосу, полную пользовательских фильтров Instagram. Эти фильтры включают в себя все популярные варианты, такие как Hudson, Toaster, Inkwell, Lofi и многие другие..

Вы просто нажимаете тот фильтр, который хотите, а затем нажимаете “Код CSS” Вкладка в правом верхнем углу. Оттуда вы получите код HTML и CSS. Просто скопируйте / вставьте на свой сайт, и все готово.

Но вы также можете настроить эти фильтры с помощью ползунков настроек. Под “генератор” На вкладке вы можете изменить настройки, такие как насыщенность и контрастность, а также размытие, оттенки серого, сепия и даже стиль наложения, например, линейный или радиальный градиент..

Каждый раз, когда вы перемещаете ползунок, он автоматически обновляет код, поэтому вам не нужно ничего сохранять.

И вы даже можете поменять изображение по умолчанию, загрузив его с вашего компьютера или выбрав один из Unsplash.

Это веб-приложение было создано Indrashish Ghosh, и оно запускает многие классы по умолчанию, найденные в библиотеке CSSgram.

Но пользовательские настройки выходят далеко за рамки базовых настроек, а генерация свободного кода делает его удобным инструментом как для кодеров, так и для не кодеров. У нас уже есть много генераторов CSS3 для таких свойств, как фоновые градиенты и тени текста. И теперь у нас есть cssFilters как первый генератор фильтров изображений CSS3.