HTML and CSS Reference
In-Depth Information
Next, create a style for the CSS element. Within this style, you set the width and
the height to 100px , and set the position to absolute , as you will be moving
the element to different positions on the page. You can also make the square
into a circle by setting the border-radius to 50px . You also explicitly set the top
and left positions to 0px , and the background-color to blue .
.test {
width: 100px;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
border-radius: 50px;
background-color: blue;
This will render something similar to the image shown in Figure 5-1.
Figure 5-1. Rendering of a CSS circle
Now you need to set the next state for the ball. This is as simple as creating a
new style with different properties.
.second-position {
left: 50%;
background-color: yellow;
As you can see, the new properties set the circle to be positioned in the middle
of the screen with a background-color of yellow . Add this CSS class to the test
div .
Search WWH ::

Custom Search