Use CSS3 in applications - Programming in HTML5 with JavaScript and CSS3 - page 264

Thought experiment
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.
Objective summary
■ 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
adjacent elements.
■ 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
property.
■ An element can contain a background image by setting its background-image
property.
■ CSS3 provides the ability to create shadow effects by specifying the box-shadow
property.
■ 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
relative.
■ The left and top CSS properties can be used to alter an element's position.