Welcome to another Envato Tuts+ quick tip; in today’s video we’re going to talk about Instagram filters. If you’re an Instagram user (and probably even if you’re not) you’ll be aware that it offers you various different filters which you can apply to a photo you’re uploading. Nowadays you can achieve similar results in the browser using nothing more than CSS. Let’s take a look!
Watch Screencast
Instagram.css
Instagram.css is a library, available on Github, which does all the heavy lifting for you. Download it, then add it to your web page (or as an asset pulled into a CodePen pen).
Our markup looks a little like this:
<div class="demo-container"> <figure> <img src="boat.jpg"> </figure> </div>
We have a demo-container
which we’re using purely for positioning the image centrally. The <img>
tag is wrapped in a <figure>
, and it’s to that <figure>
that we’re going to add some classes.
Adding a filter-
Class
There are currently over forty filters available, all listed on the Github page. Here are one or two examples you can try yourself in the embedded pen below:
- 1977
filter-1977
- Helena
filter-helena
- Kelvin
filter-kelvin
- Moon
filter-moon
- Poprocket
filter-poprocket
- Reyes
filter-reyes
- Sierra
filter-sierra
- Toaster
filter-toaster
- Valencia
filter-valencia
- Walden
filter-walden
How Does it Work?
If you open up the unminified version of instagram.css you’ll see that each class applies the CSS filter
property, like this for example:
.filter-1977 { filter: sepia(.5) hue-rotate(-30deg) saturate(1.4); }
Others go a step further and add blend-modes to a pseudo element positioned above the image:
.filter-amaro::before { background: rgba(125, 105, 24, .2); content: ""; mix-blend-mode: overlay; }
The values applied to filter
and mix-blend-mode
alter the channels, saturation, and brightness of the image, combining to give us the Instagram-like effects. These are pretty powerful effects too, previously only possible in the browser with SVG.
Browser Support
CSS filters are reasonably well supported in modern browsers, including the latest version of Edge (13+). IE doesn’t offer support, and neither does IE Mobile. Take a look at CanIUse for more details.
Conclusion
That’s it for this quick tip; instagram.css offers a really rapid way to apply some cool effects to your images in the browser. Go and download it, play with it, and pull it apart to apply your own filters and effects.
Learn More About CSS Blending and Filtering
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post