Author: | agillette |
---|---|
Views Total: | 652 views |
Official Page: | Go to website |
Last Update: | March 21, 2015 |
License: | MIT |
Preview:

Description:
An ultra small CSS solution that creates Instagram style photo filters & effects using CSS3 filter
property and the :after
psuedo element. Currently supports Amaro and Brennan filters.
How to use it:
Load the required stylesheet in the document.
<link rel="stylesheet" href="style.css">
To apply the Instagram filters to the images just wrap the image into a container with the appropriate CSS class.
<div class="amaro"><img src="1.jpg"> <div class="brennan"><img src="1.jpg"></div>
You can also add more filters & effects yourself in the CSS like this.
.custom-filter { position: relative; display: inline-block; } .custom-filter img { filter: ...; -webkit-filter: ...; -moz-filter: ...; } .custom-filter:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: ...; z-index: 9; -webkit-box-shadow: ...; -moz-box-shadow: ...; box-shadow: ...; }