Game Development Reference
In-Depth Information
Keep in mind that, although these filters are in fact mere CSS attributes, in reality
they are each a separate function that the browser performs on the elements
matched by the CSS query. Thus, each filter function takes one or more arguments,
which, behind the scenes, are variables being passed to pre-defined shader pro-
grams.
<style>
div {
margin: 10px;
padding: 0;
border: 1px solid #ddd;
background: #fafafa;
width: 400px;
transition: all 3.3s;
filter: invert(1);
}
div:hover {
-webkit-filter: invert(0) blur(3px)
contrast(150%);
}
h2 {
margin: 0;
padding: 10px;
font-size: 4.75em;
color: #aaa;
text-shadow: 0 -1px 0 #555, 0 1px 0 #fff;
}
</style>
<div>
<h2>CSS Filters</h2>
<img src="strawberry.jpg" width="400"
height="350" />
</div>
