HTML and CSS Reference
In-Depth Information
.trees
{
position
:
absolute
;
background
:
url(images/tree.png)
repeat 0 0
;
}
Note that almost all of the elements are absolutely positioned on the game's canvas.
Positioning the elements relatively would be impossible for our purposes, especially because
we want the game to be as
responsive
as possible (within limits, of course — the minimum
width that I deal with is 640 pixels). We can write a general rule giving all of the DOM elements
in the game an absolute position:
#wrapper *
{
position
:
absolute
;
}
This snippet will handle all of the child elements inside the
#wrapper
div, and it frees us from
having to repeat code.
One more word about the CSS. The animations in the game are done with
CSS3 transitions
and animations
, excluding certain features such the lightboxes and player “teleporting.”
There are two reasons for this.
The first is that one of the purposes of this portfolio is to demonstrate innovation and
up-to-date development, and what's more innovative than using the power of CSS3?
The second reason is performance. Upon reading Richard Bradshaw's very interesting article
“
Using CSS3 Transitions, Transforms and Animation
,” I came to the overwhelming
5
conclusion:
use CSS3 when you can
.
A great example of the power of CSS3 animations in my portfolio is the pattern of movement
of the water. The CSS looks like this:
.sea
{
left
:
0
;
width
:
100%
;
height
:
800px
;
background
:
url(images/sea.png)
repeat 0 0
;
-webkit-animation
:
seamove 6s linear infinite
;
/* Webkit support */
