https://github.com/simurai/filter.css

A collection of CSS filter combos
https://github.com/simurai/filter.css

css filter

Last synced: 10 days ago
JSON representation

A collection of CSS filter combos

• Host: GitHub
• URL: https://github.com/simurai/filter.css
• Owner: simurai
• License: mit
• Created: 2014-08-26T12:00:42.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2014-08-28T08:02:25.000Z (about 10 years ago)
• Last Synced: 2024-10-14T21:55:47.075Z (23 days ago)
• Topics: css, filter
• Language: CSS
• Homepage: http://simurai.com/filter.css/
• Size: 785 KB
• Stars: 135
• Watchers: 6
• Forks: 10
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
filter.css

==========

A couple CSS filter combinations to get you started.

![ScreenShot](ScreenShot.png)

> See [live demo](http://simurai.com/filter.css/)

## Usage

1. Add the [filter.css](https://github.com/simurai/filter.css/blob/master/filter.css) file to your project.

2. Link to the `filter.css` file.

  ```html

  

  

  ```

3. Use a `data-filter` attribute in your markup to add a filter.

  ```html

  

  


  ```


  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](http://simurai.com/filter.css/) 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](https://bugzilla.mozilla.org/show_bug.cgi?id=1057180).