filter.css

August 28, 2014 ยท View on GitHub

A couple CSS filter combinations to get you started.

ScreenShot

See live demo

Usage

  1. Add the filter.css file to your project.
  2. Link to the filter.css file.
<!-- In your <head> -->
<link rel="stylesheet" href="filter.css">
  1. Use a data-filter attribute 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.

Browser support

The filters are currently just -webkit prefixed. Better support will be added. Firefox seems close.