Spifftastic Revision/Blog (SoCoder)

Created 21 March 2010 | Last Edited 21 March 2010)

Development Diary : Spifftastic Revision

My site has been sitting around sort of rotting over the past year or so. Times have changed, my site is not very well suited for mobile browsing (although I really don't care about that since mobile users aren't going to be reading my site, probably), the design is sort of crusty and I'm not a big fan of it anymore. So, simple solution: redesign the site. Again. This'll be the 8th time? Who knows.

Anyhow, I decided to start by looking at what's available in CSS3, and there are a bunch of things I'm using now. Not all of them are officially in all browsers, so it's more or less been a process of finding out what things are supported across the board. Firstly, multiple backgrounds are supported on all browsers that I care about. That's a big one for me, because it really, really, really rocks when designing things. I don't have to have three <div>s inside of an <li> to get left/right/center images, I can just build three images and position them in the background. It's absolutely awesome.

Because pictures do a good job of illustrating it, the tabs visible here are just list items:

XHTML-wise, they look like this:

<ul class="tabList">
<li><a href="#"> Writing </a></li>
</ul>

-->

That's it. No need for three <div>s. The CSS for this is fairly simple, albeit ugly:

ul.tabList {
	background-image:url(bgtile-nopad.png);
	display:block;
	background-position: bottom right;
	background-repeat: repeat-x;
	list-style: none;
	height:41px;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	padding-left:10px;
	padding-right:10px;
}

/* layout */
ul.tabList li {
	padding-top:7px;
	float:left;
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom:21px;
	display: block;
	text-align: center;
	height:30px;
}

/* visuals */
ul.tabList li a {
	color: white;
	text-decoration: none;
}

ul.tabList li {
	font-size: 1.1em;
	background-image: url(bgleft.png), url(bgright.png), url(bgtile.png);
	background-position: left bottom, right bottom, right bottom;
	background-repeat: no-repeat, no-repeat, repeat-x;
	background-origin: padding-box;
	color: white;
	font-weight: bold;
}

ul.tabList li:hover {
	background-image: url(bgleft.png), url(bgright.png), url(bgtile-hi.png);
	background-position: left bottom, right bottom, right bottom;
	background-repeat: no-repeat, no-repeat, repeat-x;
	text-shadow: #0ff 0px 2px 4px;
}

ul.tabList li.selected, ul.tabList li.selected:hover {
	background-image: url(bgcenter-sel.png), url(bgleft.png), url(bgright.png), url(bgtile-sel.png);
	background-position: center bottom, left bottom, right bottom, right bottom;
	background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
	color: white;
	font-weight: bold;
	text-shadow: #dd007d 0px 2px 4px;
}

-->

So, right now the idea is to just get a layout in a single file in small pieces and then break it up into components that'll be crammed into a Wordpress theme.

Oh, and as I mentioned above, this is only for 'browsers that I care about', so Opera, Firefox, Safari, and Chrome will all render the above correctly (although the border-radius stuff is a pain in the neck). Internet Explorer 8 and under are not on my list of things to look at. If IE9 is released, I'll look at it, but I see little reason to when Internet Explorer is continually losing market share and I can't imagine anyone using IE reading my site. The design does work on Android and the iPod Safari (not surprising, they both use WebKit), so that's good. So out of 7 browsers (all of the aforementioned), only one doesn't draw it correctly: Internet Explorer. So, yeah, death to IE.

Latest Comments

Posted : Sunday, 21 March 2010, 10:58

HoboBen

Awesome! I'm glad multiple backgrounds are usable now. Looks really nice!