Index of CSS Exercises


These pages, about CSS, are really too busy for normal websites but then, they are just exercises and demonstrations.

A pictorial background considerably reduces readability and should not normally be used. A title page (like a book cover) might be an exception. Other possibilities would be to have an image over part of a page but that would be better achieved with a separate image rather than a background. It's probably best to use a block element with a plain and contrasting colour to the text.

Unfortunately, only part of the background image is produce with a smartphone and consequently, much of the effect is lost.

Willow Positions

See the positions of block elements against a willow background

Fixed willow leaf background, linear gradient colour background and samples of static, absolute, relative and fixed block elements.

The absolute position, which is relative to the first containing ancestor whose position is not static, may be adjusted by such as left and top. It's difficult to see what use the absolute position might be ! It becomes quite a problem with different screen sizes.

The date at the top of this page is in a "position:absolute" block element and its position has been adjusted with "top: 30px; right:10px;", within the style specified in the head section.

Fixed block is fixed to the view port (screen) and is OK for small items such as for navigation up. Larger fixed blocks get in the way with small screen sizes. To help with this, the width could be set to a percentage but this will cause an increase in height of the element.

Static is the default position but cannot be adjusted.

Ivy gradients

Fixed ivy leaf background plus a coloured ellipse, also diagonal, vertical and inward gradients.

A light background of a gradient ellipse, is used in an attempt to make text easier to read but has a "mixed" success.

Text is also shadowed to improve readability against a variable background.

Ivy Dark Background

For comparison of readability

CSS3 Background Properties..... Check out the W3schools Tutorial

Property Description

background A shorthand property for setting all the background properties in one declaration

background-clip Specifies the painting area of the background

background-image Specifies one or more background images for an element

background-origin Specifies where the background image(s) is/are positioned

background-size Specifies the size of the background image(s)

CSS3 Linear Gradients

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.


background: linear-gradient(direction, color-stop1, color-stop2, ...); Linear Gradient - Top to Bottom (this is default)

The following example shows a linear gradient that starts at the top. It starts red, transitioning to yellow:

#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard syntax */ }