This can be done with CSS, using pseduo-selectors.

ul li:not(:hover) { opacity: 0.5; }

However we know that pseudo-selectors don’t have very good cross-browser support. And for that matter, opacity doesn’t either. jQuery is pretty good at mitigating cross-browser problems, so l thought I might give that a spin. In attempting it, I had a nice little learning journey.

My first thought is that I needed to write a selector to select all list items except the one currently being hovered over. I had this come up recently for another reason, and I made a snippet for it: Excluding this from the selector. In this example:

$("ul li").not(this).css("opacity", "0.5");

We just need to wrap that in some kind of hover function. The most obvious:

$("li").hover(function() {
  $("li").not(this).css("opacity", 0.5);
}, function() {
  $("li").not(this).css("opacity", 1);
});

But I’ve been being taught that binding events like this is inefficient, since 1) it requires one event handler for every single element and 2) new elements appended to the page after this code runs will need to be re-bound. (Not to mention, you would definitely want to cache that selector above var $listItems = $("li");).

So I thought I’d go right for the new delegate function which we have mentioned here on CSS-Tricks a few times now. This is awesome because it solves both the issues mentioned above. This was my first (utterly broken) attempt.

$("ul").delegate("li", "hover", function() {
    $("ul li").not(this).css("opacity", "0.5");
}, function() {
    $("ul li").not(this).css("opacity", "1");
});

Don’t try that at home, it’s not going to work. Why not? James Padolsey reminded me that “hover” isn’t an event. It’s a jQuery function, but not a real event, and will not work with delegate. Besides, even if it did, delegate is expecting just the three parameters: element, event, and function, not four parameters like I was passing it (assuming it would know the last function was supposed to be a callback/mouseleave).

Then the next most obvious transformation becomes this:

$("ul").delegate("li", "mouseenter", function() {
    $("ul li").not(this).css("opacity", "0.5");
}).delegate("li", "mouseleave", function() {
    $("ul li").not(this).css("opacity", "1");
});

That uses two delegate functions, this time with real events, to get the job done. This is fine, but we can make it a bit more efficient by mapping both events to a single delegate and then just testing to see what type of event was fired. David Link had this idea:

$("ul").delegate("li", "mouseover mouseout", function(e) {
    if (e.type == 'mouseover') {
      $("ul li").not(this).css("opacity", "0.5");
    } else {
      $("ul li").not(this).css("opacity", "1");
    }
});

Which James Padolsey had an even cleaner version:

$("ul").delegate("li", "mouseover mouseout", function(e) {
    $("ul li").not(this).css("opacity", e.type == 'mouseover' ? 0.5 : 1);
});

jQuery’s live() function is also a good choice here, but has some quirks as well. It turns out you can pass “hover” to live, but you can still only provide a single function. The function will then fire on both mouseenter and mouseleave events, and you’ll have to do event.type testing (like above) to figure out which it was and behave accordingly. Thanks to Paul Irish and Jeffrey Way for that one.

And remember that CSS selector from the very top? We can use that right in jQuery too:

$("ul li:not(:hover)").css("opacity", "0.5");

Quite the journey eh? Like all things web, always more than one way to skin the cat.

I’ll be speaking at the upcoming jQuery Conference. It is in the San Francisco Bay Area (Mountain View, at the Microsoft Campus) on April 24 – 25, 2010. Just check out that link for all the details. It looks pretty great.

“Solving Common Client Requests with jQuery”

That is my chosen topic. Since I think I’ll be speaking to a room of folks 75% of which are going to be smarter than me, I thought I would take more of a real-world approach rather than straight instructional. We’ll be taking a look at some actual sites I’ve worked on and how I leaned on jQuery to help me accomplish something that would have been difficult or impossible otherwise.

Win a free ticket!

I have one free ticket to give away to a CSS-Tricks reader. I always struggle with this because I don’t like “leave a comment to win” contests and I also dislike Facebook/Twitter related contests. So we are going to try something new here.

To enter to win the free ticket: you must donate $10 to ANY open source project. Then forward your receipt to me at chriscoyier@gmail.com and you’ll be entered to win.

If you win, you get a $199 ticket for $10. If you lose, you get the intense satisfaction that you helped an deserving open source project. If you aren’t comfortable with that, don’t enter. Transportation and lodging is up to you.

Also remember it’s ANY open source project. Could be jQuery (or some plugin), could be WordPress (or some plugin), or literally ANY other open source project that accepts donations.

This is going to be fairly quick. I’m going to pick winners on this Friday, April 9 2010.

After clicking a new tab the three columns slide away and are replace with new ones at random rates, like a slot machine.

View Demo   Download Files

I thought I did OK… although it can definitely be improved. There are also enough interesting things to talk about, so let’s get after it.

HTML

Just going to do a bit of a code dump here so you can see it all.

<div id="slot-machine-tabs">

	<ul class="tabs">
		<li><a href="#one">Tab One</a></li>
		<li><a href="#two">Tab Two</a></li>
		<li><a href="#three">Tab Three</a></li>
	</ul>

	<div class="box-wrapper">

		<div id="one" class="content-box">
			<div class="col-one col">
				<img src="images/evangeline.jpg" alt="" />
			</div>
			<div class="col-two col">
				<h3>Kate</h3>
				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
			</div>
			<div class="col-three col">
				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
			</div>
		</div>

		<div id="two" class="content-box">
			<div class="col-one col">
				<img src="images/elizabeth.jpg" alt="" />
			</div>
			<div class="col-two col">
				<h3>Juliet</h3>
				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
			</div>
			<div class="col-three col">
				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
			</div>
		</div>

		<div id="three" class="content-box">
			<div class="col-one col">
				<img src="images/sonya.jpg" alt="" />
			</div>
			<div class="col-two col">
				<h3>Penelope</h3>
				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
			</div>
			<div class="col-three col">
				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
			</div>
		</div>

	</div> <!-- END Box Wrapper -->

</div> <!-- END Slot Machine Tabs -->

Important points:

• The whole thing is wrapped in an div with an ID value. Should we convert this idea into a plugin, the idea would be to target this ID and do the magic. But the ID is totally unnecessary for the CSS. That means we could have multiple instances of the slot machine tabs on a single page.
• The “navigation” (the tabs) are at the top above the content boxes. With styling turned off, this will look like a navigation list like any other. The href values for the links point to the ID’s of the content boxes, so the links would jump down the page to the corresponding content. Ideal.
• When there are a lot of closing </div>’s in a row, I like to do the thing where you add a comment afterward to explain which thing this is closing (e.g. <!– END page wrap –>)

CSS

The tabs themselves will be like any other horizontal navigation. We’ll make the list items inline and the anchors block floated left. Simple borders and backgrounds, and a special state for “current” (no border and bumped down) and we’re set.

