Безкоштовний генератор коду CSS Для фільтрів у стилі Instagram

Наскільки здорово було б додати фільтри зображень на свій сайт? Багато років тому це вимагало б JavaScript, але тепер ви можете створювати власні фільтри зображень зі старими хорошими HTML і CSS.

І з webapp cssFilters вам навіть не доведеться писати будь-який код CSS!

Цей безкоштовний інструмент допомагає створювати власні фільтри зображень за допомогою фільтрів CSS3. Ви можете знайти багато посібників, які детально охоплюють властивості фільтра CSS. Але з cssFilters вам не доведеться турбуватися, як це все працює, ви просто налаштуєте свої налаштування і скопіюєте код.

У верхній частині екрана ви побачите довгу панель, повну користувальницьких фільтрів Instagram. Ці фільтри включають всі популярні варіанти, такі як Хадсон, Тостер, Інквелл, Лофі та багато інших.

Просто натисніть будь-який потрібний фільтр і натисніть кнопку “Код CSS” у верхньому правому куті. Звідти ви отримаєте як HTML, так і CSS код. Просто скопіюйте / вставте на свій веб-сайт, і ви добре йти.

Але ви також можете налаштувати ці фільтри за допомогою повзунків налаштувань. Під “генератор” на вкладці ви можете змінити такі параметри, як насиченість і контраст, а також розмиття, відтінки сірого, сепія та навіть стиль накладання, як лінійний градієнт або радіальний градієнт.

Кожен раз, коли ви переміщуєте повзунок, він автоматично оновлює код, щоб не потрібно нічого зберігати.

Ви навіть можете поміняти зображення за замовчуванням, завантаживши його з комп'ютера або вибравши його з Unsplash.

Цей webapp був створений компанією Indrashish Ghosh, і він виконує багато класів за замовчуванням, знайдених у бібліотеці CSSgram.

Але користувальницькі налаштування виходять далеко за рамки основних пресетів, а генерація вільного коду робить це зручним інструментом для кодерів і не-кодерів. У нас вже є багато генераторів CSS3 для властивостей, таких як фонові градієнти та текстові тіні. Тепер у нас є cssFilters як прем'єра генератора фільтрів зображень CSS3.