Monday, 29 December 2008

Final CSS tips

Just to finish the year, I thought I'd complete this article - although, since I started publishing it, I have come up with quite a few more. Anyway, as I've said before, while I've been designing Web sites recently - to W3C standards I might add - I have put together some CSS tips that I'd like to share with you.

18 Simple 3D link button effect

HTML

<a href="#">LINK</a>

CSS

a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}
a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

19 CSS buttons with mouseover effects

CSS

div#buttonA {
margin-left: 10px;
margin: 0px;
padding: 0px;
font-family: arial;
font-size: 8pt;
color: #fcfcd5;
font-weight: bold;
list-style-type: none;
height: 24px;
width: 150px;
margin: 2px;
text-align:center;
}
div#buttonA a {
display: block;
text-decoration: none;
font-weight: bold;
border-width: 6px;
}
div#buttonA a:link {
color: green;
font-weight: bold;
background-color: #fcfcd5;
border-style: outset;
}
div#buttonA a:visited {
color: green;
font-weight: bold;
background-color: #fcfcd5;
border-style: outset;
}
div#buttonA a:hover {
font-weight: bold;
color: #fdd017;
background-color: #fcfcd5;
border-style: outset;
}
div#buttonA a:active {
font-weight: bold;
color: red;
background-color: #fcfcd5;
border-style: inset;
}

HTML

<div id="buttonA">
<a href="index.htm" onmouseover="window.status='Home page';return true;" onmouseout="window.status='Elegant Solutions';return true;">Home page</a>
</div>

This repeats for the other buttons.

20 Table that highlights lines on mouseover

HTML

<table id="hilite-table" summary="Retirement age for women">
<thead>
<tr>
<th scope="col">Date of birth</th>
<th scope="col">Pension age</th>
<th scope="col">Pension year</th>
</tr>
</thead>
<tbody>
<tr>
<td>April 1950</td>
<td>60yrs 1mth</td>
<td>2010</td>
</tr>
<tr>
<td>October 1950</td>
<td>60yrs 7mths</td>
<td>2011</td>
</tr>
<tr>
<td>April 1951</td>
<td>61yrs 1mth</td>
<td>2012</td>
</tr>
</tbody>
</table>

There are more entries in the table than shown - but you get the idea.

CSS

#hilite-table
{
font-family: arial;
font-size: 12px;
font-weight: bold;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
}
#hilite-table th
{
font-size: 13px;
font-weight: normal;
padding: 8px;
background: green;
border-top: 4px solid green;
border-bottom: 1px solid green;
border-right: 1px solid #f5f5dc;
border-left: 1px solid #f5f5dc;
color: gold;
font-weight: bold;
}
#hilite-table td
{
padding: 8px;
background: #f5f5dc;
border-bottom: 1px solid green;
color: green;
border-top: 1px solid green;
border-right: 1px solid green;
border-left: 1px solid green;
vertical-align: top
}
#hilite-table tr:hover td
{
background: green;
color: gold;
font-weight: bold;
}

Have a happy New Year.

By the way: anyone looking for an experienced technical writer or Web designer can contact me at trevor@itech-ed.com.

If you need anything written, contact Trevor Eddolls at iTech-Ed.
Telephone number and street address are shown here.