Coding: CSS: Effects
Some of the CSS features can be used for dynamic effects.
Read Chapter 12: Dynamic Effects with Styles by Elizabeth Castro in HTML, XHTML, & CSS, Sixth Edition.
Element Positions
You can define the position of elements on the page use the following properties.
Positioning
Use the positioning property to place an element on the page. Then set values to absolute, relative, or fixed.
Sample 1 - an example of absolute positioning using a <div> tag (although any tag could have been used)
Sample 2 - an example of absolute positioning using a <div> tag without any text but with some styles applied
Sample 2a - demo
Sample 2b - demo
Sample 2c - demo
Sample 3 - an example of relative positioning; note the use of "top" (to indicate distance from the top of where the element would normally occur)
Sample 4 - an example of relative positioning; note the use of "top" with a negative number
Sample 5 - an example of relative positioning; note the use of "top" and "left" (to indicate distance from the left of where the element would normally occur)
Sample 6 - here is what Sample 5 looks like without the relative positioning
Stack Order
Use the z-index property to determine the stack order of overlapping elements. Then set values to a number. The higher the number, the higher the element.
Sample 1 - because the overlapping elements are positioned absolutely, "padding-top" was used to push the first paragraph down
Sample 2 - because the overlapping elements are positioned absolutely, "padding-top" was used to push the first paragraph down
Sample 3 - note the use of id ( # ) instead of class ( . )
Vertical Alignment
Use the vertical-align property to align an element vertically within an element. Then set values to baseline, sub, super, top, text-top, middle, bottom, text-bottom, %.
Sample 1 - top, middle, and text-bottom vertical alignment are demonstrated
Visibility
Use the visibility property to determine the visibility of an element. Then set the value to visible or hidden.
Sample 1 - the floating element has been rendered invisible, but note that the vacated space remains
Overflow
Use the overflow property to determine the visibility of an element when the content inside an element exceeds the width and height properties. Then set the value to visible, hidden, scroll, or auto.
Sample 1 - the "height" given is not enough for the text; the "overflow: auto" allows a scrollbar to appear where necessary
Using CSS Creatively
Explore the following examples to use CSS creatively:
columns - these two columns are created with absolute positioning
navigation panel - this type of navigation panel was formerly achieved by using a two-frame frameset
navigation panel - another version of the navigation panel
banner - this horizontal banner bar can hold text or images
banner - a banner can also be used as a divider
banner - an example of a vertical navigation banner
pop-up text - you can use the "cursor" property along with the "title" attribute in the element's tag to create helpful pop-up text
table-free layout - here is an example of the layout once achieved only by invisible tables
table-free layout -- another example of layout without tables
horizontal message box - make a permanent fixture
vertical message box - make a permanent fixture
stacked horizontal message boxes - be true to your school(s)
stacked horizontal message boxes - be true to your school(s)
first letter and first line pseudo-classes - some more pseudo-classes