Game Development Reference
In-Depth Information
Specifying colors using
Hue, Saturation, and Lightness
(
HSL
) is similarly easy,
and arguably much more intuitive. Instead of using the
RGB
or
RGBA
keyword, you
simply specify a color as HSL by using the keyword
HSL
(or
HSLA
if you would like
to add the extra and optional alpha channel). Another benefit to using
HSL
over
RGB
is that
RGB
is hardware-oriented, whereas
HSL
is not.
div { background: HSL(359, 100%, 50%);
Here you specify a very bright red background color by setting the saturation to its
limit, and lighting the color half way. Remember that setting the lightness channel to
100%
will cause the color to be completely white (as a super bright light would do),
while setting it to
0%
will cause it to be completely black, as you would expect in a
dark room; for example, see the following line of code:
div { background: HSLA(359, 100%, 50%, 50%);
Alternatively, you can specify the same CSS rule with a semi-transparent look by
adding the alpha channel, and setting it to the
50%
opacity.
The hue channel of HSL is a number between 0 and 359, which represents an angle
in the color wheel, with red being 0 degrees, green being 120, and blue being 240.
Note that this number wraps (since it's an angle value), so that 360 represents the
same location in the wheel as 0. The saturation and lightness channels represent the
percentage between being fully represented, and not at all.
Media queries
Media queries allow you check for specific features of the device rendering your
HTML file. This is most commonly used in determining in real time the width and
height of the window viewing your site. A common use case for this powerful feature
is to determine whether the user is on a mobile device or not. A simple way to under-
stand media queries is to think of them in terms of conditional statements, such as,
"if the media is (…)". For example, as illustrated in the following screenshot, when a
media is at least 500 pixels wide, one set of CSS rules gets applied. When the media
is less than 500 pixels wide, an alternative set of CSS rules are used:
