Game Development Reference
In-Depth Information
CSS, a descriptive stylesheet language
CSS (Cascading Style Sheets) allows us to easily describe web application styles through a list of rules.
CSS is often neglected or misunderstood in game development, but CSS—especially in its third version—
is a very powerful tool that you should most certainly be interested in. With CSS, we can tersely describe
styles and behaviors (like a mouse hover).
The cascading of CSS is a powerful “transversal” inherence system that allows us to easily redefine
existing styles just by providing a more accurate CSS selector. The browser defines default styles that you
can override. You can then express broad, general styles that “cascade” to many elements, and then
override these for any specific elements, as necessary.
CSS also allows us to perform animated transitions, which is often a better alternative to JavaScript
animation because it's hardware-accelerated by the render engine of the browser.
In our game, we will do exactly this, and use CSS Transitions for our page change animations.
CSS syntax
A CSS stylesheet is structured as a set of rules. A CSS rule has two main parts: a selector and one or
more declarations . Each declaration is composed of a property and a value, as shown in Figure 3-2.
Figure 3-2. Selector and declarations
A CSS property is actually a style attribute. The set value will style all elements of the page that match the
current selector in which the declaration is defined.
There are many CSS properties that you can use for different needs: font properties, color and background
properties, text properties, “box” properties, transforms properties, transition properties, animation
properties, and much, much more.
The property value is linked to the property itself. In other words, each property's value has its own syntax.
However, some domain values are defined, as follows:
Pixels . For example: 45px
Colors . For example: red , #F00 , #FF000 , rgb(255,0,0) , rgba(255,0,0,1) and hsl(0,100%,50%)
are different ways to obtain a red color
Percentages . For example: 33%
Strings in double quotes. For example: h1:before { content: ">"; } , which add a > character
before all h1 headings.
And much, much more.
 
Search WWH ::




Custom Search