1) UnOrdered List with Image

[b]Method 1: Universal Style[/b]

The simplest way to format your lists is to define a style which applies to all lists in the page. In the head of your web page, add the following code:

<style type="text/css">
ul { list-style-image: url("/images/arrow.gif") }
</style>

Syntax: list-style-type: <value>
Possible Values: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

Default Value: disc
Applies to: Elements with display value list-item
Inherited: Yes
Specifies the type of list-item marker, and is used if list-style-image is none or if image loading is turned off

Syntax: list-style-image: <value>
Possible Values: <url> | none

Default Value: one
Applies to: Elements with display value list-item
Inherited: Yes
Replaces the marker specified in the list-style-type property.

Syntax: list-style-position: <value>
Possible Values: inside | outside
Default Value: outside
Applies to: Elements with display value list-item
Inherited: Yes
Takes the value inside or outside, with outside being the default. This property determines where the marker is placed in regard to the list item. If the value inside is used, the lines will wrap under the marker instead of being indented.

Eg:

.arrow_li,
.arrow_ul li
{
    list-style-position: outside;
    list-style-image: url(image.axd?picture=/ESOLGroup/Arrow.gif);
    list-style-type: square;
}

2) Word-Wrap Property

You can specify either normal or break-word value with the word-wrap property. Normal means the text will extend the boundaries of the box. Break-word means the text will wrap to next line.

.break-word {
  word-wrap: break-word;
}

3) Cross-Browser CSS Gradient

For Webkit Browsers
{
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
}

For Firefox 3.6+
{
background: -moz-linear-gradient(top,  #ccc,  #000);
}

For Internet Explorer
{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
}

.demo_gradiant
{
background: #999; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */
}

Eg:

4) Links

• css design out of the box
• coding clean and semantic templates
• 5 simple but useful css properties
• maximize the use of hover
• jquery sequential list
• css menu list design