Please visit my new campsite listing site ukcampingmap.co.uk

Archive for the ‘css’ Category

Newer Entries »

Animated navigation effect… without javascript or flash!

Monday, July 28th, 2008

I can make a ball bounce up and down in flash, and that’s about it. And my javascript is rapidly improving, but still leaves a lot to be desired, but simple animation effects using flash or javascript can really enhance a design.

For example, one of my favourite site-designs, http://www.futurelab.org.uk/ (I love the classy, formal look, aimed at senior teachers, but also with splashes of colour and animation to suggest innovation and fun), uses flash to create a subtle bouncing navigation effect.

So what’s a boy to do?

A week or so ago Sitepoint published a cute little tutorial on how to make surprising animations react to browser resizing… and the magic of it was that it only used a gif and a jpeg to achieve this. Inspired by this, I decided to make the futurelab navigation using just animated gifs, and the results are pretty good I reckon. And it only needs a couple of 1 pixel wide gifs per navigation item – less than 1kb in total. (I also only learned how to make animated gifs in photoshop this afternoon, using this tutorial).

A note of caution: my navigation items are all the same colour, so you’d think I could use the same gifs for each item… but not so. Something to do with how firefox renders animated gifs means it doesn’t animate the hover-off image if it’s used on another navigation item too. The solution is simple: make a few copies of the hover-off gif with different names.

Tags: , , , , , ,
Posted in Web development, css, layout, usability | No Comments »

Elegant 2 column layout

Thursday, June 12th, 2008

Based on a design developed by snook.ca (a great web design site), which creates a 2-column layout with the page elements in a sensible, semantic order in the source, I’ve come up with this variant, which is pretty much the same, but allows for more flexibility in header design. Seems to work ok in safari, firefox and ie all the way back to v5.01. See it in action.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Untitled Page</title>
<html>
<title>Efficient 2 column layout</title>

<style>

.wrapper {width:600px; height: 50em;background:lime;position:relative;}
.main {width:500px; float:right;height: 40em;background:red;}
.header{width:600px;position:absolute;height:5em;background:teal;top:0; left:0;}
.content {width:500px;height:40em;background:green;position:absolute; top:5em;}
.nav {width:100px; float:left; height: 40em; background:black; margin-top:5em;}
.footer {width:600px; clear:both;height:5em;background:cyan;}
</style>
</head>
<body>
<div class="wrapper">
	<div class="main">
		<div class="header">
		</div>
		<div class="content">
		</div>
	</div>
	<div class="nav">
	</div>
	<div class="footer">
	</div>
</div>

</body>
</html>

Tags: , , ,
Posted in Web development, css, layout | No Comments »

Newer Entries »