CSS Tabs, ala mog — Max Glenister's Blog

So i was playing with some css ideas the other day, during a random spur of boredom (ok, well it wasn’t that random, infact i could have probably avoided it on account of i knew i would be bored.. but regardless..)

i came up with some nice css tabs, using dave shea’s css sprite slicing technique, and douglas bowman’s sliding doors technique.

the end result of this little tutorial should look something like the following image, if i’m any good, and if you follow the tutorial correctly..

Unable to recover the image :(

first of all, let’s whip up some markup..

<div id="menubar">
	<ul>
		<li><a href="#"><span>main</span></a></li>
		<li><a href="#"><span>write</span></a></li>
		<li class="selected"><a href="#"><span>manage</span></a></li>
		<li><a href="#"><span>settings</span></a></li>
	</ul>
</div>

the context i’ve created this in, it was to be used as a main menu, at the top of a page.

now, how about those image sprites..

Unable to recover the image :(

now all we need is a bit of css magic to pull it together..

#menubar {
	float: left;
	width: 700px;
	margin-top: 75px;
	font-size: 1.4em;
	line-height: normal;
	}
#menubar ul {
	list-style: none;
	}
#menubar ul li {
	float: left;
	margin-left: 5px;
	}
#menubar a {
	display: block;
	background: url("images/tab-right.png") right top no-repeat;
	text-decoration: none;
	color: #FFCDAA;
	}
#menubar a span {
	background: url("images/tab-left.png") left top no-repeat;
   padding:5px 15px 3px 15px;
	display: block;
	}
#menubar a:hover {
	background-position: right -25px;
	color: #FF9C12;
	}
#menubar a:hover span {
	background-position: left -25px;
	color: #FF9C12;
	}
#menubar li {
	}
#menubar li.selected {
	border-bottom: 1px solid #fff;
	}
#menubar .selected a {
	background-position: right -50px;
	color: #a9a9a9;
	}
#menubar .selected a span {
	background-position: left -50px;
	color: #a9a9a9;
	}

you can see the tabs in action here - ~~css tabs demo~~

Web Dev · shares #web-development

Antiquated CSS and why we needed it

I came across a catalogue of antiquated HTML snippets and artefacts, the kind of markup we just accepted as necessary in the <head> of every site. It got me thinking about the CSS side of that same period, the stylesheets rather than the markup. My first job in 2009 was building marketing campaign pages for an electronics distributor’s B2B storefront, where dropping IE6 was not a conversation anyone was going to have. Developers eventually landed on one clean way to target different IE versions, but getting there took a lot of less elegant detours.

September 2026 • 12 min read

Web Dev · shares #web-development

How I'm using CSS View Transitions on this blog

In the old days of the web, animating between pages meant faking it with jQuery. Then came pjax, which used pushState to swap in fetched content and fake a full navigation without one, still relying on popState to stop the back button breaking. Every single-page app since has done some version of the same trick, intercept the link click, fetch the new content, swap it in, animate the swap yourself. It works, but it means every navigation runs through a JS router, even on a static blog that didn’t need one otherwise. Cross-document view transitions do the same job without any of that, and there’s no JavaScript API involved at all. It’s a single @view-transition rule in the CSS. No router, no fetch, no client-side history hijacking, the browser still does a real navigation to a real URL, it just captures the outgoing page as it leaves and lets CSS animate that against the incoming one.

July 2026 • 7 min read

Web Dev · shares #web-development

It's 2026, why are vendor prefixes still in your CSS?

I’ve spent more time over the last 20 years working on front-end asset pipelines than I’d care to admit. One thing that kept coming up when inheriting older codebases was CSS full of vendor prefixes that hadn’t been necessary for years - -webkit-border-radius sitting above border-radius, -moz-box-shadow doubling up on box-shadow.

Related posts

Discussion