Skip to content

Instantly share code, notes, and snippets.

@ddprrt

ddprrt/dabblet.css

Created June 11, 2012 09:59
Show Gist options
  • Save ddprrt/2909383 to your computer and use it in GitHub Desktop.
Save ddprrt/2909383 to your computer and use it in GitHub Desktop.
Download ZIP
Popart
Raw
dabblet.css
/**
* Popart
*/
img {
display: block;
}
img.third,
img.first {
float: left;
}
img.first {
-webkit-filter: hue-rotate(90deg);
filter: url('#f1');
}
img.second {
-webkit-filter: hue-rotate(180deg);
filter: url('#f2');
}
img.third {
-webkit-filter: hue-rotate(270deg);
filter: url('#f3');
}
img.fourth {
-webkit-filter: hue-rotate(340deg);
filter: url('#f4');
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<img class="first" src="https://twimg0-a.akamaihd.net/profile_images/2136418380/gravatar.jpeg"/>
<img class="second" src="https://twimg0-a.akamaihd.net/profile_images/2136418380/gravatar.jpeg"/>
<img class="third" src="https://twimg0-a.akamaihd.net/profile_images/2136418380/gravatar.jpeg"/>
<img class="fourth" src="https://twimg0-a.akamaihd.net/profile_images/2136418380/gravatar.jpeg"/>
<svg xmlns="http://www.w3.org/2000/svg" height="0">
<filter id="f1">
<feColorMatrix type="hueRotate" values="90"/>
</filter>
<filter id="f2">
<feColorMatrix type="hueRotate" values="180"/>
</filter>
<filter id="f3">
<feColorMatrix type="hueRotate" values="270"/>
</filter>
<filter id="f4">
<feColorMatrix type="hueRotate" values="340"/>
</filter>
</svg>
Raw
settings.json
{"view":"split-vertical","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