I always loved those retro and classy filters of Instagram, later after the release of Retrica and Candy like camera apps make a trend of having filtered images. Right now they are much more popular on social media due to flat and light gesture on image and image looks much more pretty. This is a fine tutorial to apply filters on <img> tag.
Step 1: Install Library
The library has its own CDN, which I prefer to use. Just add the following line after <head> tag and you are ready to use it.
<link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">Step 2: Setup markup
The plugin works when img tag is under figure tag and figure tag holds the class of that specific filter to be applied.
<figure class="_1977">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgPn7XcdXah97z2aLIruPN6gP0fm-BN3kWwD_HEDD4-47M56XAMubVon7xEWz1F2IkGstp-5pal9YPcGBoyNM_aesEJ7LxxnM7kZ-2af1OxVPl_VTImbja0vmZxwEoHPD90CWAyg-qshc/s1600/N4.png'/>
</figure>
Step 3: Add Class
The following is class list for filters.- 1977: class="_1977"
- Aden: class="aden"
- Brooklyn: class="brooklyn"
- Clarendon: class="clarendon"
- Earlybird: class="earlybird"
- Gingham: class="gingham"
- Hudson: class="hudson"
- Inkwell: class="inkwell"
- Lark: class="lark"
- Lo-Fi: class="lofi"
- Mayfair: class="mayfair"
- Moon: class="moon"
- Nashville: class="nashville"
- Perpetua: class="perpetua"
- Reyes: class="reyes"
- Rise: class="rise"
- Slumber: class="slumber"
- Toaster: class="toaster"
- Walden: class="walden"
- Willow: class="willow"
- X-pro II: class="xpro2"
Optional Step: Dynamically add classes using Javascript
Not necessarily that you can add class or enclose each image by code, you can use the code below to enclose every image in figure tag as well as add a class on it.
(function() {
var e = document.querySelectorAll('img');
for (var i = 0; i < e.length; i++) {
var wrapper = document.createElement('figure'),
myDiv = e[i];
wrapper.setAttribute('class', '_1977');
wrapper.appendChild(myDiv.cloneNode(true));
myDiv.parentNode.replaceChild(wrapper, myDiv);
}
})();
Post A Comment:
0 comments: