Game Development Reference
In-Depth Information
#myel:hover {
color: green;
padding: 10px;
/* transition-* are getted by inherence */
}
CSS Transitions allows us to make
degradable
games because CSS interpreters are nice; if they meet
unknown properties, they simply ignore them and keep working. So if a browser doesn't support CSS
Transitions, the state transition will still be executed—but without animation. Anyway, today's modern
browsers are all supporting CSS Transitions (even Internet Explorer version 10).
CSS Animations is another way to animate page elements. CSS Animations is a more “global” animation
concept for CSS, but currently it is only available on WebKit and the latest Firefox versions. It is a very
powerful tool and you should think about it for your future games development.
Transforms
CSS Transitions become even more powerful using with CSS Transforms, which allows elements to be
translated, rotated, scaled, and skewed in two-dimensional space. There is also a CSS 3D Transforms
spec, but it hasn't yet been implemented everywhere.
We will focus on CSS 2D Transforms, which provides the following two properties:
The
transform-origin
property helps you to define the center of the transformation.
The
transform
property allows you to apply transformations to selected elements. Its value can
take different transform functions at the same time. There are four significant transform functions:
translate(x, y)
,
scale(x)
or
scale(x, y)
,
rotate(angle)
, and
skew(angle)
.
For example, the following code will translate selected elements 10 pixels to the left, scale by 2 and rotate
by 45 degrees:
transform: translate(10px, 0) scale(2) rotate(45deg);
Don't forget to provide vendor prefixes.
Tip
You can directly define a transform matrix with matrix(a,b,c,d,e,f) transform
Fixing user interface for your needs
Web usage is huge, but creating dynamic and real-time games is not the primary purpose of the web.
That's why some decisions made in terms of user interface design are not very relevant for games.
However, web technologies are flexible enough to make changes and some CSS properties allow us to
redefine how the user interface behaves for our games.
First of all, avoiding text selection in games is important. A visual selection on inconvenient elements (such
as images, animated elements, transparent elements) can break the style and the professionalism of a
game. It can occur when dragging and dropping the mouse or triggering some shortcut like Select All
