A couple CSS filter combinations to get you started.
See live demo
- Add the filter.css file to your project.
- Link to the
filter.cssfile.
<!-- In your <head> -->
<link rel="stylesheet" href="filter.css">- Use a
data-filterattribute in your markup to add a filter.
<!-- In your <body> -->
<div data-filter="Eureka"></div>List of available data-filter names.
- Eureka
- Karl
- Rocky
- London
- FlipFlop
- Introvert
- Butterfly
- Gold
- Copper
- Silver
- Night
- LoFi
Or you can just grab individual filter styles on the demo page and use it in your own CSS file.
Also feel free to tweak the numbers to better match your image/content.
The filters are currently just -webkit prefixed. Better support will be added. Firefox seems close.