CSSgram — Instagram фильтры на CSS


Содержание

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 535f855d1d438eb3 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

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

Дизайнер, разработчик и просто хороший человек Yan Zhu выложил на GitHub проект instagram.css, в которой воссозданы фильтры для фотографий из популярной соцсети Instagram.

Поскольку это обычная CSS, то эффекты применяются к тем элементам, для которых указан необходимый класс.

Instagram.css использует autoprefixer, чтобы сделать большинство стилей совместимыми с более ранними браузерами. Для лучшей совместимости рекомендуется использовать эти браузеры:

Для работы автор советует скачать сжатый файл CSS и подключить его, после чего проставить нужные стили. Автор предлагает такую структуру для применения фильтров:

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

Автор блога, дизайнер, веб-разработчик

HTML5 web приложение с фильтрами как в Instagram. Часть 1.

В этой серии статей я расскажу как можно сделать простое HTML5 веб-приложение для обработки изображений. Пользователь может выбрать или перетащить фотографию на своём компьютере в окно браузера и применить к нему фильтры, похожие на фильтры Instagram. После применения подходящего фильтра полученное изображение может быть скачано на компьютер.

Содержание

Техническое задание

Определим краткое техническое задание для разработки.

Необходимо создать веб приложение, позволяющее накладывать фильтры на изображение. Изображение должно загружаться с компьютера с помощью перетягивания «Drag’n’Drop». Предусмотреть возможность загрузки изображения с помощью стандартного диаголового окна выбора файла.

Разрешённые форматы изображений: jpg и png. Если пользователь пытается загрузить файл или изображение другого формата, необходимо уведомить его о том, что данный тип файла не поддерживается. В целях экономии ресурсов, изображение для обработки фильтрами должно масштабироваться до 500×500 пикселей.

После выбора изображения пользователь должен увидеть список фильтров, которые он сможет применять на изображении. Фильтры не должны смешиваться.

После выбора подходящего фильтра необходимо дать возможность пользователю скачать изображение на свой компьютер. К имени скачиваемого файла должен добавлять суффикс с названием фильтра, которым он обработан. Например, если пользователь загружает файл изображения с именем avatar.jpg и применяет фильтр «vintage», то скачиваемое изображение должно быть с именем avatar-vintage.png.

Веб приложение должно быть интуитивно понятным, с ненагруженным тёмным дизайном.

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

Введение

Для написания приложения нам понадобятся средующие ресурсы:

Caman.js мощный инструмент для canvas , который позволяет применять различные эффекты и фильтры на изображение. Он поставляется с 18 предустановленными фильтрами, которые мы будем использовать в этом примере (но Вы можете создать больше, если хотите); jQuery: будем использовать версию 2.*; jQuery Mousewheel плагин для прокрутки списка эфеектов для изображений колесом мыши;

Разрабатывать приложение я буду на своей локальной машине, на которой установлена операционная система elementary OS 0.3.2 Freya (64-bit). Код я буду набирать в текстовом редакторе Sublime Text build 3114.

Для сборки проекта воспользуемся сборщиком Gulp. В качестве веб сервера будет выступать простой http сервер на node.js. В качестве препроцессора CSS будет использоваться SASS с синтаксисом SCSS. Так же, необходимо будет прогонять весь CSS код через autoprefixer, чтобы он автоматически добавлял префиксы к свойствам CSS.

Для написания javascript кода я буду использовать синтаксис ECMAScript 6. Компиляцией ECMA6 кода в ECMA5 будет заниматься Babel.

Подготовка инструментов

Создадим папку, в которой будет находиться наше приложение и перейдём в неё:

Создадим файл package.json коммандой


и установим все необходимые инструменты для работы:

Опишу подробнее, для чего нужен каждый из пакетов:

