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.

dhtml is compatible with siteground or bluehost

Comments are closed.