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;
}
Without break-word
http://www.webdesignerwall.com_title_with_a_long_url_continue_here
With break-word
http://www.webdesignerwall.com_title_with_a_long_url_continue_here
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:
gradient box
4) Links