.tabs { list-style: none; overflow: hidden; padding-left: 1px; }
.tabs li { display: inline; }
.tabs li a { display: block; float: left; padding: 4px 8px; color: black; border: 1px solid #ccc; background: #eee; margin: 0 0 0 -1px; }
.tabs li a.current { background: white; border-bottom: 0; position: relative; top: 2px; z-index: 2; }

One somewhat-unsemantic thing we are using is the #box-wrapper div, but whatever it’s not that bad and it helps us in a number of ways. For one, it’s the the relative positioning container which limits the scope of absolute positioning inside it. We can then absolutely position each content box on top of each other inside.

My favorite part is the box-shadow CSS around the #box-wrapper div. Not only does it help the tabbed area pop up a bit, but it handles the shading on the tabs themselves. The box wrapper sits on top (literally, z-index wise) of the non-current tabs. This is exactly the illusion/visual-metaphor we are going for: the current tab is on top and connected, the non-current tabs are “behind” (shadow is cast upon them).

.box-wrapper { -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; padding: 20px; background: white; border: 1px solid #ccc; margin: -1px 0 0 0; height: 210px; position: relative; }
.content-box { overflow: hidden; position: absolute; top: 20px; left: 20px; width: 658px; height: 230px; }

Notice we also pull the box up by one pixel with a negative top margin. That makes sure the under-border of the non-current tabs don’t make a 2px line but a consistent 1px line.

Another important empowering concept here is that the #box-wrapper has hidden overflow and a set height. The columns in all the content boxes that are non-current are hidden by way of pushing their top value to 350px (a value taller than the height of the box). This pushes them completely out of view because of the hidden overflow. JavaScript will later do the job of pulling up new columns and pushing the old ones out of the way when needed.

The columns:

.col { width: 30%; float: left; position: relative; top: 350px; }
.col-one, .col-two { margin-right: 3%; }

Notice we only apply right margin to the first two columns. Another way to have done that is to apply the margin to all the columns but use .col:last-child { margin-right: 0; } to remove it. That might be the best way to go if you plan on having a variable number of columns. Just be aware of the lack of pseudo selector support on IE.

jQuery JavaScript

This isn’t plugin-ized yet, but it probably could/should be. There are some things I would want to fix/make less redundant before that happens, which I’ll cover later. You can view the full commented JavaScript file here.

I’m not going to do a full code dump but I’ll cover some interesting lines.

Right away the first tab and the first content box are declared as current. The current content columns are moved to a top position of 0 (so they are visible) rather than the default hidden value from the CSS.

$(".tabs li:first-child a, .content-box:first").addClass("current");
$(".box-wrapper .current .col").css("top", 0);

We use the delegate function for the click events on the tabs, since that’s so efficient (and could handle dynamic addition of tabs if that came up):

$("#slot-machine-tabs").delegate(".tabs a", "click", function() {
   // stuff
}

When a click happens, action only takes place if the tab clicked on is not the current tab and there is no other animation taking place on the page. In this limited demo, the only animation possible is the columns. In a more “real” environment the scope of this test should probably be pared down to inside the slot machine tabs specific ID. Something like $("#slot-machine-tabs *:animated)

$el = $(this);

 if ( (!$el.hasClass("current")) && ($(":animated").length == 0 ) ) {
    // stuff
}

I thought it was a more engaging effect if columns didn’t change at the same rate each time. I set the speeds pseudo-randomly for each animation, but with a base value of half a second. The speed for the leaving column and entering column match though, so there is no overlapping.

speedOne = Math.floor(Math.random()*1000) + 500;
speedTwo = Math.floor(Math.random()*1000) + 500;
speedThree = Math.floor(Math.random()*1000) + 500;

Notice in the demo how all new columns always slide up from the bottom. But as they leave, the slide up to the top. That is accomplished because after the slide-them-up-and-away animation is finished, we instantly move them back down to the default low-and-hidden position. Before doing that, we need to make sure that all animations are completed. I had a slightly hard time doing this. Normally to fire something after an animation, it’s no big deal because you can have a callback function on an animation which only fires when the animation is complete. But we are running six different animations here and because they all take a random length of time, we don’t know which one is going to end last.

My solution so far is to call the same function on callback on every single finishing animation. For example:

$(".box-wrapper .current .col-one").animate({
	"top": 0
}, speedOne, function() {
	ifReadyThenReset();
});

The ifReadyThenReset() function will only do it’s thing (reset the column top positions) when it’s been called for the third time:

var columnReadyCounter = 0;

function ifReadyThenReset() {

	columnReadyCounter++;

	if (columnReadyCounter == 3) {
		$(".col").not(".current .col").css("top", 350);
		columnReadyCounter = 0;
	}

};

Issues:

• It’s not a plugin.
• Each of the columns involved in a tab-changing event is individually animated. That’s six things being animated at once and all of them are “hard-coded”. This makes adding or removing columns more of a chore than it should be.
• The call-the-callback-three-times thing seems kludgey to me, and the hard coded three shares the same problem as above.

Demo & Download

View Demo   Download Files

As always, do what you will with this, including use it in a corporate project to impress your boss and use as example of why you deserve a raise.

My thoughts: Wow, that’s extremely cool. But I’d probably never use it.

The fact that I’d never use it has nothing to do with the quality of the product. It has to do with the fact that it is beyond my Abstraction Point. If I’m going to write some page interactions, like a tabbed area or a click-this-slide-down, I’d rather write it myself in jQuery. But that’s kind of absurd isn’t it? jQuery in itself is an abstraction of JavaScript. When I write $(“#thingy”).slideDown(); there is lots of stuff going on that I barely understand. I’m far from “writing it from scratch”.

Taking it further, that code is ultimately served up from a web server. I certainly didn’t write that code. That web server runs on an operating system. The operating system runs on lower level code. There is a lot of steps between that circuit board and my slideDown animation. Everybody stops along the chain somewhere.

“That’s for newbies, not real developers.”

“I write my code from scratch!”

“I like to know what my code is doing.”

I think these are flawed statements. When we say or think these things, we are really saying “This is above my abstraction point.”

Your abstraction point is the level of abstraction you feel most comfortable in getting stuff done from day to day. It might be using design view in Dreamweaver and adding interactions with IxEdit. It might be writing in assembly language. Neither one is “better” than the other. It’s just where your current comfort level is, and more importantly, using the tools you need to to get the task done with reasonable speed.

Fair warning: more rambling than usual. Listen to my thoughts about SEO. What I think I know is that SEO is a series of fairly obvious best practices. A SEO service that helps you with those things can be good, a SEO service that claims to do anything else seems shady. However, there are plenty of examples where seemingly doing everything right doesn’t seem to work, and results that show up higher than your project look like pure garbage. SEO is, and may always be, quite mysterious.

View Screencast

It covers a variety of things I thought were interesting:

• jQuery 1.4’s new element creation syntax which is pretty cool and we haven’t covered
• Writing a little plugin to prevent repeated code (and keep it in the spirit of jQuery)
• Touches on what I am starting to consider object-oriented CSS

The Goal

What we have here is some boxes of content. The goal is that when you mouse over them, they darken and a link appears in the exact center of them. I realize this isn’t going to be an ideal UI choice for many things. Making things unreadable as you mouse over them is an unusual design choice. But it might be perfect in some circumstances. Moral of the story: don’t make snap judgments based on demos.

HTML

Just a div with some text in it…

<div class="widget widget-one rounded">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

What you might want to do is include a hyperlink in each widget that will go to the same place the link we are going to add with JavaScript does (degradability). Again, this is just a demo and the circumstances will be different in live scenarios.

CSS

I’m calling our little boxes “widgets”. Notice I gave the div wrapper a class of widget. This is the basic widget:

.widget {
   width: 300px;
   padding: 20px;
   border: 1px solid #999;
   margin: 0 20px 20px 0;
   float: left;
   position: relative;
}

But note that in the live demo and the image above, the widgets have rounded corners. We all know how to make rounded corners in CSS by now. There is the standard border-radius and its sister vendor extensions. Why aren’t we adding them right to the widget CSS itself? This is where the object-oriented CSS comes in…

The way my brain and CSS typically work is that I try and keep the HTML as absolutely clean and semantic as possible. I was always taught than using a CSS class name like “red” is mega bad practice because “red” isn’t semantic, is specifically descriptive. Instead you should use something like “important” or “warning”, because then later if you decide that those things should been green instead of red, your “red” class is embarrassingly irrelevant.

Object oriented CSS throws some of that thinking on it’s head. Object oriented CSS uses class names specifically to describe design characteristics of that “object” (page element). Notice I also gave the widget a class of “rounded”. In our CSS, the rounded class will be this:

.rounded {
   -moz-border-radius: 20px;
   -webkit-border-radius: 20px;
   border-radius: 20px;
}

Blasphemy? I used to think so, but lately I’m really liking this approach. There may be 20 things on the page that are “rounded”. Now all we need to do is apply the rounded class name to each of them and they become rounded. Need to adjust that border radius? Adjust it in a single place and all the rounded objects match. Without doing it this way we’d be updating 60 different places in our CSS.

This may be right for some sites and not for others. That feels like a cop-out thing to say, but it’s true. Perhaps it’s unrealistic for a site with loads of legacy content. It might be brilliant for a brand new site with less content where there just nearly just as much CSS as there is HTML.

The JavaScript is ultimately going to apply a new div to our widgets, which will have the job of darkening the widget. We’ll call this class “overlay”. Here is the CSS for that:

.overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: url(../images/black75.png);
    background: rgba(0,0,0,0.6);
    text-align: center;
}

It uses RGBa to do the darkening for modern browsers (more flexibility, may save an HTTP Request), and falls back to an alpha-transparent PNG (for IE 7). Another way to deal with this would be to use a solid black background color and use regular transparency, but since in this demo we’re going to have the “middle box link” inside the overlay, and we don’t want that to be transparent as well, this works fine.

jQuery JavaScript

To repeat our goal quickly: when a widget is rolled over, we want to darken it and add a link in the dead center of it. In our demo we have four widgets. Some of them are of a different height, so we’ll need to accommodate for that. Each widget also has different text displayed as the “middle button link” and also a different URL. That means some of this code will be different, but much will be the same. This calls for some abstraction. In JavaScript we could go right for a custom function, which we could call for each widget. In the spirit of jQuery though, let’s make it a little plugin. This means that we’ll keep intact sweet jQuery-specific features like chainability.

Notice that we’ve added a unique class name to each widget. That is so we can target widgets individually with that hook in the JavaScript. We could have used ID’s as well, which is a bit more efficient, but hey, you might have two widgets on the same page that use the same text and link. Using the same class name will work in that circumstances while ID’s would not. This is the abstraction we desire:

$(function() {

    $(".widget-one").middleBoxButton("Read More", "#read");
    $(".widget-two").middleBoxButton("Go to the Store", "#store");
    $(".widget-three").middleBoxButton("Continue", "#more");
    $(".widget-four").middleBoxButton("Behold!", "#bazinga");

});

Of course “middleBoxButton” isn’t a function. That’s what we’ll be creating as our plugin. Here’s the whole shebang:

var $el, $tempDiv, $tempButton, divHeight = 0;

$.fn.middleBoxButton = function(text, url) {

    return this.hover(function(e) {

        $el = $(this).css("border-color", "white");
        divHeight = $el.height() + parseInt($el.css("padding-top")) + parseInt($el.css("padding-bottom"));

        $tempDiv = $("<div />", {
            "class": "overlay rounded"
        });

        $tempButton = $("<a />", {
            "href": url,
            "text": text,
            "class": "widget-button rounded",
            "css": {
                top: (divHeight / 2) - 7 + "px"
            }
        }).appendTo($tempDiv);

        $tempDiv.appendTo($el);

    }, function(e) {

        $el = $(this).css("border-color", "#999");

        $(".overlay").fadeOut("fast", function() {
            $(this).remove();
        })

    });

}

So when a widget is rolled over, a brand new <div> is created. This div has a class of “overlay” and “rounded”. We already know what “rounded” means (OOCSS). We also already know what the “overlay” is, it ensures the div is exactly the same size is the div by setting absolute positioning and the top, right, bottom, and left values all to zero and deals with darkening. Nothing is done with this div quite yet though.

Then we create an anchor link. We give it the text and href attribute that we passed the plugin explicitly for this purpose. Then we append this link to the overlay div we just created and then append them both together to the widget. This element creation business is made nice and succient by jQuery 1.4’s new element creation syntax. This part:

$("<a />", {
    "href": url,
    "text": text,
    "class": "widget-button rounded",
    "css": {
        "top": (divHeight / 2) - 7 + "px"
    }
});

Notice that I have all the “keys” (the part before the colon) in quotes. Most of the keys will work without quotes, but I was having issues with the key “class” not working in IE. Turns out it’s not a bug, it’s just that “class” is a reserved word in JavaScript, and it’s bad form not to quote it. Also turns out it’s good form to just quote everything when using JSON-like syntax like this uses.

Since one of our goals here is that the link appears in the exact middle, let’s talk about that. Centered it horizontally is easy, the overlay div has text-align: center, so that’s that. Vertical centering is a bit trickier. There are CSS ways of dealing with it, but none that are super clean and easy. We’re using JavaScript anyway, so let’s exploit that. We’ll just measure the height of the widget, cut it in half, and kick the link down that distance. The one kinda kludge-y part is the value “7″. You gotta hate hard-coding a value like that when what I really mean is “half the height of the button”. The problem is I couldn’t calculate the height of the button because it doesn’t exist yet when I’m setting the other attributes. If you have an idea, let me know. Also note, the height of the widget is calculated not just by using the .height() function, but by using that and adding in the top and bottom padding.

The callback function for the hover (mouse out), just sets the border back to its original color and fades out (then removes) the overlay div. Done!

Demo and Download

View Demo   Download Files

The Final Product

The final product of our estimating process is a PDF file that we email back to the potential client. It is on formal letterhead and recaps the major points that have been discussed thus far as well as the different major components of the project and what we will charge. The cost isn’t broken down by every little individual task, but into major groups. For example, if it would make sense to break up development of the site into phases, each phase is described and quoted. We also encourage clients to opt in to monthly maintenance, so we can nurture the site over time. Monthly maintenance is typical optional, and so is quoted separately.

Estimates are sent via Email generally within a few weeks of a formal exploratory meeting. These meetings are typically face to face, but not always (I typically attend via audio/video chat).

Before it all begins…

We don’t send a formal estimate in reply to every single email we get asking about projects. The harsh truth is that a good percentage of email inquiries about work don’t make it past the first email. If the email is poorly worded or otherwise awkward, it probably gets deleted. The client/designer relationship is a long term and important relationship. Communication needs to flow smoothly and words need to be understood clearly so the corresponding actions can be clear. If the first email throws up red flags, imagine the quagmire 100 emails later.

Stick To It

We prefer to quote projects by the job. This is mostly for the clients benefit. They can see a number and know exactly what they are getting in to. If it’s on target, they can agree and we on on our way. If it’s way off base, that can be discussed before any more unnecessary time is spent on either side. The quoted number will be the final billed number in most cases, although not always (read on).

Hourly

Even though we tend to quote by the job, we still have an hourly rate in mind when coming up with the numbers. There is a base, but it can vary up and down depending on things like:

• Have we worked with you before?
• What is the nature of the work?
• How many of us will need to be involved?

Some folks would say that hourly rates are bad. One reason mentioned is that it encourages an agency to take longer since that would be more profitable. Definitely not the case with us since 1) the hourly rate mostly just helps estimate and 2) we just don’t dilly dally around to bloat bills, that’s ridiculous.

Depending on the situation, and especially with web-only projects, we may specially present how many hours we are estimating for different parts of the projects. This is for the explicit purpose of defining scope of the project. Web projects have a much higher tendency to have “scope creep”, or end up consuming a lot more time than originally estimated. When the hours are specified, we will likely include language like “If the completed project ends up taking anywhere near the estimated hours, the final bill will be what is estimated. If we find that the project is significantly exceeding those hours, we will be in touch to discuss options.”

After all, we are talking about estimates. How firmly we stick to that number in final billing is another matter. Whether we include hours or not, we do mention that should the final bill exceed this price more than 25%, client approval is needed first.

Fixed Costs

These are easy. Do they need you to buy the domain name? Twenty bucks. Hosting for a year? Hundred bucks. These are just examples (services as well as pricing).

An Educated Guess

Sometimes, as much logic as you try and throw at estimating a project, you end up with the feeling that you just don’t know. You just don’t know how long it’s going to take. You just can’t forsee what kind of roadblocks you are going to come across. You just don’t know how well these new clients are going to communicate with you.

At this point you’ll need to do a little reflection on previous projects and then perhaps, pull a rabbit out of a hat. Uhm, let’s say $8,500, that sounds about right. That might read as unprofessional, but I’ll bet you a dollar the majority of agencies do a little rabbit-pulling in their estimates. It’s not unprofessional at all; In fact, I think it’s the definition of professionalism. Professionals are people educated, trained, and skilled in a field of work. That’s what we are, and a part of those skills are making good estimations at what to charge for our services.

Terms

The terms of the final billing should be in the estimate as well. When the client agrees to an estimate, they are then fully aware of how the billing will go down. Projects will be billed within 30 days of the projects completion are are due NET 30 DAYS upon receipt of the bill. Past due invoices are charged a late fee percentage. Payment may be submitted via check, money order, etc.

You may wish to to have a client sign an agreement of the estimate and terms before beginning the project. We generally don’t, but probably would if it was a large project for a brand new client. It’s not rude, it’s business. Personally, I don’t know enough about this to give advice. Since the goal here is a legally binding contract, you should consult a lawyer.

RFP

Also known as a “request for proposal,” is an approach I really like that many bigger agencies take. We aren’t a big agency, but we’ve been throwing around the idea of putting something like this together. In essence, instead of having a simple contact form where someone can type in their name, phone number, and message regarding their project (and you’ll get back to them), an RFP is a much more robust form. It asks about budget and timeframe and goals and related websites and all kinds of other stuff. It might feel like a lot of hoops to jump through as a client, but this is how I see it: We’re going to be serious about your project, so we expect you to be serious about it too, and part of that is being able to clearly explain the project, yourself, your goals, your budget, and anything else we think is vital to giving you a fair estimate.

For an example, download the Project Planner from Happy Cog. That’s probably a lot bigger and more detailed than we would need to be. We also take projects with a lower budget than $100,000. Although we don’t really mess around with budgets any lower than a few grand.

¹If you are interested in having a project estimated, your best bet is to fill out our simple contact form with as many details about yourself and your project as possible.

²I will actually be leaving my job at Chatman Design in May. I just need a break from the daily grind of the same sites I’ve been working on for 3 years. Chatman Design was the first web job I ever had and played huge role in shaping me into the designer I am today. I think it will be good for the clients too, as they will get a fresh set of eyes looking over their sites which I think is an undervalued thing in this industry. Carpe diem!

The technique is clever in it’s simplicity. Let’s take a look.

Multiple Text Shadows

The major empowering concept here is the CSS3 property text-shadow. Typically it’s like this:

.shadow {
   text-shadow: 2px 2px 4px #000;
}

Which is:

.shadow {
   text-shadow: [X offset] [Y offset] [Blur size] [Color];
}

Notice there is no vendor prefixes, which is nice (Related: recent debate on vendor prefixes). You can also apply multiple shadows to the same text:

.shadow {
   text-shadow: 1px 1px 0 black, 2px 2px 0 black;
}

Multiple shadows happen by using a comma separated list. In the above code, there are two shadows, one offset by 1px on both axes with no blur, the second by 2px on both axes with no blur.

See the trick? We can apply multiple shadows, each offset by 1px from each other to build a “tower” style shadow below it. By default this would apply shadows deeper and deeper underneath the text, but we can appear to have it “pop up” by having the shadows only appear on hover and moving the text up and to the left the same depth of the shadow.

.shadow {
   color: white;
   font: bold 52px Helvetica, Arial, Sans-Serif;
   text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902;
}
.shadow:hover {
   position: relative;
   top: -3px; left: -3px;
   text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902, 4px 4px #fe4902, 5px 5px #fe4902, 6px 6px #fe4902;
}

Transitions

As it stands with the above code, the rollover will instantly pop up the “tower” on rollover. But we can make it “grow up” instead, as most modern browsers are now supporting transitions (i.e. animation from one state of appearance to another). We don’t get so lucky with the vendor prefixes this time. There are three to cover:

.shadow { color: white; font: bold 52px Helvetica, Arial, Sans-Serif;
   text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902;
   -webkit-transition: all 0.12s ease-out;
   -moz-transition: all 0.12s ease-out;
   -o-transition: all 0.12s ease-out;
}
.shadow:hover {
   position: relative; top: -3px; left: -3px;
   text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902, 4px 4px #fe4902, 5px 5px #fe4902, 6px 6px #fe4902;
}

Note: -moz-transition will only begin to work in Firefox 3.7.

Fun with Scaling

The middle section of the footer has a different neat affect. As you roll over the different lines they grow in size. This is an other CSS3 effect: transform. Again with the vendor prefixes:

div:hover {
   -webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
   -o-transform: scale(1.1);
   text-shadow: 3px 3px 0 #333;
}

Fallbacks

So what happens in Internet Explorer? Text shadow won’t work, but the positioning will.

It’s not as pretty but it’s totally acceptable.

Demo and Download

View Demo   Download Files

If you plan to use this somewhere, be inspired by the idea and the technology, don’t just rip off David’s footer.

I’ll be heading down to Atlanta, Georgia to attend LessConf3010 on May 21/22, 2010. They can say it better than I can:

LessConf is a conference with talks ranging from startups to design to marketing to business. It’s a casual two-day event in Atlanta Georgia with awesome speakers here to inspire you. Each speaker will have a 45 minute talk followed by a 15 minute Q/A session with Steven Bristol.

It’s put on by Allan and Steve of LessEverything. It’s $402 and includes a T-Shirt, copy of REWORK, and lunch with the speakers if you are within the first 100 to sign up (still room).

I’m pretty stoked about it. I don’t get a chance to go to many conferences, but the two I’ve been to I had a great time at. I’m looking forward to the variety at this one. Some design stuff, but also startup stuff, marketing stuff, and general business stuff.

Speaker Lineup

• Cameron Moll of Authentic Jobs (and various other awesomeness)
• Chris Wanstrath of GitHub
• Saul Colt of Thoora
• Dan Martell of Flowtown
• David Heinemeier Hansson and Jason Fried of 37signals
• Alex Hillman of IndyHall
• Peldi Guilizzoni of Balsamiq
• Clay Hebert of TribesWin

I probably don’t have the answers to any super specific questions about it, so I’m going to turn off comments here and have you direct your questions/comments toward the conference folks themselves.

With CSS, it looks like this:

li {
  background:
    url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
    no-repeat
    left center;
  padding: 5px 0 5px 25px;
}

With HTML, it looks like this:

<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />

The format, to be specific:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

Basically, a super long string of gibberish characters. It’s not gibberish to the browser though of course. This data is interpreted as the type of file you are saying it is.

You can see a really dumb demo page here. I’ll be covering the important parts next.

Why would you do this?

The biggest reason: it saves HTTP Requests. Other than pure document size, this is the #1 factor concerning how fast a page loads. Less = better.

How do you get the code?

Use this online conversion tool. It’s the nicest one I have found.

Browser Compatibility

Data URI’s don’t work in IE 5-7, but are supported in IE 8. You could:

• Use an IE-only stylesheet to put images in, or,
• Use it only for progressive enhancement type stuff where having no image is perfectly acceptable, or,
• Not care
• Read this article about an alternate technique that does work.

Important Notes

• Size of embedded code is somewhat larger than size of resource by itself. GZip compression will help.
• IE8 has the lowest maximum data URI size of 32768 Bytes. (HEY?!?! There is that crazy number again.)
• It’s hard to maintain site with embedded data URIs for everything. It’s easier to just update an image and replace it.
• If you are using PHP (or PHP as CSS), you could create data URIs on the fly like this <?php echo base64_encode(file_get_contents("../images/folder16.gif")) ?>
• You should only use this in documents that are heavily cached, like your CSS should be. Having a CSS file that is 300k instead of 50k is fine if it saves 6 HTTP requests, but only if that CSS file is cached just as well as those images would be. Setting long expires on CSS files should help.
• Data URIs are not limited to images, they could literally be anything.
• <canvas> may obsolete the coolness of all this, when it gets more supported and people build cool tools for it.

The AnythingSlider doesn’t work in Opera!!!

They were right… but it seemed to be a fairly new issue and I never could figure out why. It turns out it all comes back to 32766.

I used to get emails from people who were using the AnythingSlider and added like 80 slides to it and it didn’t work anymore. The reason was always that the inside <ul> element that wrapped all the slides was too narrow to fit their 80 slides. It was set at a fixed width of 9999px. The right answer would have been to make the wrapper the width of one slide multiplied by the number of them (via the JavaScript). But just in being lazy, I just added another “9″ to the width making the wrapper 99999px. This was the change the borked Opera.

Apparently, Opera can’t handle widths greater than 32766px. There is a thread in Opera’s forums which means I’m not alone here.

Reader Erdei Csaba clued me in:

32766px … is the highest signed 16-bit number (32767) – 1.

Opera must store these values as signed 16-bit numbers. And apparently higher positive values (> 32767) are processed as negative values. The CSS1 spec explicitly forbade negative width values, but the newer specs don’t really say anything about it. They probably assume they didn’t have to say anything, because it’s obviously pretty ridiculous to have a negative width.

Long story short: the maximum width of an element in Opera is 32766px, and that probably should be fixed.

If none of the radio buttons in a radio button group are checked when they are inserted into the document, then they will all be initially unchecked in the interface, until such time as one of them is checked (either by the user or by script).

What’s the point of all this? Well… why explicitly allow such bad UI?

Neither choice selected

In a comment here last week, Lee Kowalkowski summed it up nicely:

It’s poor UI in my opinion. The most popular option should be checked. If choosing nothing is valid, then a radio group isn’t a good fit because the user cannot easily revert the group to its indeterminate state.

It’s worth repeating: the user cannot easily revert the group to its indeterminate state.

The HTML4 spec made more sense:

At all times, exactly one of the radio buttons in a set is checked. If none of the <INPUT> elements of a set of radio buttons specifies ‘CHECKED’, then the user agent must check the first radio button of the set initially.

Since user agent behavior differs, authors should ensure that in each set of radio buttons that one is initially “on”.

That second part there, in plain English: Since we know no browsers actually follow this, we are adding this special note to remind authors to take this into their own hands.

In my opinion, we should revert back to the HTML4 spec, but browsers should actually respect it, by forcing at least one radio button to be checked, per group, at all times. Which would then make the :indeterminate pseudo kind of useless.

Remember that radio buttons and select dropdowns are essentially the same thing (can only pick one choice from multiple). So if you need an “unselected” state, perhaps a <select> with a default option of “Choose” would do the trick for you.

Basic accordion from jQuery UI

One way to look at an accordion is like a collapsed single column of a table. I was recently building a page for a client site, where the information that they provided really made sense to present as a table. But it was too much information to view all at once. I thought it would have been overwhelming visually. I also thought that it was most likely that people visiting this page would know what they needed right away, so having them click once to get it seemed pretty reasonable. So, a table of accordions!

Another consideration in this table I was building is that there was enough columns that each individual column (should they have been equal width in the space available) wasn’t very wide, maybe 150px. Some of these cells contained several paragraphs of text. A cell 150px wide with several paragraphs of text would awkwardly tall. Hence, the Grid Accordion is born!

The Grid Accordion works with the same theory as most other accordions. Only one cell is open at a time. The big thing is that the column of the current open cell expands to a reasonable reading width.

You can view and download the example at the end of this article. I’ll go through some of the important bits next.

HTML: Classic use of the definition list

Accordions are perfect semantic examples of definition lists. A quick review of those:

<dl>
   <dt>Title</dt>
   <dd>Information about that title here</dd>
   <dt>Another Title</dt>
   <dd>Information about that other title here</dd>
</dl>

Our grid accordion will be made up of divs floated into a horizontal row. Each div contains the title for the column and an image, as well most importantly the definition list itself. Sample of one of those divs:

<div class="info-col">

	<h2>Batman</h2>

	<a class="image batman" href="http://jprart.deviantart.com/">View Image</a>

	<dl>
	  <dt>Super Power</dt>
	  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
	  <dt>Costume</dt>
	  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
	  <dt>Morality</dt>
	  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
	  <dt>Sidekicks</dt>
	  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
	  <dt>Vehicles</dt>
	  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
	  <dt>Weaknesses</dt>
	  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
	</dl>

</div>

CSS: trying to stay accessible

Most of the CSS is just simple setup and not really worth covering here (full CSS file here).

One aspect that is worth covering those is accessibility. We need to “hide” all the information panels of the table by default. One of the ways we could do that is to set the dd elements to display: none; in the CSS. This is a seriously accessibility problems though, as many screen readers will obey that CSS and completely remove that information.

Instead, we can “hide” the cells by just kicking them outside the browser window.

dd { position: absolute; top: -9999px; left: -9999px; }

This is a classic technique. In fact, it’s pretty common to see those exact CSS properties and values with a utility class name like this:

.screen-reader-text { position: absolute; top: -9999px; left: -9999px; }

We have another concern though. We’re going to be using some jQuery animations to slideUp and slideDown the info cells. So we can’t have them kicked off the page for typical viewers. We’ll move the cells back when the JavaScript first runs and then have the JavaScript hide them.

The thing about the slideDown jQuery function is that it works best when it already knows what height the element originally was before it was closed or hidden, so it can smoothly animate itself back to that original height. If we used display: none; in the CSS, this function would have no idea how tall those cells are supposed to be. Kicking them off the page instead means that the original height will be calculated, keeping that animation as smooth as it can be. We just need to make sure that the cell is set to its “full” width so the height is calculated at the width the cell will be when it’s visible.

dd { width: 299px; position: absolute; left: -9999px; top: -9999px; }

So at this point we have an accessible page of information, in that screen readers should be able to get all they need, and regular users have a smoothly operating system. However one thing that isn’t fully addressed is simply having JavaScript turned off. In that scenario, the information cells are still hidden by CSS. Personally, I’m far more concerned about accessibility than I am about people who browse around with JavaScript turned off and a torch to bear. However if you are, feel free to either 1) Put in a <noscript> message or 2) remove the CSS hiding and just let there be a bit of a flash of content before the JavaScript hides the cells.