gulp лучший сборщик проектов на node.js. Поможет автоматизировать огромное количество рутинных задач, таких как компиляция из SASS в CSS, добавление преффиксов к CSS свойствам, компиляция ECMA6 и т.д. http://gulpjs.com/ gulp-sourcemaps генерирует css sourscemaps, что позволяет соотносить строки в файлах SCSS со строками уже откомпилированного CSS. Т.е. если в том же google chrome проинспектировать объект, то строки и файлы стилей будет показываться из SASS файлов, вместо откомпилированного CSS файла. https://www.npmjs.com/package/gulp-sourcemaps gulp-autoprefixer автоматически следит и добавляет необходимые префиксы к CSS свойствам. Можно писать CSS не задумываять о -webkit-, -moz и т.д. https://www.npmjs.com/package/gulp-autoprefixer gulp-sass обертка над node-sass, позволяет компилировать SASS код в CSS. https://www.npmjs.com/package/gulp-sass gulp-babel и babel-preset-es2015 gulp-babel это обёртка над Babel. А Babel с пресетами babel-preset-es2015 позволяет уже сейчас пользоваться преимуществами нового синтаксиса ECMA6, не задумываях о поддержке его браузерами, т.к. babel будет компилировать код с старый ECMA5. https://www.npmjs.com/package/gulp-babel gulp-serve простой http сервер, написанный на node.js. На нём мы будем запускать приложение. https://www.npmjs.com/package/gulp-serve

Цукерберг рекомендует:  Извлечение ссылки на изображения из элемента img

Теперь займёмся настройкой gulp со всеми, только что установленными, пакетами. Для начала создадим файл gulpfile.js:

В нём нужно описать всю логику сборки проекта gulp’ом.

Компиляция SASS

Все SASS файлы приложения мы будем хранить в папке src/scss . Откомпилированные CSS файлы будут располагаться в папке css . Основным файлом будет являться файл src/scss/app.scss . Его и нужно будет компилировать. Создадим необходимые папки и файлы:

Теперь напишем код для компиляции SCSS:

gulpfile.js

Здесь берётся файл ./src/sass/app.scss , компилируется в css, далее по этому css «проходит» autoprefixer с поддержкой 3 последних браузеров, создаётся файл app.css.map с css sourcemap, откомпилированный SASS созраняется в папку ./css/app.css . Дальнейшие правки стилей должны проводиться в файле app.scss , а не app.css .

Теперь, если написать код в файле /src/sass/app.scss для примера:

и запустим команду для компиляции sass

мы увидим, что создалась папка ./css а в ней файл app.css со уже добаленными нужными префиксами и строкой sourceMappingURL, которая указывает на файл css sourcemap.

Настройка компилятора SASS завершена.

Компиляция ECMA6 в ECMA5

Т.к. ещё не все браузеры поддерживают спецификацию ECMA6, а писать на новом удобном синтаксисе уже хочется, существует babel, который компилирует код в ECMA5, который уже поддерживают все браузеры. Другими словами ECMA5 это и есть обычный javascript, к которому мы все привыкли.

Исходные файлы javascript будут находиться с папке ./src/js и компилироваться в папку ./scripts .

Создадим папку с файлом app.js в котором будем писать весь javasctipt код приложения.

Для компиляции ECMA6 необходимо написать новую задачу в файле gulpfile.js.

gulpfile.js

При компиляции так же будет создаваться source map. На этом настройка компилятора закончена.

Настройка http сервера

Создадим точку входа в наше приложения — файл index.html и добавим в него содержимое:

Напишем задачу для запуска http сервера, всё так же в файле gulpfile.js:

gulpfile.js

Теперь, если запустить задачу gulp serve , и перейти по адресу http://127.0.0.1:3000/ можно увидеть текст «Web server works. » , который мы написали в файле index.html .

Сервер настроен и работает.

Настройка watcher

Каждый раз, когда мы будем изменять код проекта, необходимо запускать компиляцию gulp sass или gulp babel , что не очень удобно. Этот процесс можно автоматизировать и сделать так, чтобы задачи запускались автоматически, при изменении файлов. Для этого и существует watcher (наблюдатель), и он уже встроен в gulp .

Добавим новую задачу в gulpfile.js, котороя будет называться watch :

gulpfile.js

Перед выполнением задачи watch запускается наш http сервер. Далее я создаю наблюдателей для всех файлов js в папке src/js, включая подпапки, и при их изменении будет запускаться задача «babel». То же самои и для файлов scss.

Теперь, перед тем как работать с проектом необходимо запустить watcher gulp watch , и спокойно писать код.

У стандартного watchera есть некоторые недостатки, например после запуска gulp watch он не «видит» новые файлы, нужно каждый раз после создания файла перезапускать watcher. Но для наших задач подойдёт и такой вариант, т.к. целью статьи является разработка именно приложения, а не инструкцию по продвитой настройке gulp.

Действие gulp по умолчанию


Если в консоли выполнить команду gulp , то ничего не произойдёт, т.к. мы не объявили действие умолчанию. Такая задача должна называться default . Давайте создадим её, чтобы при запуске этой команды проект компилировался:

gulpfile.js

Эта команда просто вызывает другие: sass и babel.

Добавление проекта на GitHub

Как обычно, добавим в проект систему контроля версий git и добавим весь проект на github. Перед добавлением необходимо создать файл .gitignore и прописать в нём папки и файлы, которые будут исключены при добавлении в репозиторий.

.gitignore

Теперь инициализируем git, добавляем проект и делаем первый коммит.

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

На этом первая часть статьи «HTML5 web приложение с фильтрами как в Instagram» завершена. Здесь я размещу ссылку на удалённый репозиторий с текущим состоянием проекта 0d2b24a. Если у вас есть какие либо вопросы, задавайте их в комментариях. Если вы сочли статью полезной, поделитесь ею с друзьями с соц сетях, ссылки даны ниже.

CSSGram – Instagram filters with CSS

A CSS library based on blend modes to create some cool photo effects inspired to Instagram filters.

Ready to use Graphic Assets

You should try this

Create mockups in seconds, no photoshop needed.

A small but useful set of 12 vector photo icons for Sketch representing the essential camera symbols.

Free set of 12 photo icons for Sketch

OAK is a free HTML portfolio template ideal for designers, photographers and any kind of creative people who need a website for showcasing their own works.

July 22, 2020 September 12, 2020

OAK: A free HTML template for creative portfolios

Agata Bielen is a fashion magazine template designed by Adrián Somoza. It is a PSD file made of 3 screens based on a Golden Ratio grid.

Agata Bielen: Free PSD magazine template

Dairy is a new Sketch UI kit that you can use for inspiration when you need to get started with a minimal and clean photography app concept.

40 фильтров Instagram: какие выбрать, чтобы превратить фото в шедевр

Instagram позволяет создавать шедевры из не самых удачных фотографий при помощи ретуширования и фильтров. Что даёт каждый из 40 фильтров сервиса и как их лучше использовать, узнаете из гида Лайфхакера.

По умолчанию в приложении включено 23 фильтра. Чтобы подключить остальные, в конце списка с фильтрами нажмите «Управление» (Android) или «Настройки» (iOS). В открывшемся меню поставьте галку напротив тех фильтров, которые вам нужны.

1. Сlarendon

Что делает

Один из самых популярных фильтров Instagram, первоначально был доступен только для видео. Осветляет и делает цвета более интенсивными.

Когда использовать

Когда хотите сделать снимок более ярким или выделить объекты на переднем плане. Отлично подходит для снимков животных и детей.

2. Gingham

Что делает

Также ранее применялся только для видео. Немного размывает изображение, создавая лёгкий эффект «затухания». Если фотография тёмная, этот фильтр придаст ей желтоватый тон. Если светлая, сделает изображение более ярким, словно окутанным романтической дымкой.

Когда использовать


Когда хотите сделать фото в винтажном стиле. Хипстеры обожают его.

3. Moon

Что делает

Чёрно-белая версия предыдущего фильтра, только Moon чуть больше подчёркивает тени.

Когда использовать

Когда хотите «состарить» фотографию. Отлично работает с портретами.

4. Lark

Что делает

Осветляет изображение. Делает все цвета, кроме красного, более яркими.

Когда использовать

