Hi there! Sorry for the lack or posts. I recently started a new job and have been preoccupied with that. Anyhoo, I'm in the middle of writing a new tutorial for a snazzy menu system. Stay tuned. Oh, and kudos to my new Twitter followers!

Eight harsh truths for clients about web design

Eight harsh truths for clients about web design

Every now and then we all have to deal with a client who has ‘interesting’ ideas for their web site. You know the type – the guy who wants an animated background, or the girl who insists on having all the text coloured light grey on a white background at 10 points. When it comes to web design, I’m a firm believer in the philosophy that the client is rarely if ever right. I justify this seemingly obtuse position like this: Would you tell a pilot how to fly an aeroplane? Or tell a mechanic how to fix your car? Of course y...

keep reading 'Eight harsh truths for clients about web design'

Adobe WorkflowLab: Worth keeping an eye on

Create a CSS image sprite based feature box

A few good practices for optimising your CSS

Fixing the 'read more' problem

Randomness

Create a CSS image sprite based feature box

Create a CSS image sprite based feature box

Inspired by some of the excellent feature boxes I've seen on countless sites, I thought it about time I made my own but only using CSS and the excellent image sprite technique. Not familiar with image sprites? Here's a quick primer. Note that this feature box would still work perfectly fine if you were to have each image separate, but less images means less HTTP requests and a less 'laggy' responsiveness for the user. Here's what it looks like: So can see a working demo here. It's comprised entirely of only 2 images and is pretty simple. Your semantic HTML looks like this... <ul id="features"> <li class="design"><a href="">Design</a></li> <li class="programming"><a href="">Programming</a></li> <li class="cms"><a href="">Content Management Systems</a></li></ul> ...and the CSS: /*** Feature Box *****************************/#features { width:740px; height:300px; margin: 0 auto; /* Center the box in the page - can be safely removed if desired */ background:url(images/images.jpg) no-repeat 300px 0; border:solid 1px #e6e6e6;}#features:hover { background:url(images/images.jpg) no-repeat 300px -600px;}#features li { height:100px; width:350px; list-style:none; text-indent:-9999em;}#features li a { height:100px; width:350px; display:block;}/*** Design *****************************/#features .design { background:url(i...

Keep reading 'Create a CSS image sprite based feature box'

Topics

Login to That Web Guy Blog

Login

Not registered? | Forgot your Password? Cancel Login