CSS: Fun with CSS3

The CSS3 pseudo class selector :nth-of-type is particularly useful with definition lists. Because the dt and dd elements alternate, and actually can be repeated or in any order, :nth-child would be a non-maintainable way to go. Let’s color the cells of the table using :nth-of-type

dt:nth-of-type(1) { background: #b44835; }
dd:nth-of-type(1) { background: #b44835; }

dt:nth-of-type(2) { background: #ff7d3e; }
dd:nth-of-type(2) { background: #ff7d3e; }

dt:nth-of-type(3) { background: #ffb03b; }
dd:nth-of-type(3) { background: #ffb03b; }

dt:nth-of-type(4) { background: #c2a25c; }
dd:nth-of-type(4) { background: #c2a25c; }

dt:nth-of-type(5) { background: #4c443c; }
dd:nth-of-type(5) { background: #4c443c; }

dt:nth-of-type(6) { background: #656b60; }
dd:nth-of-type(6) { background: #656b60; }

For the rabble-rabble-IE-compatibility crowd, go ahead and add extra class names to the cells and do your coloring with those hooks.

One of the bits flair we are going to add is highlighting the current column. The class name of “curCol” will be applied and removed as needed via JavaScript. The current column will have a shadow around it, which of course is the perfect use for box-shadow:

.curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1; position: relative; }

While I was playing with this, I originally tried using some transforms to scale up the size of the current column. Ultimately I didn’t like the look (one pixel lines look awful when scaled). I liked the shadows much better, but I found that the right edge of the shadow was being cut off the the next column. It was because that next column sat slightly above the current one in terms of vertical stacking order. Hence, the curCol class having the z-index and relative positioning, to make sure it sits on top of the others.

Randomly, I also discovered that the transform property also solved the problem. As in, setting -moz-transform: scale(1); (which scales something to 100%, or basically, does nothing to unscaled elements) also worked by making the shadow visible. In other words: using transforms on elements affects their vertical stacking order. I’m just not sure how it all works exactly quite yet.

jQuery JavaScript

Again I won’t cover every line of this (you can see the full file here). Here is the logical structure though:

1. When a <dt> is clicked…
2. If it’s the currently active cell, do nothing
3. Otherwise…
4. Close all open cells
5. Shrink old title
6. Enlarge new title
7. Open new cell
8. Mark the current column
9. Make sure current column is expanded and others are shrunk

Couple of interesting things…

I would have normally used the .live() function to handle the clicks on the dt elements. But the newfangled hip way to handle this in jQuery is using .delegate()

$("#page-wrap").delegate("dt", "click", function() {
  // do stuff
}

Where live would have to watch the entire document for clicks, delegate limits that watching to only the page-wrap, which is more efficient.

I showed this to Doug Neiner, and he also suggested that clicking on the photos in each column would only open the column. Then if clicked again, they would actually go to the artist’s website (where the href of each image links to). The trick here was to prevent the default action (going to the link) when clicking on an image if it’s not the current column. Instead, divert the click to the first title in that column (which will open it). We can use delegate for this again:

$("#page-wrap").delegate("a","click", function(e) { 

    if ( !$(this).parent().hasClass("curCol") ) {
        e.preventDefault();
        $(this).next().find('dt:first').click();
    } 

});

Demo and Download

View Demo   Download Files

Until I figure out some good licensing system… just a reminder than any downloadable example like this on this site you can use to do whatever you want with. Preferably, use it in big corporate projects and make boat loads of cash. Or, show it to your friends and tell them you did it so they will think you are awesome.

It’s just a simple file input box, why is that the “hardest part”? Think what that input box represents.

1. User has a device capable of capturing a photo
2. User has transferred that photo to his/her computer
3. User knows the location of that photo file on his/her computer
4. User is ready to brave the file selection dialog box to select it

In a form like this, if the user doesn’t have a digital photo ready to go, they really shouldn’t be filling out the submit form. Having the file input as the first thing stops folks from doing any unnecessary work.

Conversely, users that do have an digital photo ready to go get to choose it right away. That act of choosing a file gets them heavily engaged in the process of filling out this form from the get-go. Choosing a file is a pretty intimate experience as far as web forms go. Once that is done, there will be some excitement in filling the rest of it out so it can be submitted.

I think this goes beyond this particular form. The overall message being: let users do the thing they want to do right away (likely “the hard part”) and the rest of the form will be a breeze for them. Take this example:

Here we ask if the user has a question right away. They are probably at this form to begin with because they do have a question. Let’s let them ask it first thing. Once they’ve written it out, they are pretty committed to this form and have some momentum. Filling out their name/email/phone will be easy.

As opposed to this:

I can imagine this being met with far less enthusiasm. Ugh, more hoops to jump through, I just want to ask a question. Of course you are asking the exact same questions in both examples and a purely logical user would understand that of course name and contact information needs to gathered. But that doesn’t matter, the user is thinking about their question, not what other information this form wants. Let them do the hard part first.

I wish I had some A/B testing to throw at you here, but I don’t. I’d like to do some on this some day. So this is just me tossing out what I think is a good UI choice based on my own professional judgment.

Many things are the same, some are different.

This is true with anything: your watch, a remote control, even your relationships. It’s certainly true with websites. If your website used to work fine, but now it won’t load, then something changed. To fix it, you need to figure out what that thing was.

Pretty obvious? Sure, if everything is working great for you right now. But the minute something breaks, it’s really easy to get into the WELL EVERYTHING WAS WORKING FINE YESTERDAY mode.

What could it have been?

• Has any new software been installed?
• Has any code changed?
• Have you asked everyone with access to it?
• Is your allowed disk space full? Maybe something you don’t often think about was filling it, like server logs.
• Did any file permissions change?
• Are all the external resources your site depends on functioning properly and up to speed? Think: external JavaScript links, external RSS feeds, advertising services, APIs, etc.
• How is incoming traffic? Major spike? Are you watching analytics? More traffic means more server resources, so you’ll need to watch things like your memory usage.
• Is your database server responding properly? Is your database itself in good condition?
• Did anything change with your web host?
• Is your domain registration up to date?
• Is the DNS server you use responding properly?
• Is there a chance you were hacked?

I once had a conversation with a Joyent employee who said that in the overwhelming majority of cases, a website was down because of something the user did, not the hosting. But still, I think a good host will help you figure out what the problem is if it is their fault or not.

a:hover {
 /* Yep, hover is a pseudo class */
}

They are immensely useful in a variety of situations. Some of them are CSS3, some CSS2… it depends on each particular one. Outside of IE, they have great browser support. In IE land, even IE8, support is pretty barren. However, the IE9 preview has full support of them. The link-related ones work but not much else. Let’s take a brief look at each one of them. Don’t worry, there isn’t that many.

Link-related pseudo class selectors

:link – Perhaps the most confusion-causing link-related pseudo selector. Aren’t all <a>’s links? Well not if they don’t have an href attribute. This selects only those that do, thus is essentially the same as a[href]. This selector will become a lot more useful should any-element linking become reality.

:visited – Selects links that have already been visited by the current browser.

:hover – When the mouse cursor rolls over a link, that link is in it’s hover state and this will select it.

:active – Selects when the link while it is being activated (being clicked on or otherwise activated). For example, for the “pressed” state of a button-style link or to make all links feel more button-like.

There is a fun technique to remember all the link pseduo class selectors. Look at the first letter if each: LVHA … LOVE HATE.

Input & link related pseudo class selectors

:focus – Defining hover styles for links is great, but it doesn’t help out those who used keyboard navigation to get to the link. :focus will select links that are the current focus of the keyboard. This is not limited to links, but can be used (and really should be used) on inputs and textareas as well. Some would tell you to define a :focus style for anything that has a :hover style.

Form with a text input in focus. Yellow background is a focus style.

:target – The target pseudo class is used in conjunction with ID’s, and match when the hash tag in the current URL match that ID. So if you are at URL www.yoursite.com/#home then the selector #home:target will match. Then can be extremely powerful. For example, you can create a tabbed area where the tabs link to hash tags and then the panels “activate” by matching :target selectors and (for example) using z-index to move to the top.

:enabled – Selects inputs that are in the default state of enabled and ready to be used.

:disabled – Selects inputs that have the disabled attribute. A lot of browsers will make the input a faded out gray, you can control that with this selector.

:checked – Selects checkboxes that are, wait for it, checked.

:indeterminate – Selects radio buttons that are in the purgatory state of neither chosen or unchosen (like when a page loads with radio button choices but no default is set).

Set of radio buttons in purgatory. Or more accurately, in their :indeterminate status.

Position/Number-based pseudo class selectors

:root – Selects the element that is at the root of the document. Almost certainly will select the <html> element, unless you are specifically working in some weird environment that somehow also allows CSS. Perhaps XML.

:first-child – Selects the first element of its type within a parent.

:last-child – Selects the last element of its type within a parent.

:nth-child(N) – Selects elements based on a simple provided algebraic expression (e.g. “2n” or “4n-1″). Has the ability to do things like select even/odd elements, “every third”, “the first five”, and things like that. Covered in more detail here with a tester tool.

:nth-of-type(N) – Works like :nth-child, but used in places where the elements at the same level are of different types. Like if inside a div you had a number of paragraphs and a number of images. You wanted to select all the odd images. :nth-child won’t work there, you’d use div img:nth-of-type(odd). Particularly useful when working with definition lists and their alternating <dt> and <dd> elements.

:first-of-type – Selects the first element of this type within any parent. So if you have two divs, each had within it a paragraph, image, paragraph, image. Then div img:first-of-type would select the first image inside the first div and the first image inside the second div.

:last-of-type – Same as above, only would select the last image inside the first div and the last image inside the second div.

:nth-last-of-type(N) – Works like :nth-of-type, but it counts up from the bottom instead of the top.

:nth-last-child(N) – Works like :nth-child, but it counts up from the bottom instead of the top.

nly-of-type – Selects only if the element is the only one of its kind within the current parent.

Relational pseudo class selectors

:not(S) – Removes elements from an existing matched set that match the selector inside the parameter of :not(). So for example, all divs except those with a class of “music” = div:not(.music). The spec says that :not selectors cannot be nested, but they can be chained. Some browsers (Firefox) also support comma-separated selectors as the selector parameter, although chaining them would be a far safter bet. Also useful in conjunction with attribute selectors, e.g. input:not([disabled]).

:empty – Selects elements which contain no text and no child elements. e.g. <p></p>

Text-related pseudo class selectors / elements

:first-letter – Selects the first letter of the text in the element. Typical use: dropcaps.

:first-line – Selects the first line of text in the element. Typical use: setting the first sentence in small-caps as a typographical eye-catcher / lead-in.

:lang – This pseudo selector is in the CSS3 spec but only implemented in IE 8+. Will match anything that either has or is a descendant of an element with a matching lang attribute. For example, :lang(fr) will match any paragraph, even without a lang attribute, if the parent body had lang=”fr” as an attribute.

::selection – Allows the changing of style of selected text. For Firefox, you can use ::-moz-selection. More information here.

Quick note

You can chain pseduo selectors just like you can chain class and ID selectors. This is particularly useful here while we are looking at :first-letter and :first-line. You probably wouldn’t want to drop cap every single paragraph on the page, but just the first one, so, p:first-child:first-letter { }

Dropcap using :first-letter, which enlarges the font size and floats to the left.

Content-related pseudo “elements”

:before – Is able to add content before a certain element. For example, adding an opening quote before a blockquote or perhaps an preceding image to set apart a particular paragraph.

:after – Is able to add content after a certain element. For example, a closing quote to a blockquote. Also used commonly for the clearfix, where an empty space is added after the element which clears the float without any need for extra HTML markup.

Quick note

These are appropriately called pseudo “elements” (not selectors) because they don’t select any “real” element that exists on the page. This goes for these two, as well as the previous sections :first-letter and :first-line. Make sense? Like the first letter that :first-letter selects isn’t an element all to itself, it’s just a part of an existing element, hence, pseudo element.

Deprecated

:contains() – As far as I know, this is gone. The current CSS3 spec has removed it. I don’t know the story, let me know if you do. At a glance, it looks ridiculously useful (being able to select objects based on the textual content they contain). It may be because of problems, or having content in selectors being undesirable. My preference would be to have it select by elements rather than text, like p:contains(img), but alas, no such luck.

:required / ptional / :read-only / :read-write – Just use attribute selectors instead.

jQuery Usage

jQuery can use all of these in its selectors, which if awesome. Even awesomer, jQuery has additional pseudo class selectors available.

:first – The same as :nth-child(1)

:eq(X) – The same as :nth-child(X)

:contains(‘text’) – This is removed from CSS, but still works in jQuery.

:lt(X) – The same as :nth-child(-n+X), as in it selects the “first X elements”

:gt(X) - The same as :nth-child(n+X), as in it selects everything except the “first (X-1) elements”

:even – The same as :nth-child(even) or :nth-child(2n)

dd – The same as :nth-child(odd) or :nth-child(2n+1)

:has(S) – Works like I wish CSS :contain did, where it tests if the element has a descendant of a certain selector before matching.

There are actually a whole bunch more, and all of them are clever and useful (or at least an improvement on readability) See the selector documentation for more.

Specificity

The specificity of a pseudo class selector is less than a regular class selector. It’s the lowest value, the same value as an element selector:

li            {}  /* specificity = 0,0,0,1 */
li:first-line {}  /* specificity = 0,0,0,2 */
li.red  {}        /* specificity = 0,0,1,1 */

So in the example above, the :first-line selector would “beat” the regular list item selector, but the class selector will “beat” both of them.

LightCMS is a Light CMS

Really easy updates. That is the whole point of a “light” CMS. They don’t have as many features or as much extensibility as a “full” CMS (e.g. WordPress), but they do make the job of editing content on a site more intuitive, especially for less technology-inclined clients.

For example, to log in to your site, you append /login to the URL, and you’ll be presented with a login screen directly in the skin of your site.

Any client can appreciate that.

Some of what LightCMS does is common to many CMSs. It is for managing content and building websites. It lets clients do this themselves (literally every single client I’ve had in the past many years has wanted this, whether they actually do it or not). There are users. There are templates. Some features of LightCMS are unique to it, which I’ll cover later.

Editing

The most important part, the editing of content, is a nice clean process. Content is kept on the page in modules. The modules can be drag ‘n dropped around (or manually moved) as well as of course editing and deleted.

Drag and drop modules

Module menu

I enjoy how clean and polished all of this is. There is a lot of detail in an app with this many features and options, and it easily could have been half-assed.

Differentiation

Hosted

A common approach to the “light CMS” thing is to either give the CMS access to your site via FTP credentials, or put files on your server which do the job of editing. Either way, it’s your server. That can be a good thing, I know a lot of times I like having things under my control a lot of times. However, none of them are free, so it’s an expense you have on top of what you already pay for hosting. LightCMS is fully hosted.

They have a bunch of plans (literally 6) from free to a premier $99/month plan. The plans vary in number of users who can access the account, number of pages you can control, and the storage.

Some of the pricing plans

Fully hosted means that, by default, your site lives at a subdomain on lightcms, for example: http://yourwebsite.publishpath.com/. That may work for you, but probably not. Not very professional and all. You can easily use your own domain name though, with a simple CNAME change.

Fully hosted also means no manual upgrading. Not to mention customer support.

FTP

Even with the hosting, and the otherwise kind of clean/sanitized environment, you can get direct FTP access. Nice.

Widgetry

Another unique feature is how they give you functional bits you can add to pages as modules (I think they call them “elements”) just like your own custom ones. For example, a blog element, calendar element, a robust form builders, photo gallery, donations buttons, etc.

Reselling

They have kind of a white label option, where you can have your clients pay for the service, and you earn money from that. They charge $19/month, and you can set the price at whatever you want (you earn whatever on top of 19 you charge). Might be nice for some folks, but probably not something I would use. I prefer billing my own clients, so I’ll just pay for it and mark it up in my own invoices, but hey whatever works.

Your own designs

It should go without saying, but you can use your own designs with this. Basically you create a template with HTML files in a specific naming convention (Home.html, Inside.html, Admin.html, etc). Inside those templates you declare editable regions with “tokens” like this:

<$region$> <$/region$>

Once you got it all together, you just zip it up and upload it and your new design will be available as a template.

Try it

I think it’s a pretty decent little system. Go check out their Why LightCMS? page (and the tour) for a more thorough overview of what it does than what I presented.

Winners

Of course all these people did a great job. For their benefit, we’re just going to nitpick offer a little constructive criticism.

1^st Place – Steven Schrab – View entry

Notes: Take it a little easier on the image compression. CSS image replacement on title looked good, but would be impractical.

2^nd Place – Edd Sowden – View entry

Notes: IE 8 could have used some fallback alpha transparency support. IE 6 had the raw stylesheet, which usually is awesome, but would have been good to support for this contest.

3^rd Place – Mustafa Quilon – View entry

Notes: Would have preferred a Helvetica at the top of the font stack over Gill Sans. Missed the shadows on the footer lines as they go under the article page.

4^th Place – Pam Griffith – View entry

Notes: The font-stretch property caused some big differences in the header type between WebKit and Gecko.

These winners have been contacted, who will then in turn select the winning commenters on the original post. Once they have been selected, those people will be contacted and then prize selecting will begin.

As a whole

Everyone who entered should pat themselves on the back. As a whole everyone did a great job and should be proud. It was a for a good cause and good practice. I just mention this because I’m sure there will be some of you who are unhappy with their score. Don’t take it too seriously…

Judging

Entries were judged by myself and Doug Neiner. We each judged different alternating parts of each entry. You probably know me. Here is Doug:

Doug is a designer, developer, and owner of Pixel Graphic Design Studio. He is CTO of Fuel and blogger at Fuel Your Coding. He also has a personal website.

We judged on the following 100 point scale:

Specific Problem Areas

We were fairly lenient on fonts when it came to all the Helvetica Neue business. PC’s don’t come with that font, so if you used image replacement in the header, that was fine. Using image replacement for the article title isn’t a good idea though, so that was taken off for. I would have rather seen a wrong font than something that unflexible.

After all that judging, these are the things that tripped people up the most:

1. Line Height

There was text all over this mockup, with a variety of line-heights. This was often overlooked or misjudged. Line height is crucial for displaying text that feels good to read.

2. Subtle Shadows

As the three little lines went under the article box, there was a subtle shadow there.

3. Grid

The legs of the clock lined up nicely with the edges of the three photo boxes in the mockup. Many designs didn’t get that right. If the clock was placed in a fluid width manner yet lined up when the window size was about the size of the mockup, that was acceptable.

4. Web text

The text in the three “quote” boxes at the bottom was Georgia in three different colors. That definitely should have been web text sitting on top of those boxes, not an image, even if it was image replacement or had proper ALT text. Web text renders better, is easier to update, is selectable, etc.

Interesting Entries

None of these entries were winners, but they all did interesting stuff, check it out!

#103 – Fixed position footer and the content slides underneath it.
#117 – View source =)
#104 – One of the examples with animations for the arms of the clock
#58 – Total reinvention of the design
#127 – Maybe the only attempt at fixed positioning the clock
#11 – Used the MagicLine

Wrap up

It has been a long road! The important lesson we learned from putting on the event is that it’s a lot more work that the original idea seemed to be. But we got through it! Next time we’ll be more upfront about the timeframe and have the process more ironed out. Some sponsors will be good to to keep the thing cost neutral for everyone.

If you missed it up top, the results are here.

What is your server-side language of choice?

Poll is on the site in the sidebar for your voting pleasure.

I know many of you probably know multiple languages. Some of you probably are forced to write in particular languages for you job. For this poll, choose the language that you actually like the most.

And yes, I know the are more choices than in the list, that’s what “Other” is for, and I’d love to hear what those others are and why you prefer that language. For example, I’ve been hearing more and more about server-side JavaScript. Also if it’s not obvious, this is sans-framework. If you like Rails, clearly that’s Ruby. Django is Python. CodeIgnitor is PHP. Etc, etc.

Should tags like em and strong go <em>(outside)</em> punctuation characters, or (<strong>inside them</strong>)?

Like many polls around here, the question was interesting and stirred up some great conversation, but the question itself was probably flawed. There were only two choices: outside and inside, referring to placement of the HTML tags. So if “outside”, in the example in the question above, the parentheses would be italicized by the <em> tags. If “inside”, in the same example above, the parentheses would be regular text and the text inside them would be bolded by the <strong> tags.

What I was expecting was someone to chime in with the “absolute official rules on the right way to do it according to the typographic gods of the land.” That didn’t really happen. Instead the general consensus was “it depends.”

As for the poll results, at the time of this writing, 6,261 people have voted and the results are 55% in favor of “inside”:

It depends…

The following examples are still debatable, but these feel like the most correct way to go, as agreeded upon by most commenters in the original poll article.

The punctuation is left outside of the tag because the word “today” alone is what is being emphasized.

The punctuation is inside, because the whole phrase “Holy Crap!” is what is being emphasized.

There is split evidence on this one. Some would say that because that whole phrase is an “injection” into the sentence is should be grouped with the tag (outside) and all emphasized. Other more official sources say parentheses should never be emphasized. Personally I’d go outside. Seems like there could be awkward typography tension with the last letter being italic butting up against and upright parentheses.

Punctuation in book titles always go inside the tags.

Again it’s the title alone being emphasized, so having the question mark outside is the general consensus. I feel weird on this one, for some reason I like the opposite when it ends a sentence like this and prefer seeing the question mark follow suite with the previous words. This is a case where actually <i> may be more appropriate…

HTML5 and <b> & <i>

Ever since I’ve been a web designer I’ve been scoffing at the use of the deprecated <b> and <i> tags and dutifully fixing them with the more semantic <strong> and <em> tags. This always made sense to me as we are applying emphasis with these tags, not any specific styling. For example, you might want to leave the text roman for a strong tag but apply a background behind it instead to call it out.

But now that we are pretty much ready to rock with HTML5, we see the <b> and <i> tags return. WTF, you ask? Well, that’s what I thought, until you read up and think on it a bit. HTML5 is not replacing strong and em, these are just coming back in addition to them, and all four will live in harmony. In general, you’ll still use em and strong to emphasize words in text, but you should use b and i when you are bolding for the sake of bolding or italicizing for the sake of italicizing.

For example, book titles in text should be italicized. Not emphasized, italicized. That is a case of italicizing for the sake of italicizing and makes more sense to use the <i> tag.

I got a nice card from Doctors Without Borders from the donation made based on the number of entries, so in the meantime we can all feel good about that =).

CSS3 is a big mess! 4+ rules for making a corner round or adding a drop shadow! Preposterous! Where are the standards?!

I’ve been hearing a ton of that. There is something of a point here. We all like standards, no question they are a good thing for the industry. Seeing a bunch of messy/repeated code like CSS3 can produce doesn’t feel like the clean happy code that standards is supposed to be all about.

But here is the deal.

The specs for these things aren’t done yet. Standards move frigging slowly. Browser vendors know we want this stuff, so they don’t wait for the spec, the use vendor-specific CSS attributes so we can start using/testing them now. This is good. It means they aren’t sitting on their asses waiting for a slow train that answers to no one. When the spec does get finished, they can roll out support for it in the standard way much quicker.

In my opinion, it would be worse for browsers to implement the new attributes without the vendor-specific prefixes, as that would actually be abandoning standards.

I’m sure most of you read these sites anyway, but just in case…

I thought Nettuts ran a pretty sweet article about jQuery and it’s hidden features by James Padolsey. For example, I always forget how awesomely easy it is to serialize from inputs (like for AJAX submission). Serialize = find all the inputs in the form and build a query string with the name/value pairs, instead of doing all that yourself/hard coding it.

Then Smashing Magazine ran a great one by Andy Rutledge answering common questions about design professionalism. Andy is an opinionated dude and I love how he dished out some hard facts here. For example, if you are asking questions like “I’m just staring freelancing and I’m wondering how I can get more clients…” then you probably shouldn’t be freelancing. Plus, a heaping helping of personal responsibility.

Jeff Starr over on Digging Into WordPress wrote up a nice guide on getting a plugin into the official plugin repository. I’m a little disappointed in myself I’ve never done this before. I’m not much of a deep backend dude, but still, I have a few ideas that I think would make cool plugins.

I’m gonna close comments here just because anything that needs to be said about any of these things is probably best said at that article.

Tabs: a ubiquitous design pattern

:target pseudo class selector

The major empowering concept here is the CSS pseudo selector :target. :target is used in conjunction with ID selectors. The selector will match when the current URL contains a hash-tag of that exact ID. So if the current URL is:

http://css-tricks.com/#big-bam-boom

And there was an element with that ID on the page:

<h1 id="big-bam-boom">Kaplow!</h1>

Then this selector will match:

#big-bam-boom:target { color: red; }

How does one get to a URL with such a hash tag? You have links that activate them:

<a href="#big-bam-boom">Mission Control, we're a little parched up here.</a>

Browser Support / CSS3

Normally I might end a tutorial like this with a little section on browser support. But it’s rather important in this case so let’s get it out of the way now. :target is considered CSS3. It has wide support across all the major current browsers. Of course I’m all abut dropping support for IE 6, so who cares if it doesn’t work in that (it doesn’t), but :target is also not supported in IE 7 or 8. These browsers are still very much on the radar, which puts this whole tutorial in a fun/educational category rather than a use-this-in-live-production category.

Of course, if you wanted to use it in production, one option would be to use conditional comments to add JavaScript to make them to work. We won’t specifically cover that here.

Clean HTML

Let’s start this out right with some nice and clean HTML markup for our soon-to-be tabbed area:

<div class="tabbed-area">

	<ul class="tabs group">
	    <li><a href="#box-one">Tab 1</a></li>
	    <li><a href="#box-two">Tab 2</a></li>
	    <li><a href="#box-three">Tab 3</a></li>
	</ul>

	<div class="box-wrap">

		<div id="box-one">
		  <!-- box two content -->
		</div>

		<div id="box-two">
		  <!-- box two content -->
		</div>

		<div id="box-three">
		  <!-- box two content -->
		</div>

	</div>

</div>

I’d call that perfectly clean. Even with CSS disabled, you would see a list of links each of which would jump down the page to the div with the content related to that link.

CSS

The tabs themselves we’ll set up as a horizontal row of links.

.tabs { list-style: none; }
.tabs li { display: inline; }
.tabs li a { color: black; float: left; display: block; padding: 4px 10px; margin-left: -1px; position: relative; left: 1px; background: white; text-decoration: none; }
.tabs li a:hover { background: #ccc; }

When you float all the links like that, the parent will collapse, so let’s chuck in the old clearfix class so we can use it on the parent ul so it has a natural height. No need for the IE 6 and 7 hacks here, since neither of those support this technique anyway.

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

Now let’s set up the very basic styling for the panels. There is a wrapping div for all the panels. The purpose of that is to set a relative positioning context so we can absolutely position panels inside of it. All the panels will be of equal height and width and positioned exactly on top of each other. Both panels and tabs share the same 1px border.

.box-wrap { position: relative; min-height: 250px; }
.tabbed-area div div { background: white; padding: 20px; min-height: 250px; position: absolute; top: -1px; left: 0; width: 100%; }
.tabbed-area div div, .tabs li a { border: 1px solid #ccc; }

Now the magical part that makes it work is as simple as adjusting the z-index of the panels when they are “targeted”.

#box-one:target, #box-two:target, #box-three:target {
  z-index: 1;
}

Ruh-Roh… What about current tab highlighting?

What we have so far is a totally functional tabbed area. You click the tab, the corresponding content in that tab loads. Functional, but not the most helpful UI. There is no feedback at all which tab is the currently showing tab, either when the page loads or even when you click to view a different tab.

This is a fairly major hurdle. I find a way to solve it, and we’ll go through that here, but it’s dirty. The root of the issue is that we can’t select back “up” the element tree. So if we need the panels to have ID’s, the only thing we can affect in CSS is decedents of that div when it is in :target. For example:

#box-four:target a[href="#box-four"] { color: red; }

That would be a cool way to select only that particular link when that panel is active, but as of now, we can’t do that because that link isn’t a descendant of the panel.

The only way I’ve been able to solve this is to actually just make the navigation descendants of the panels. This is a bummer, because that means that each panel needs to repeat the tabs….

<div class="box-wrap">

	<div id="box-four">
        <!-- content for panel -->

        <ul class="tabs group">
            <li class="cur"><a href="#box-four">Tab 4</a></li>
            <li><a href="#box-five">Tab 5</a></li>
            <li><a href="#box-six">Tab 6</a></li>
        </ul>
	</div>

	<div id="box-five">
	    <!-- content for panel -->

        <ul class="tabs group">
            <li><a href="#box-four">Tab 4</a></li>
            <li class="cur"><a href="#box-five">Tab 5</a></li>
            <li><a href="#box-six">Tab 6</a></li>
        </ul>
	</div>

	<div id="box-six">
	    <!-- content for panel -->

        <ul class="tabs group">
            <li><a href="#box-four">Tab 4</a></li>
            <li><a href="#box-five">Tab 5</a></li>
            <li class="cur"><a href="#box-six">Tab 6</a></li>
        </ul>
	</div>

</div>

Very much not ideal, I know. But now that the lists are inside the panels, we can just use a “current” class on the list item that is the correct corresponding link and style that. And we’ll make sure the current panels tab navigation is positioned above the panels and is “on top” when it’s panel is.

.cur-nav-fix .tabs { position: absolute; bottom: 100%; left: -1px; }
.cur-nav-fix .tabs li a { background: -moz-linear-gradient(top, white, #eee); }
#box-four { z-index: 1; }
#box-four:target .tabs, #box-five:target .tabs, #box-six:target .tabs { z-index: 3; }
.cur-nav-fix .tabs li.cur a { border-bottom: 1px solid white; background: white; }

Now with current tab highlighting!

Demo and Download

Use at will, just be aware of the IE 7 problem. All of the HTML and CSS are right on one page, so if you want to “download” it, just copy and paste the code into an html file and save it.

View Demo

Hash it out

You’ll notice in the demo that if you click a tab in the one on the left and then click on a tab in the one on the right, the area on the left will revert back to it’s default slide rather than keep it’s current slide. That all goes back to :target and how it’s related to the hash in the URL. There is really no way around this without bringing in JavaScript, so if that’s not gonna work for you, you should probably just go JavaScript from the get-go.

Also, hash tag links “jump down the page” when clicked, so also note that that when you click a tab your browser window will pop down to have that tab be the top-most element (if there is enough room to scroll down on the page). Again, no fighting that without JavaScript to my knowledge.

Other resources

• Stay on Target – Awesome article from Think Vitamin, unfortunately missing it’s demos. It covers some uber clever techniques though.
• W3C spec on :target

The idea is that you can use unicode characters (read: fancy symbols) for class names in your HTML, and even use write CSS selectors with those same characters.

<div class="♫">
    A.A. Bondy
    <em>I Can See The Pines Are Dancing</em>
</div>

.♫ {
   display: block;
   background: #eee;
   padding: 5px;
 }

Pretty cool eh? I’d call my example above perfectly semantic as well, since the div with the music note class name is marking up a musician and song. Possibly even more semantic, as a music note symbolizes music moreso than any English word.

I put together a super simple demo page that shows it working. Oh, and yes-it-works-in-IE6™ & yes-it-validates™

But…

One funny thing? View the source on that page. I use PHP includes for the headers and footers of all my demos, and because of the character encoding (?) of that page the PHP doesn’t run it just sits there as text.

That ain’t right.

Coda does warn you first.

Weird eh? If you know how this could work both ways, let me know.

Other uses

Jonathan presented (in his original article) and idea for targeting the corners of a box.

<div class="□">
  <div class="┌">
    <div class="┐">
      <div class="└">
        <div class="┘">
          content
        </div>
      </div>
    </div>
</div>

Remember back a few years ago most of us were rocking rounded corners with nested divs and images like that! The corners symbols are clever, but I could see the <div class="□"> being used for like “container” or “box” style classes today, or, perhaps best of all, the clearfix.

I posted a little code clip of this over on Forrst (sorry I know most folks don’t have accounts there yet) and a guy named Aaron had a funny idea. Using upside down writing to be annoying! id='ɹǝpɐǝɥ', id='ɹǝddɐɹʍ', id='ɹǝʇooɟ'

Roll over a link, watch the image above change. That’s what we build in this screencast, only we don’t use any JavaScript to do it. The trick is some simple z-index switching on hover and a bit of absolute positioning.

View Screencast

With the mouse cursor inside the input box, you can use the mouse scroll wheel to increment the number up and down.

Hitesh worked up a technique for doing it using jQuery, which works great. Then later he found a plugin which has already been built for dealing with mousewheel events, which is really nice and simplifies things. Just for fun the demo will leave both versions in it.

HTML

This could literally work on any element, but text inputs make the most sense. Perhaps this could be used on a time-tracking form where you need to need to enter the number of hours/minutes spent on something. Or perhaps an order form for entering how many of something to order.

In our demo we’ll just have a label input pair like you’d find in just about any <form>:

<div>
    <label for="how-many">How Many? </label>
    <input type="text" id="how-many" class="wheelable" value="1" name="how-many" />
</div>

jQuery

If you want to check out the non-plugin version of this, just download the files below. We’ll cover using the plugin here, for brevity. You’ll need to include jQuery, the plugin, and your own JavaScript file:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/increment.js"></script>

When the DOM is ready, we’ll bind the new “mousewheel” event to the input. When that input fires, if it’s an “up” mousewheel scroll, we’ll increment the value upwards one, if “down”, it will be decremented by one (unless it’s already zero).

The appending of the image on the first line is so that non JavaScript users won’t see the graphic which indicates mousewheel scrollability.

$(function() {

    $("div").append('<img src="images/mousewheelupdown.png" alt="Scroll up or down with mousewheel" />');

    $("#how-many").bind("mousewheel", function(event, delta) {
        if (delta > 0) {
            this.value = parseInt(this.value) + 1;
        } else {
            if (parseInt(this.value) > 0) {
                this.value = parseInt(this.value) - 1;
            }
        }
        return false;
     });

});

What about non-numeric inputs?

You’ll have to deal with that as needed. Now that you have the “mousewheel” event that the plugin provides, the function you write when that event fires could be anything. In the demo I have a text input which cycles through a list of different kinds of whales…

$("#whale").bind("mousewheel", function(event, delta) {
    if (this.value == "Blue") {
        this.value = "Sperm";
    }
    else if (this.value == "Sperm") {
        this.value = "Orca";
    }
    else if (this.value == "Orca") {
        this.value = "Humpback";
    }
    else if (this.value == "Humpback") {
        this.value = "Blue";
    }
    return false;
 });

Killer whales are getting all the press lately, time for some Humpback love.

Degradation

This is pure progressive enhancement. Without JavaScript the inputs are still inputs which behave just as any other input would.

Enjoy

View Demo   Download Files

But wait… if you need to use an image anyway, why bother with declaring the gradient with CSS? That is kind of how I felt for a long time, but there is one important aspect that makes it worth it: browsers that support them don’t load the image fallback. One less HTTP Request = all the faster your site will load.

Huge thanks to Patrik Spathon for this idea and help with the demo page!

How it’s done

Cutting to the chase, here is how it’s done:

div {
            background-color: #1a82f7; /* fallback color */
            background-image: url(images/linear_bg_2.png); /* fallback image */
            background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
}

View Demo   Download Files

Different syntax for different rendering engines

Mozilla (Firefox, Flock, etc)

Mozilla’s syntax (more detail here) is like this:

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

The simplest way to declare a gradient is to just list a comma separated list of colors. That will start at the top and gradient to the bottom with equidistant color stops for each color. In the demo code above, we use a point and an angle (90deg) to it go bottom-to-top instead. For radial gradients: -moz-radial-gradient

WebKit (Safari, Chrome, etc)

WebKit’s syntax (more detail here) is like this:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

Trident (IE)

Trident’s syntax (not really CSS3… more detail here) is like this:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);

-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

Unfortunately, we can’t invite IE to the party! Using these filter properties does indeed work, and it would allow us to programatically declare gradients which is cool. But, instead of using the filter first and the image as a fallback, declaring a background-image overrides the filter and it uses that. Since we definitely still need image fallbacks, we might as well not use this at all.

“Stops”

The WebKit and Mozilla syntax for gradients both incorporate “stops”. A stop is an optional additional declaration that includes a point and a color. This means the gradient wont just start at one color and end at the other, it will fade to the stop color first, and that stop color will fade to the end color. More than one stop can also be used.

Saving HTTP requests

Using Firebug and looking in the Net tab to see all the resources used by the page, we can see the advantage.

The above screenshot is Firefox 3.6. We can see that the gradient fallback images are NOT loaded, which saves an HTTP request.

However using Firefox 3.5.8, the fallbacks are loaded.

We don’t save any HTTP Requests in olders version of Firefox (This is 3.5.8 on Vista). The gradient fallback images are still being loaded (and used).

It gets a little more iffy in WebKit browsers.

WebKit browsers WILL use the CSS3 property to render the gradient, but at the same time, still load the fallback images, so no HTTP requests are saved. The only advantage is the programatic declaration of color.

Doing it by the numbers

The speed gained by losing an HTTP request, to me, is the biggest advantage. The more I learn about web performance it seems to me keeping those down is the #1 way to improve page load time. However there is another advantage to using CSS3 gradients, and that is that these gradients are created programatically through numbers. Need to adjust some colors? Just adjust some numbers. No need to bring a big image editing program into the picture. This makes maintaining the site easier, as well as opens up doors for adjusting values on-the-fly. I imagine JavaScript libraries will begin to get the ability to animate these values soon enough, which will be pretty darn cool.

Ooooh Stretchy

When using an image for a gradient, it is declared as a CSS background-image and then repeated (you can often get away with a 1px slice, which is very efficient, size wise). The result though is that a static portion of the background is gradientized, and any overflow to that is flat color. Sometimes that works perfectly. Sometimes though it would be cool if the gradient stretched the entire height or width of the box. That is another thing CSS3 gradients can possibly be useful for:

So the big question is…

Is it really worth doing right now? I’m thinking it’s pretty darn close. If the numeric representation is a big deal to you, then I say yes you should start using them. If the speed is the only reason you would, then just realize that the only browser that it will help in is Firefox 3.6+, so you might wanna wait a bit on that.

Today, the print version of the book is back for sale. The book features some revised content, and two new chapters! The all-new Chapter 10 is called “Bonus Tricks” where we detail out some cool things you can add to themes. In this chapter we also introduce the two brand new themes that now come included with the book! Chapter 11 is called “WordPress Updates”, where we include what is new in 2.9.2, how to use those new features, and where we will continue to expand when new versions come out.

If you have already bought the book, you should already have gotten an email with a download link for the new version, which also contains the new bundled themes.

Not only that, but the site is sporting a fresh new design!

Bundled Themes

The best way to illustrate and explain something is often just to give someone the finished product and let them explore it. There is lots of code in the book, but it’s all removed from the context of a real design. Now you’ll get some real themes along with the book so you can see how that code is used in an actual theme. The themes do a particularly good job illustrating two big topics:

• Theme Options Panel – Both themes have options panels for setting various theme-specific options. They are built in a “framework” style, so that adding your own or adjusting what options are there is pretty easy.
• Child Themes – Both themes come with a child theme which restyles the theme without affecting any of how it works. If you’ve always wondered how that works, you can see it with these themes.

Plastique

See theme options shine here as there is a ton of options to control your theme. Everything from how it is laid out (columns, positions) to what types of things you wish to include, to adding in markup into individual sections. Preview Theme

Lines & Boxes

Based on the look of a wireframe, Lines & Boxes could be used as-is for a minimalist look, or used as a starting point for a more fleshed out graphical theme. Some theme options including overriding the header of the site, and options on if you want the main navigation to be a category list or a page list. Preview Theme

All AJAX

“All Ajax”, also a bundled theme, is based off Lines & Boxes but is not technically a child theme. The idea is that every internal link on the site loads without page refresh. Preview Theme

Get it

Even with all the new themes and 30+ new pages, the price point for the book and PDF stay the same. $27 for the PDF and $67 + S&H for the Book/PDF Combo. If you buy the print book, remember that automatically comes with the PDF which now comes as a bundle with the themes, so you don’t miss out on that action.

What happens if you bought the PDF while the book was sold out and now want the print copy? That would be anytime between January 18th and February 28th. If that describes your situation, just forward a copy of your receipt to sales@digwp.com and ask us for a discount code. We’ll send you one you can use on the print copy good for the value of what you paid for the PDF.

Go get it

I’ll be doing two sessions, one Tuesday, on Wednesday. One of them will be on advanced theme building. We’ll start with a mockup of a site we want to build (something modern and cool looking) and build it into a finished theme. The other will be “Tricking out WordPress”, where we will hop around some different techniques for doing cool things with WordPress. Probably stuff like advanced custom field usage, pulling in external content, and AJAX.

If you aren’t into the WordPress thing, remember this is a “CMS Expo” so WordPress isn’t the only kid on the block. There will be tracks for Drupal and Joomla as well, and all kinds of interesting stuff going on. For all three days it’s $779.00. Pretty pricey, so if you need to start greasing up your boss, you better get started now. You can register here.