Для съёмки пейзажей и портретов на открытом воздухе. Фильтр хорошо подчёркивает красоту загорелой кожи, зелёной травы и голубого неба. Также бывает хорош для фотографий еды.

Цукерберг рекомендует:  Создание интерактивных диаграмм на PHP и FusionCharts

5. Reyes

Что делает

Один из винтажных фильтров Instagram. Осветляет изображение и уменьшает насыщенность цветов, что создаёт эффект старины.

Когда использовать

В портретных фотографиях, особенно если у модели проблемная кожа: Reyes справляется с лёгкой ретушью.

6. Juno

Что делает

Усиливает цвета, делая их более насыщенными и глубокими. Осветляет жёлтый, оранжевый и красный.

Когда использовать

Для редактирования снимков, снятых на улицах города.

7. Slumber

Что делает

Создаёт жёлтую маску, уменьшая тем самым насыщенность остальных цветов.

Когда использовать

Когда хотите придать изображению эффект старины и романтики. Хорошо работает со снимками, сделанными при естественном освещении.

8. Crema

Что делает

Добавляет насыщенность, высветляя центр и убирая лишние тени.

Когда использовать

Подходит для портретов, так как может скрыть некоторые недостатки кожи. Хорошо смотрится на снимках, сделанных на природе, где много зелёного и синего. Также часто используется для фотографий еды.

9. Ludwig

Что делает

Придаёт фото контрастности, делая тёплые тона светлее, а холодные — темнее. Подчёркивает тени и блики.

Когда использовать


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

10. Aden

Что делает

Немного приглушает цвета, делая их более пастельными. Снижает контрастность и создаёт эффект дымки.

Когда использовать

Хорошо подходит для осенних городских пейзажей, а также для портретов в ретростиле.

11. Perpetua

Что делает

Добавляет яркости, подчёркивает зелёные и жёлтые тона.

Когда использовать

Для обработки пляжных фотографий. Не рекомендуется для портретов, так как может придать коже неестественный оттенок.

12. Amaro

Что делает

Добавляет больше света: чем ближе к центру изображения, тем светлее. И чем темнее оригинал, тем больше эффект.

Когда использовать

Когда хотите немного состарить фотографию. Отлично подчёркивает красоту осенних пейзажей.

13. Mayfair

Что делает

Затемняет края, делая центр снимка более ярким.

Когда использовать

Когда хотите привлечь внимание к объекту в центре кадра. Хорошо работает со светлыми насыщенными фотографиями.

14. Rise

Что делает

Добавляет приятное мягкое освещение.

Когда использовать

Лучше всего подходит для съёмки людей крупным планом.

15. Hudson

Что делает

Смещает оттенки в синюю часть спектра и придаёт фотографии более холодный вид.

Когда использовать

Подходит для фотографирования зданий и памятников, а также зимних пейзажей.

16. Valencia

Что делает

Делает фотографию похожей на снимок из 1980-х годов.

Когда использовать

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


17. X-Pro II

Что делает

Довольно интенсивный фильтр, который делает картинку гораздо ярче, придаёт тёплые тона.

Когда использовать

Может быть использован как при съёмке в помещении, так и на улице. Не очень хорошо работает с портретами крупным планом, но неплох для съёмки модных луков.

18. Sierra

Что делает

Похож на Rise: мягкие тона, освещённый центр. Но, в отличие от Rise, делает картинку более насыщенной и глубокой.

Когда использовать

Ещё один любимый хипстерами фильтр. Лучше всего подходит для фотографий, сделанных на природе.

19. Willow

Что делает

Не просто делает фотографию чёрно-белой, но и придаёт ей матовый эффект.

Когда использовать

Для портретов и макроснимков.

20. Lo-Fi

Что делает

Делает фото более ярким и насыщенным, подчёркивает тени.

Когда использовать

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

21. Inkwell

Что делает

Превращает цветную картинку в чёрно-белую.

Когда использовать

Основной монохромный фильтр Instagram. Используйте его, если хотите сделать чёрно-белую фотографию, в которой будет много света и глубокие тени. Довольно универсален, но особенно хорош для портретов и снимков природы.

22. Hefe

Что делает

Похож на Lo-Fi, но цвета теплее и не такие драматичные.

Когда использовать

Если хотите усилить цвета, но не до такой степени, как в случае с Lo-Fi. Хорош для обработки природных пейзажей.

23. Nashville

Что делает

Придаёт изображению розоватый оттенок, одновременно осветляя всю картинку.

Когда использовать

Как и Valencia, подходит для придания фотографии винтажности.


24. Stinson

Что делает

Слегка осветляет изображение и вымывает цвета.

Когда использовать

Если снимаете портрет или фотографируетесь на пляже. Но вообще, может любому снимку придать немного ностальгический вид.

25. Vesper

Что делает

Выравнивает тон кожи. Добавляет желтоватый оттенок, что создаёт эффект старины.

Когда использовать

Портреты, портреты и ещё раз портреты!

26. Walden

Что делает

Высветляет центр изображения.

Когда использовать

Лучше всего подходит для портретов, а также других снимков, где много света. Последние Walden чуть-чуть состаривает.

27. Earlybird

Что делает

Смягчает тона, добавляет жёлтого, а благодаря эффекту сепии делает картинку слегка выцветшей.

Когда использовать

Когда хотите сделать ретроснимок со слегка затемнёнными краями. Хорошо смотрится на тематических постановочных фотографиях.

28. Brannan

Что делает

Насыщенный серый фильтр, который увеличивает экспозицию и контрастность.

Когда использовать

Если хотите увидеть, как бы выглядел ваш портрет сто лет назад. Также подчёркивает красоту морских и зимних пейзажей.

29. 1977

Что делает

Подчёркивает красные оттенки, делая при этом картинку более яркой и слегка выцветшей. Примерно так выглядели фото в конце 1970-х.

Когда использовать

Для мгновенного состаривания фотографий. Особенно хорошо смотрится на снимках, сделанных на пляже, где много солнечных бликов.

30. Kelvin

Что делает

Делает картинки более живыми и яркими, будто залитыми летним солнцем.

Когда использовать

Если хотите, чтобы фотография вызывала тёплые, приятные чувства. Прекрасно подходит для снимков, где много естественного света. Например, для фото, сделанных на рассвете или закате.


31. Sutro

Что делает

Из-за преобладания фиолетового и коричневого цветов делает картинку немного задымлённой.

Когда использовать

Если хотите придать изображению жутковатый вид. Лучше не использовать для портретов, если это, конечно, не фотографии с Хеллоуина.

32. Toaster

Что делает

Ещё один фильтр, отсылающий к фотографиям 1980-х годов. Он добавляет красноты и света в центре, затемняя края.

Когда использовать

Идеально подходит для летних фотографий с пляжа и пикников.

33. Maven

Что делает

Затемняет изображение, подчёркивает тени, добавляет немного жёлтого оттенка.

Когда использовать

Хорошо подходит для снимков архитектуры, придавая интересный эффект голубому небу и зелёному газону.

34. Ginza

Что делает

Придаёт фотографии тёплое свечение.

Когда использовать

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

35. Skyline

Что делает

Выполняет функцию, схожую с автокоррекцией в фоторедакторах: выравнивает яркость, контрастность. Придаёт снимкам глянцевый эффект.

Когда использовать

Способен преобразить любое фото.

36. Dogpatch

Что делает

Увеличивает контрастность, одновременно размывая светлые оттенки.

Когда использовать

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

37. Brooklyn

Что делает

Подчёркивает зелёные оттенки.

Когда использовать

Можно накладывать на фотографии природы. Также неплохо смотрится на снимках некоторых блюд.


38. Helena

Что делает

Выделяет оранжевый и бирюзовый цвета.

Когда использовать

Отлично подходит для портретов и пейзажей.

39. Ashby

Что делает

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

Когда использовать

Для портретов и других фотографий, которым вы хотите придать лёгкий эффект старины.

40. Charmes

Что делает

Название говорит само за себя. Фильтр придаёт фотографии шарм, увеличивая контрастность и яркость.

