CSS3 Examples

CSS ZOOM

Written by jon on 12:17 AM This property controls the magnification level for the current element. The rendering effect for the element is that of a “zoom” function on a camera. Even though this property is not inherited, it still affects the rendering of child elements.

Example

div { zoom: 200% } <div style=”zoom: 200%”>This is x2 text </div>

Possible Values

Value Description normal No magnification is applied. The object is rendered as it normally would be. [number] Positive floating point number indicating a zoom factor. Numbers smaller than 1.0 indicate a “zoom out” or size reduction effect, while numbers greater than 1.0 indicate a magnifying effect. [percentage] Positive floating point number, followed by a percentage character (”%”) which indicates a zoom factor. Percentages smaller than 100% indicate a “zoom out” or size reduction effect, while numbers greater than 100% indicate a magnifying effect.

CSS BEHAVIOR

Written by jon on 12:16 AM The Behavior property specifies one or more space separated URLs indicating script(s) to attach to a CSS selector. Behaviors allow the default functionality of a given element to be extended. Using simple CSS syntax that allows script to be separated from style and content, CSS behaviors offer a fairly elegant and efficient way to re-use script code.

Example

blockquote { behavior: url(hilight.htc) url(#behaveBinObject) } <blockquote style=”behavior: url(hilight.htc) url(#behaveBinObject)”>Some text</blockquote>

Possible Values

Value Description [Script URL] Provides an absolute or relative URL reference to the Behavior. [#Object ID] The Behavior is a binary implementation. This syntax consists of a pound sign (”#”) followed by an OBJECT element ID within the document that instantiates the binary implementation. [Default Behavior] Quite a few default behaviors ship with Internet Explorer 5.0. This syntax allows each default behavior to be easily referenced.

CSS FILTER

Written by jon on 12:14 AM This property creates an extensible mechanism allowing special visual effects to be applied to content. There are currently three categories of filters - Visual filters and Reveal/Blend Transition filters. Multiple filters can be applied to a selector to produce interesting results, with the order of application often playing an important role in the final visual result. Current filters only apply in a visual context, but the extensibility of the property could allow for other capabilities.

Example
img { filter: blur(strength=50) flipv() }


Possible Values

CSS CURSON

Written by jon on 12:13 AM This property controls the type of cursor that is used when a pointing device is over an element. Accepts a comma separated list of the below values. Browsers should attempt to first use the cursor indicated on the left, working to the right until it has a cursor it can use.
Note: Although the CSS spec says that this property is inherited, there are some cases in browsers where it is not explicitly so. Some elements that use a different default cursor (eg: hyperlinks, text entry elements) will override the parent cursor type by default unless explicitly set to “inherit”.

Example

blockquote { cursor: help } <blockquote style=”cursor: help”>This is some text</blockquote>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. default Browser default cursor. Often an arrow. auto Browser determines what cursor to display according to context. [URL] URL of a custom cursor to be used for the specified selector. If multiple URLs are listed for a cursor, the leftmost one is used. If that is not available, an attempt is made for the the next one indicated to the right, and so on. If none of the URL-defined cursors can be used, a generic cursor indicated at the end of the list is used. n-resize ne-resize e-resize se-resize s-resize sw-resize w-resize nw-resize Used to indicate when an edge of a box is to be moved/re-sized. Values represent directions relative to up/north. crosshair Usually resembles a plus sign ('+'). pointer Used to present an actively selectable element, such as a hyperlink. move Used to indicate when something is movable. text Used to indicate that content is selectable. Often represented using an I-bar. wait Used to indicate that the user must wait because the program is busy. Usually represented by an hourglass or clock. help Used to indicate that help is available for the element. Often represented as a question mark or balloon. hand Use a hand icon. all-scroll Use an up/down/left/right arrow with a dot in the middle. Used to indicate that content can be scrolled in any direction. col-resize Used to indicate that a column can be horizontally re-sized. Represented with a vertical bar in the middle of two arrows pointing in opposite left/right directions. row-resize Used to indicate that a row or item can be vertically re-sized. Represented with a horizontal bar in the middle of two arrows pointing in opposite up/down directions. no-drop Used to indicate that a dragged item cannot be dropped at the current cursor position. Represented as a hand next to a small circle with a slash through it. not-allowed Used to indicate that a requested action can not be performed. Represented as a circle with a slash through it. progress Indicates that a process is running in the background, which will not affect user interaction with the system. Represented as an arrow with an hourglass next to it. vertical-text Used to represent editable vertical content. Represented as a horizontal I-bar. alias Use a cursor to indicate a shortcut or alias to another object. Often represented as an arrow with a small curved arrow next to it. cell Used to indicate that one or more “cells” (as in a spreadsheet) may be selected. Often rendered as a thick plus-sign, possibly having a dot in the middle. copy Used to indicate that content will be copied. Often rendered as an arrow with a small plus next to it. count-down Used to indicate a “count-down” operation by a program. count-up Used to indicate a “count-up” operation by a program. count-up-down Used to indicate a program is “counting-up” and “counting-down” in succession operation in a program. grab Used to indicate that content is “grabbable”. Often rendered as an open hand. grabbing Used to indicate that content is in the act of being “grabbed”. Often rendered as a closed/clenched hand. spinning Used to indicate that processing is being done by the program. Slightly different from the ‘wait' value - ‘wait' should indicate that no user interaction with the program is possible while the cursor is in that state, whereas 'spinning' indicates that the user may still interact with the program. Sometimes rendered as a spinning, striped ball.

CSS ACCELERATOR

Written by jon on 7:16 AM This property is a strange and very specific Microsoft beast. Microsoft, beginning in Windows 2000, has the ability to turn off its system underlines for accelerator keys until the ALT key is pressed (then the accelerator underline hint is displayed.) This property should have no effect in previous Microsoft OS versions, and if this system capability is turned off (or “on”, depending on how you look at it), it will also have no effect.
While this works for underlined elements (the HTML “U” element), it also seems to work for any element, although a different pseudo-underline color seems to be generated in such cases.

Example

u { accelerator: true } <div><u style=”accelerator: true”>H</u>elp </div>

Possible Values

Value Description true The element contains an accelerator key sequence. false The element does not contain an accelerator key sequence.