Game Development Reference
In-Depth Information
CSS shaders
Currently, this is the absolute latest feature added to CSS. The original idea behind
CSS shaders was to allow a designer to use GLSL shaders to render arbitrary HTML
elements. Instead of simply specifying an element's background color, border style,
box shadow, and so on, we can now take care of how each pixel of an element is
rendered.
More recently, this feature was merged into the existing CSS filters spec, which spe-
cifing a handful of pre-baked filters that we can apply to an element. For example, we
can apply a blur filter to an image element, letting the browser process the image dy-
namically, as it gets served from the server to the web application. However, instead
of relying only on whatever filters a browser decides to make, we can now cook our
own filters and have the CSS rendering engine use those. Thus, the current name of
this new CSS API is (for now, anyway)
custom CSS filters
.
Using CSS filters is pretty easy. After all, they are nothing more than a regular CSS
property. As of this writing, there are
nine
different filters that we can apply, not only
to images, but also to anything that can receive CSS styling. If a filter is added to an
element with one or more children nodes in it, as is the nature of CSS, the filter effect
will cascade down to any and all child elements, unless one or more of them specify
their own filters, or deliberately specify that no filtering should be applied to it and its
children.
The current list of CSS filters that can be used are as follows:
•
blur
: Applies a Gaussian blur
•
brightness
: Increases the brightness of the element by applying more
or less white color
•
contrast
: Adjusts the contrast of the element
•
drop-shadow
: Applies a drop shadow effect to the element
•
grayscale
: Converts the colors of the element into grayscale
•
hue-rotate
: Applies a hue rotation in degrees based on a color circle
•
invert
: Inverts the colors of the element
•
opacity
: Applies transparency to the element
•
saturate
: Increases the saturation of the element
•
sepia
: Converts the colors of the element into sepia
