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 over the next few weeks.

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, contact me at trevor@itech-ed.com.