Когда использовать

Оживляет тусклые изображения, хорошо подходит для обработки уличных снимков.

Применяйте фильтры грамотно, чтобы собирать больше лайков в Instagram. А какими фильтрами вы пользуетесь чаще всего и почему?

Цукерберг рекомендует:  Свет в конце карьеры

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

Дизайнер, разработчик и просто хороший человек Yan Zhu выложил на GitHub проект instagram.css, в которой воссозданы фильтры для фотографий из популярной соцсети Instagram.

Поскольку это обычная CSS, то эффекты применяются к тем элементам, для которых указан необходимый класс.

Instagram.css использует autoprefixer, чтобы сделать большинство стилей совместимыми с более ранними браузерами. Для лучшей совместимости рекомендуется использовать эти браузеры:

Для работы автор советует скачать сжатый файл CSS и подключить его, после чего проставить нужные стили. Автор предлагает такую структуру для применения фильтров:

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

Автор блога, дизайнер, веб-разработчик

ez code

Просто о сложном.

Создание фильтров изображений в стиле Instagram.

В этом уроке мы сделаем небольшое веб-приложение, которое позволяет перетаскивать изображения с компьютера в окно браузера и применять к нему фильтры в стиле инстаграм. Для реализации этого мы будем использовать несколько JavaScript библиотек и плагинов.

  • Caman.js — библиотека для управления элементом canvas, которая позволяет накладывать разные фильтры на изображения. Доступно 18 фильтров, которые мы будем использовать в примере (но вы можете создать больше).
  • Filereader.js — небольшая библиотека, обрабатывающая события HTML5 drag/drop и упрощающая работу с ними.
  • jQuery Mousewheel — используется для прокрутки списка фильтров.
  • также мы используем последнюю версию jQuery.

HTML разметка фильтров

Помимо библиотек и плагинов, перечисленных выше, мы будем использовать файл script.js (о нем мы поговорим ниже). Также в заголовке страницы мы подключаем шрифт Yanone Kaffeesatz.

JavaScript/jQuery

Для того, что бы заставить наше приложение работать, необходимо выполнить несколько шагов:

  1. Принять изображение, которое перетащили в окно браузера;
  2. Создать элемент canvas размером 500×500 (можно изменить) и сохранить его в памяти;
  3. Отслеживать клики на фильтрах. Когда какой-либо выбран:
    • Создать копию элемента canvas;
    • Удалить элементы canvas на странице;
    • Добавить копию canvas к элементу #photo;
    • Если выбран фильтр, отличный от “Normal”, применить библиотеку Caman;
    • Добавить к выбранному фильтру класс “active”.
  4. Применить фильтр “Normal”


Данный пример будет работать в браузерах, которые поддерживают drag/drop. Некоторые фильтры требуют сложных вычислений, поэтому могут быть небольшие задержки перед отображением результата. Мы ограничили размер изображения 500 пикселями, но вы можете изменить это значение, как хотите.

CSSGram – Instagram filters with CSS

    Интерфейсыepta.proИнтерфейсы
  • Настрочить жалобу в спортлотоPasquale Vitiello
  • Распечатать

Похожие публикации

Color extraction effect with Vibrant.js

A Codrops tutorial about creating a little slideshow with a color palette creation effect using CSS Filters and Vibrant.js. The post Color extraction effect with Vibrant.js appeared first on Freebiesbug.

Content filter with CSS & jQuery

An awesome tutorial explaining how to create a slide-in filter panel powered by CSS and jQuery. Created by CodyHouse. The post Content filter with CSS & jQuery appeared first on Freebiesbug.

Tooltip styles collection – CSS + SVG

A collection of hover tooltip styles and effects for your inspiration. Using CSS transforms and SVG shapes we can create interesting tooltips The post Tooltip styles collection – CSS + SVG appeared first on Freebiesbug.

VSCO – CSS loader

A nice CSS loader inspired to VSCO made with few lines of HTML and CSS. Coded by Andreas Gillström. The post VSCO – CSS loader appeared first on Freebiesbug.

