Свободен CSS код генератор За Instagram-стил филтри

Колко хладно би било да добавите филтри за изображения в сайта си? Преди години това изискваше JavaScript, но днес можете да създавате персонализирани филтри за изображения с добър стар HTML и CSS.

А с webapp на cssFilters дори не трябва да пишете никой от CSS кода!

Този безплатен инструмент ви помага да създавате собствени филтри за изображения, използвайки филтри на CSS3. Можете да намерите много ръководства, които покриват свойствата на CSS филтъра в детайли. Но с cssFilters няма да ви се налага да се притеснявате как работи всичко, просто персонализирате настройките си и копирайте кода.

В горната част на екрана ще забележите дълга лента, пълна с потребителски филтри в Instagram. Тези филтри включват всички популярни решения като Hudson, Toaster, Inkwell, Lofi и много други.

Трябва само да кликнете върху желания от вас филтър и след това да кликнете върху “CSS код” в горния десен ъгъл. От там ще получите HTML и CSS кода. Просто копирайте / поставете в уебсайта си и вие сте добре.

Но можете също да персонализирате тези филтри с плъзгачите за настройки. Под “генератор” в раздела можете да променяте настройки като насищане и контраст, както и размазване, сиво, сепия и дори стил на наслагване като линеен градиент или радиален градиент.

Всеки път, когато преместите плъзгача, той автоматично актуализира кода, така че не е нужно да запазвате нищо.

Можете дори да сменяте изображението по подразбиране, като качите такъв от компютъра си или изберете от Unsplash.

Този webapp е направен от Indrashish Ghosh и изпълнява много от класовете по подразбиране, намерени в библиотеката CSSgram.

Но потребителските настройки далеч надхвърлят основните предварителни настройки, а генерирането на свободен код го прави удобен инструмент за кодери и не-кодери. Вече имаме много CSS3 генератори за свойства като фонови градиенти и текстови сенки. Сега имаме cssFilters като премиерен CSS3 генератор на филтри за изображения.