Game Development Reference
In-Depth Information
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>
With this setup in place, our
div
element will render one particular way by default.
In this case, we only turn on the red channel on every pixel within the DOM node.
When we hover over the element, however, we apply the same shader, but with a
completely different color. This time we make every pixel look extra yellow. With the
help of CSS transitions, we can smoothly gradate those two states, giving a simple,
yet quite cozy effect. Of course, the more you know about GLSL, the more fancy and
powerful you can make these custom shaders. And as an added bonus, we don't
have to worry about all of the setup work involved in using shaders in WebGL. The
default abstraction provided by the browser is quite useful, making custom shaders
very reusable, since people using our shaders only need to keep track of a couple
of CSS attributes. Best of all, since shader programs are, at least at this CSS level,
pure text files, we can learn how other people's shaders work by inspecting their
source code. By using our custom shader, we can easily control which color chan-
nels are turned on or off at an individual pixel level, as shown in the following screen-
shot. This pixel by pixel manipulation is not only limited to images, but is rather per-
formed on each pixel of whatever DOM element we apply the filter to—text, images,
containers, and so on.
