Discovering new features in CSS3

CSS is the presentation layer and HTML is the content layer. It defines how the HTML looks. We cannot miss CSS when we create games with HTML5, especially DOM-based games. We may purely use JavaScript to create and style the games with a Canvas element. However, we need CSS when we create DOM-based HTML5 games. Therefore, let's take a look at what is new in CSS3 and how we can use the new properties to create games.

Instead of directly drawing and interacting on Canvas' drawing board, new CSS3 properties let us animate the DOM in different ways. This makes it possible to make more complicated DOM-based browser games.

CSS3 transition

Traditionally, the style changes immediately when we apply a new style to an element. CSS3 transition renders in-between styles during the style changes of the target elements over duration. For example, here, we have a blue box and want to change it to dark blue when we do a mouseover. We can do this by using the following code snippets:

HTML:

<a href="#" class="box"></a>

CSS:

a.box {
  display: block;
  width: 100px;
  height: 100px;
  background: blue;
}
a.box:hover {
  background: darkblue;
}

The box changes to dark blue immediately when we do a mouseover. With CSS3 transition applied, we can tween the styles for a specific duration and easing value:

a.box {
  transition: all 0.5s ease-out;
}

Tip

Downloading the example code

For all the Packt Publishing books you have purchased, you can download the example code files from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

In the past, we needed JavaScript to calculate and render the in-between styles; this is much slower than using CSS3 transition because the browser natively makes the effects happen.

Note

Since some CSS3 specifications are still in the draft stage and not yet fixed, implementation from different browser vendors may have some minor differences to the W3C spec. Therefore, browser vendors tend to implement their CSS3 properties with a vendor prefix to prevent conflict.

Safari uses the -webkit- prefix. Opera uses the -o- prefix. Firefox uses the -moz- prefix and IE uses the -ms- prefix. Chrome used to use -webkit-, but now it doesn't use any prefix after switching its engine to Blink. It is a little complex now to declare a CSS3 property, such as flex, with several lines of the same rule for several browsers. We can expect the prefix to be dropped after the property spec is fixed.

In order to make the code cleaner in this book, I will use non-vendor prefix for all the properties in this book. I recommend you to use JavaScript-based libraries to automatically add the required vendor prefix for different web browsers. The prefix-free library (http://leaverou.github.io/prefixfree/) is one of them.

Alternatively, if you are using preprocessors, the compilation process may also add the necessary vendor prefix for you.

CSS3 transform

CSS3 transform lets us scale the elements, rotate them, and translate their position. CSS3 transform is divided into 2D and 3D. By combining the transform origin and 3D rotation and translation, we can animate 2D graphics in a 3D space.

CSS3 animation

CSS3 transition is one type of animation. It declares the tweening animation between two styles of the elements.

CSS3 animation is one step further in animation. We can define key frames of an animation. Each key frame contains a set of properties that should change at any particular moment. It is like a set of CSS3 transitions that are applied in sequence to the target element.

The AT-AT Walker (http://anthonycalzadilla.com/css3-ATAT/index-bones.html) shows a nice demo on creating a skeleton bone animation with CSS3 animation key frames, transform, and transition. This is shown in the following diagram: