Andy Budd on CSS, usability and stuff like that:

But I do think that in this world where I've got a PS3 at home that performs live texture-mapping rendering in 3D, on the fly, why we can't get a browser that can render rounded corners on a box in 2008. You know, we should all have jet packs here! A rounded corner box or multiple background images shouldn't be rocket science.

Rest of the article here..

CSS Menu with slider using Prototype.js

This little example shows how to make really simple and yet very nice CSS Menu with slider.

Example

Part 1 - HTML

<div id="menu">
	<div id="m-top">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">F.A.Q.</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
	<div id="m-slider">
		<div id="slider"></div>
	</div>
</div>	

Part 2 - Javascript

Now we add Javascript event that listen for mousemove on div that holds menu.

window.onload=function(){

	var offsetLeft=$('menu').offsetLeft;

	Event.observe('menu', 'mousemove', function(event){

		coordinateX=Event.pointerX(event)-offsetLeft;
		$('slider').style.marginLeft=coordinateX-20+'px';

	});

}

Part 3 - CSS

Here you can see the CSS file that is used for this example.

Download

slider.html
slider.css
helper.js
prototype.js (1.5.1)

Pure CSS Menu - light, fast, easy to make, SEO Friendly

This is my favorite technique for making CSS rollover menus. Its a combination of image replacement technique, and pure CSS list menus.
There is no javascript, and beneath it is valid XHTML code, so you don't need to worry about SEO performance.

Example

How to make your own

Ok, here is how you make this kind of menu - it's actually really simple:

First you must make your background image:

Please note that this is one image, and not two separate images.
If your menu is 400px by 50px background image should be 400px by 100px. Upper half of picture is background for normal state, and lower half is for rollover.

HTML Code

<div id="main-nav">
	<ul>
		<li><a href="#" class="home"><span>Home</span></a></li>
		<li><a href="#" class="about"><span>About us</span></a></li>
		<li><a href="#" class="faq"><span>F.A.Q.</span></a></li>
		<li><a href="#" class="contact"><span>Contact</span></a></li>
	</ul>
</div>

Now apply this CSS code, and there you have it - pure css rollover menu.

MGraph - Ajax based graph, updated to v0.95

Hey hey, There is a small but nice update to Ajax MGraph. After some thinking I've decided to add a space for user note. You can easily pass HTML as note text, so you could add link to some data, or some small image .. or whatever...

New features

• Added option to add a note
• Added transparency on graph bars
• Visual style changed

I'm really satisfied with feedback I'm getting on MGraph, so I'll continue to make improvements, stay tuned for more!

• Demo
• Download (zip, 14KB)
• Old version

After some thinking I've decided to provide an alternative to horizontal tabs.

Behold - a vertical tabs

All HTML and Java script are same, only css is changed.

If you have any ideas about myTabz please please feel free to leave a comment.

• Vertical demo
• Horizontal demo
• Download and setup instructions

Ajax Graph based on Prototype.js

Note: Updated to v.0.96 on January 16. 2008

Note: Updated to v.0.95 on April 10. 2007

For one of my projects, i needed simple graph to represent data for a single year by months.
I came up with this solution, and decided to make free version.

For now it has few limitations (only positive numbers, only integers), but ill fix those in next few days...

• Demo
• Download (zip, 14KB)