Skip to content

Instantly share code, notes, and snippets.

@SBoudrias
Created February 19, 2013 00:32
Show Gist options
  • Save SBoudrias/4982022 to your computer and use it in GitHub Desktop.
Save SBoudrias/4982022 to your computer and use it in GitHub Desktop.
Colorize black element with filters
/**
* Colorize black element with filters
* Webkit-only at the moment (Chrome Canary or Webkit nightlies)
*/
body {
background: pink;
}
div {
position: relative;
width: 100px;
height: 100px;
margin: 50px;
background: url(http://files.simurai.com/misc/svg/noun_project_745.svg) no-repeat;
-webkit-filter: invert()
sepia()
saturate(8000%)
drop-shadow(3px 3px 5px gray);
}
div:nth-child(2) {
-webkit-filter: invert()
sepia()
saturate(8000%)
hue-rotate(30deg)
drop-shadow(3px 3px 5px gray);
}
<div class="drop-shadow"></div>
<div class="box-shadow"></div>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment