HTML and CSS Reference
Creating a moving HTML element
In this thought experiment, apply what you've learned about this objective. You can
find an answer to this question in the “Answers” section at the end of this chapter.
Create the styles and scripts to make an HTML object move across the page. This is
seen in many webpages today with banner or ticker controls that display informa-
tion moving across the screen. Using what you know about setting and changing
the position of an object with CSS, create a moving HTML element.
■ Every HTML element is a box and has the properties of a box such as height and width.
■ CSS3 allows you to change the size of a box by specifying a new height and width.
■ CSS3 allows you to style box properties in the following ways:
■ The border-style property allows you to specify a solid or dashed line for the border.
■ The border-color property allows you to specify the color of the border.
■ The border-spacing property allows you to specify the amount of space between
■ The border-width property allows you to specify a thickness for the border.
■ Each side of the box can by styled differently.
■ CSS3 provides a way to define the padding and margin that a box should have relative
to adjacent elements. This can be configured differently for each side of the box.
■ An element can be made transparent or partially transparent by setting the opacity
■ An element can contain a background image by setting its background-image
■ CSS3 provides the ability to create shadow effects by specifying the box-shadow
■ CSS3 provides the ability to clip images using the clip property to show only a portion
of an image.
■ CSS3 can be used to establish an element's position as either fixed, absolute, or
■ The left and top CSS properties can be used to alter an element's position.