RichInStyle.com CSS2 tutorial - Dynamic effects

Contents

Outlines

Outlines are very similar to borders, except they do not influence box model calculations (and thus cannot cause reflow) and therefore are ideal for scripting or other dynamic purposes.

Outlines are drawn over a box just outside the border edge so that the outline is always on top and doesn't influence box positioning. They may overlap with other elements.

If an element is broken across several lines, the outline is the minimum outline that encloses all the element's boxes. For example:

+----------------------+
|Some text on one line.+--+        
|And some more on another.|
+-------------------------+

In contrast to borders, the outline is not open at inline box's end or start, but is always fully connected, and thus outlines may be non-rectangular.

Outlines are especially useful combined with the :focus and :active pseudo-classes.

Outlines are not inherited and apply to all elements.

Outline-color

This takes any valid color or invert (initial value - invert colors of pixels to ensure that the outline is visible). For example, outline-color: red.

Invert means simply reverse color values - if a pixel was #000, it would be inverted to #fff. Equally, if a pixel was #369, it would be inverted to #C96 (since a red component of 33 plus CC = FF, the maximum value of red; equally 99 + 66 = FF).

Outline-width

This takes any valid value for border-width (a length, thin, thick or medium), and is initially medium. Outline widths are the same on all sides. For example, outline-width: thick.

Outline-style

It takes any valid value for border-style except hidden (i.e., double, solid, groove, ridge, inset, outset, dotted, dashed, none), and is initially set to none. For example, outline-style: solid.

Outline

This shorthand allows one or more of the above to specified in that order. For example, A:focus {outline: thin red dashed}.

Note that, as with borders, outlines are not drawn unless the outline style is set to a value other than normal. For example, outline-style: medium; outline: thin red has no effect because shorthands set the unspecified properties to their initial value (see the section on key concepts), and therefore outline: thin red means outline: thin none red.

Cursor

This specifies the cursor that should be associated with the element.

You can specify a custom cursor, or a generic cursor. Custom cursors are specified by cursor: url(filename) (e.g., cursor: url(arrow.csr). However, you currently won't find any browser that supports this. When they do, because different platforms support different cursor formats (for example, Windows has native support for cursors in '.cur' and '.ani' formats), you can specify multiple cursors. This is done by separating each cursor by a comma. Thus to say that you should use arrow.ani (animated cursor) if possible, but failing that arrow.cur (static cursor), you should specify cursor: url(arrow.ani), url(arrow.cur). Finally you should specify a generic cursor. To specify a generic cursor you use one of the following values:

1. auto (initial value - indicating the value that the browser thinks is appropriate for that element)
2. crosshair
3. default (usually an arrow)
4. pointer (cursor indicates that the item is a link)
5. move (cursor for moving an object)
6. text (indicates that text can be selected)
7. wait (usually an hourglass)
8. help (usually a ?)
9. e-resize (cursor for resizing from the box's east corner),
10. ne-resize
11. n-resize
12. s-resize
13. se-resize
14. w-resize
15. sw-resize.

For example, P {cursor: url(cursor1.cur), url(cursor2.csr), url(cursor3.ani), pointer}.

Or simply P {cursor: pointer}.

Visibility

This can be set to visible (render the element normally) or hidden (transparent).

Its use is to hide content that is later shown by scripts - it avoids the need for reflow. For example, if a script sets an element to be visible, all pixels that were previously transparent are colored according to the element's outline-color, color, background-color and border-color declarations.

An invisible element takes up the normal amount of space, but is invisible. E.g., P {visibility: hidden}.

Visibility is inherited and is initially visible. As a result, you can specify visibility: visible to override an inherited visibiltiy: hidden. This contrasts with display: none, which cannot be overridden by descendant elements.

Block effects

Z-index

Since elements may overlap, z-index provides for the stacking order. It can be specified as an integer, or as auto (initial value). It applies only to positioned elements and is not inherited. A higher z-index means that an element goes further to the front.

There are two concepts:

1. The stacking context that a box is in
2. The stacking level for that element

Stacking contexts are stacked as a unit according to the z-index of the context.

Within a stacking context, elements are stacked in markup order.

A new stacking context is established by z-index != auto. The stacking context includes the elements and all its z-index: auto descendants.

For example, given:

<DIV style="z-index: 5; position: absolute; top: 0; left: 0">
<P style="z-index: auto; position: absolute; top: 0; left: 0">
</DIV>
<DIV style="z-index: 4; position: absolute; top: 0; left: 0">
<P style="z-index: auto; position: absolute; top: 0; left: 0">
</DIV>

the z-index: 5 places both itself and the P above the z-index 4. Note that for non-positioned elements, z-index is treated as auto.

Overflow

The overflow property specifies whether content that overflows the clipping region of a containing block should be rendered or not. By default, the clipping region of a containing block is simply the size of the containing block, but the 'clip' property can make this smaller or larger.

The overflow property determines what happens in the event of overflow of the containing block. For example, given:

<DIV>
<P style="margin-left: -10px">
Some content
</DIV>

In this example, the overflow property would specify what would happen the 10 pixels of the P element that overflow the left of the DIV.

Overflow is not inherited and applies to block boxes (such as floats, images, elements such as P or DIV, etc.).

Possible values are:

1. scroll (the content that overflows the clipping region should be viewed by using scroll bars, which should be present all of the time, even if they aren't required)
2. visible (the element's content can be rendered outside the clippin region - initial value)
3. hidden (content falling outside the clipping region is not rendered)
4. auto (browser determined, but usually that content that overflows the clipping region is viewed using scrollbars, but that, unlike scroll, those scrollbars are not always present)

Clip

This specifies that the clipping region of an element should be made smaller or larger than usual; e.g., P {clip: rect(5cm, 4px, 10px, 12px)}. The values refer to the offset of a side from the respective sides of the element's box in the order top, right, bottom, left. For example:

+--------------+
|              |
|              |
|              |
|              |
|              |
|              |
|              |
+--------------+

If you specified an offset for 'bottom' of 10 pixels, that would mean that the bottom edge of the clipping region would be 10 pixels above the bottom edge of the containing block; if you specified an offset for 'top' of 10 pixels, that would similarly mean that the top edge of the clipping region would be 10 pixels below the top edge of the containing block.

Negative lengths are permissible, but percentages are not. Also valid is auto (initial value), which is equivalent to specifying rect(0,0,0,0). e.g., clip: auto. It is not inherited and applies to block and replaced elements. Content that does not fall within the clipping region is handled according to the value of the overflow property.

The next section of this guide deals with tables.

Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.