Skip to content

Instantly share code, notes, and snippets.

@ayapi
Last active December 29, 2015 10:18
Show Gist options
  • Save ayapi/7655696 to your computer and use it in GitHub Desktop.
Save ayapi/7655696 to your computer and use it in GitHub Desktop.
Polyfilter example - Difference between Webkit and Mozilla This has been fixed in v0.3.2. https://github.com/Schepp/CSS-Filters-Polyfill/issues/15
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Embedded Stylesheet</title>
<link rel="stylesheet" href="../assets/common.css">
<!-- Embedded stylesheet -->
<style>
/* Filter definitions */
.filter1 {
filter: invert(1);
}
.filter:hover {
filter: none;
}
</style>
<!-- -->
</head>
<body>
<h1>Embedded Stylesheet</h1>
<p>Stylesheet is embedded via <code>&lt;style&gt;</code></p>
<ul>
<li>
<h2>filter: invert(1);</h2>
<div class="box filter filter1">
<img src="../assets/picture.jpg" width="300" height="258" alt="">
<div>
<h3>Headline</h3>
<img src="../assets/picture-small.jpg" width="200" height="119">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>
</li>
</ul>
<script>
// this is important
var polyfilter_scriptpath = '/CSS-Filters-Polyfill/lib/';
</script>
<script src="../../lib/contentloaded.js"></script>
<script src="../../lib/cssParser.js"></script>
<script src="../../lib/css-filters-polyfill.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment