Web coding workshop

Projects in one or another state of progress

fix space here

CSS buttons

No gifs, no gadgets, no background images, just cascading stylesheets. I'm a dabbler, but this seems like the way to go. Faster loads, fewer chances for broken links.

This is a space for experimenting. I publish it as a way to share progress – and problems – with friends and fellow travelers. Yes, that includes folks who may be able to help me unravel a few of those problems.

New nav bar V1


Depending on your browser, you should see buttons with rounded corners – created using the CSS3 border-radius property.

Right now, they render correctly in Firefox and Safari. An Internet Explorer test is still pending.

The buttons should also change from gray to white when you mouse over them. The CSS pseudo-selector a:hover (in this case {background-color: #FFFFFF; }) may not work in all browsers. Worst case: You have buttons that aren't dynamic with right-angle corners.

repeat nav bar V1







File folder corners

More fun with border-radius:

Shadow test

With the box-shadow applied to the li.

Browse by year

Vertical nav buttons

Browse by year

Brown buttons, right-angle corners

This version helped me uncover a problem with a:hover rendering only in Safari. It turns out Firefox wants a real hex value for color and I had lazily typed "white" in the gray-to-white buttons above. Argh.

Photo archives