DHTML CSS
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:
Header |
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.