AniJS – A library for CSS animations

AniJS is a declarative handling library for CSS animations. The main objective is to provide a quick to develop environment. The post AniJS – A library for CSS animations appeared first on Freebiesbug.

CSSgram: Instagram Image Effects in Plain CSS

CSSgram is a tiny CSS library that allows you to apply 15 filters that you already know from Instagram to any image you want. If you like this type of image modification, you can grab it without hesitating. Using neat image effects doesn’t get easier than that.

CSSgram: 1kb Small Powerhouse for Your Images

Una Kravets from Austin, Texas is responsible for the small image effect powerhouse. CSSgram is distributed under the liberal MIT license, which means it’s free for private and commercial use and can be downloaded on Github. The CSS library is in active development that is, however, currently slowing down due to a small attack on the repository. This only affects the future perspectives, though. The CSS library as is works really well and reliably with its current equipment of 15 filters.

You already know the provided filters from Instagram. If you like the vintage look of the default Instagram filters, CSSgram is the flexible filter engine for your website images. CSSgram uses CSS Filters and CSS Blend Modes, so you can already imagine that it doesn’t work with all browsers. It does work perfectly fine on Chrome starting from 43, Firefox from 38 and up, Opera from 32 and Safari starting from 8. The Internet Explorer is excluded. However, this is no big deal, as the worst case scenario is that a filter is not applied to the image and the image is displayed in original state.

On the project website, you can view the filters in all their glory and see the difference between original and filter instantly on hover. Here are some of the available effects applied to an example image:

CSSgram: It’s This Easy to Apply a Filter

Even when your are not a webdesigner but more of an ambitious site operator, you won’t face any problems when using CSSgram. First you need to integrate the library into your project. It works like this:

That’s almost it. Now all you need to do is equip the respective image with a class that defines the filter, like this:

When you want to restrict yourself to one effect only, you can use an even smaller CSS library that only provides this one effect, e.g.:

CSSgram also offers another flavour for those that prefer Sass. Here, effects are defined via @extends. The Sass variant also offers single files per effect.

In the end, I cannot bring forward anything against using CSSgram for pretty image effects. Let Photoshop be Photoshop and filter a couple neat images. This is easy, fast and non-destructive. Have fun!

Instagram Photo Filters In Pure CSS – Instagram.css

Author: picturepan2
Views Total: 2,104
Official Page: Go to website
Last Update: November 18, 2020
License: MIT

Preview:

Description:

Yet another CSS library which applies 40+ Instagram inspired filters to your images.

How to use it:

Import the instagram.css library into your html document.

Apply the following filters to your images.

  1. 1977 filter-1977
  2. Aden filter-aden
  3. Amaro filter-amaro
  4. Ashby filter-ashby
  5. Brannan filter-brannan
  6. Brooklyn filter-brooklyn
  7. Charmes filter-charmes
  8. Clarendon filter-clarendon
  9. Crema filter-crema
  10. Dogpatch filter-dogpatch
  11. Earlybird filter-earlybird
  12. Gingham filter-gingham
  13. Ginza filter-ginza
  14. Hefe filter-hefe
  15. Helena filter-helena
  16. Hudson filter-hudson
  17. Inkwell filter-inkwell
  18. Kelvin filter-kelvin
  19. Kuno filter-juno
  20. Lark filter-lark
  21. Lo-Fi filter-lofi
  22. Ludwig filter-ludwig
  23. Maven filter-maven
  24. Mayfair filter-mayfair
  25. Moon filter-moon
  26. Nashville filter-nashville
  27. Perpetua filter-perpetua
  28. Poprocket filter-poprocket
  29. Reyes filter-reyes
  30. Rise filter-rise
  31. Sierra filter-sierra
  32. Skyline filter-skyline
  33. Slumber filter-slumber
  34. Stinson filter-stinson
  35. Sutro filter-sutro
  36. Toaster filter-toaster
  37. Valencia filter-valencia
  38. Vesper filter-vesper
  39. Walden filter-walden
  40. Willow filter-willow
  41. X-Pro II filter-xpro-ii
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих