|
CSS is used to style HTML elements.
Note: Most of the DHTML
examples require IE 4.0+, Netscape 7+, or Opera 7+!
Which Attributes can be Used with CSS-P?
First, the element must specify the position attribute
(relative or absolute).
Then we can set the following CSS-P attributes:
- left - the element's left position
- top - the element's top position
- visibility - specifies whether an element should be
visible or hidden
- z-index - the element's stack order
- clip - element clipping
- overflow - how overflow contents are handled
Position
The CSS position property allows you to control the
positioning of an element in a document.
position:relative
The position:relative property positions an element relative
to its current position.
The following example positions the div element 10 pixels to
the right from where it's normally positioned:
div
{
position:relative;
left:10;
}
|
position:absolute
The position:absolute property positions an element from the
margins of the window.
The following example positions the div element 10 pixels to
the right from the left-margin of the the window:
div
{
position:absolute;
left:10;
}
|
Visibility
The visibility property determines if an element is visible
or not.
visibility:visible
The visibility:visible property makes the element visible.
h1
{
visibility:visible;
}
|
visibility:hidden
The visibility:hidden property makes the element invisible.
h1
{
visibility:hidden;
}
|
Z-index
The z-index property is used to place an element "behind"
another element. Default z-index is 0. The higher number the
higher priority. z-index: -1 has lower priority.
h1
{
z-index:1;
}
h2
{
z-index:2;
}
|
In the example above, if the h1 and h2 elements are
positioned on top of each other, the h2 element will be
positioned on top of the h1 element.
Filters
The filter property allows you to add more style effects to
your text and images.
h1
{
width:100%;
filter:glow;
}
|
Note: Always specify the width of the element if you
want to use the filter property.
The example above produces this output:
Different Filters
Note: Some of the Filter properties will not work
unless the background-color property is set to transparent!
| Property |
Argument |
Description |
Example |
| alpha |
opacity
finishopacity
style
startx
starty
finishx
finishy |
Allows you to set the opacity of the
element |
filter:alpha(opacity=20,
finishopacity=100, style=1, startx=0,
starty=0, finishx=140, finishy=270)
|
| blur |
add
direction
strength |
Makes the element blur |
filter:blur(add=true, direction=90,
strength=6); |
| chroma |
color |
Makes the specified color transparent |
filter:chroma(color=#ff0000) |
| fliph |
none |
Flips the element horizontally |
filter:fliph; |
| flipv |
none |
Flips the element vertically |
filter:flipv; |
| glow |
color
strength |
Makes the element glow |
filter:glow(color=#ff0000, strength=5); |
| gray |
none |
Renders the element in black and white |
filter:gray; |
| invert |
none |
Renders the element in its reverse
color and brightness values |
filter:invert; |
| mask |
color |
Renders the element with the specified
background color, and transparent foreground color |
filter:mask(color=#ff0000); |
| shadow |
color
direction |
Renders the element with a shadow |
filter:shadow(color=#ff0000,
direction=90); |
| dropshadow |
color
offx
offy
positive |
Renders the element with a dropshadow |
filter:dropshadow(color=#ff0000,
offx=5, offy=5, positive=true); |
| wave |
add
freq
lightstrength
phase
strength |
Renders the element like a wave |
filter:wave(add=true, freq=1,
lightstrength=3, phase=0, strength=5) |
| xray |
none |
Renders the element in black and white
with reverse color and brightness values |
filter:xray; |
Background
The background property allows you to select your own
background.
background-attachment:scroll
The background scrolls along with the rest of the page.
background-attachment:fixed
The background does not move when the rest of the page
scrolls. |
