CSS Gradients also add some additional versatility, in that they can stretch to fill dynamically-sized page elements, unlike tiling background images, which can of course only scale along one axis. (And it just seems to much less hacky than loading up a tiling image for a fairly simple effect. Pixel shims, anyone?)

I had held off using CSS gradients, since they were “a fancy new CSS feature unsupported by a lot of browsers,” until I recently realized that not only did all of the modern browsers support them, but many of the browsers were already supporting them without the vendor prefix. IE support is still iffy, only working properly in IE10, but what does Internet Exploder do right?

If you’re not already using CSS gradients, you should definitely read up on them. There’s a good article over at the venerable CSS-Tricks.

Everyone who uses Firebug regularly knows the basics. They know how to inspect and edit HTML and CSS, analyze page loading times and the like. There are a few neat tricks, though, that aren’t quite immediately apparent, but are very handy.

Quickly Copy a Background URL

I like to play around with background images when I’m experimenting with a design or learning from someone else’s. This often involves copying the URL of a background image from one element and pasting it to another. It’s a pain to carefully select the URL portion of a shorthand background attribute, which is what I did until recently. As it turns out, you can just right-click the attribute and choose “Copy Image Location” or “Open Image in New Tab.” Palm, meet forehead.

Specify a Pseudo-element

If you hover over a link (or any element with a :hover pseudo-element) while Firebug is open, the right-hand pane updates to show the relevant CSS. Wouldn’t it be useful if it didn’t disappear as soon as you moved the mouse? Fortunately, you can lock the hover state with the little dropdown arrow on the Style tab. Just put a check mark next to the “:hover” option.

See the Exact Style Applied to an Element

Next to the Style tab in the right-hand pane is one labeled Computed. This is useful for working out cascading issues, or checking the exact dimensions of an element.

Console Logging

Instead of spamming alert() dialogs across your screen when you’re debugging JavaScript, you can use Firebug’s Console tab instead. Calling the console.log() function will output whatever you pass to it in the Console tab. e.g. console.log(‘hi’). There’s a page about it on the Firebug website.

I was pondering the reasoning behind this recently. The obvious answer is that it encourages more comments, as someone who just finished the article is prompted to post while the content is still fresh in their mind. Meanwhile, having the form below the comments requires that a user read (or simply scroll past) others’ messages—perhaps even seeing like-minded comments and deciding against leaving one.

Assuming this is true, you could promote a higher volume of comments by placing the form higher up, or on a higher traffic site, promote a higher quality of discussion by putting it toward the end. I assume someone has done tests, but I couldn’t find any publicly-posted results.

Thoughts?

It also has a couple of manual color pickers, including a basic color wheel and the nifty “LiveSchemes” tool, and integration with Colour Lovers. So you can browse and save other palettes as well as creating your own. You can easily email color palettes or save them to your camera roll, as well as syncing them to Color Lovers.

ColorSchemer Touch is currently free on iTunes, though I believe it is usually $2.99.

UIE.com has a very interesting article, 6 Epic Forces Battling Your Mega Menus, that explains some of the primary usability issues with mega menus. A few of them could be designed around fairly easy, such as the common lack of indication that a menu trigger will open a menu. It’s a good read.

The Amazon mega menu seemed like an ideal solution to the growing tab problem. Finally, their design team had a way to show everything you could do on the site without eating up rows of tabs in the header.

Yet, just as suddenly as it had appeared, the mega menu suddenly disappeared. Replaced by a more sophisticated navigation scheme (that’s still on the site today), the mega menu’s lifespan was less than a year.

On the other hand, Jakob Nielsen has some good things to say about mega menus as well as plenty of usability tips for their implementation.

The Selectors Level 4 document already has one feature that is unfortunately missing from CSS3: parent selectors. You will finally be able to do things like selecting all a elements that have an img element inside them, with this syntax: $a > img { ... }.  The draft also mentions “nth-column” selectors, for styling all of the cells in a specific table column.

Of course, it’s probably going to be awhile until we start seeing browsers supporting this on a usable level.

Before anyone comments about the CSS3 spec not being “finished,” note that W3C specs are not prescriptive. They’re not “finished” until they’re pretty much supported by the major browsers, and changes have been made based on the implementation. A couple of the documents for CSS3, Selectors Level 3 and CSS Color Module Level 3, are already under the Completed Work section of their website.

Remembering the different prefixes and the sometimes ridiculous variations in syntax for the attributes is a pain. Fortunately, Nettuts+ has made a nifty web utility that analyzes your CSS and adds in extra rules with the vendor prefixes. You just need to write your CSS with either the official attribute or one of the prefixed versions, and Prefixr will do the rest for you.

It can even minify your CSS for you. (Though Mac may users may also want to try Minimus for that.)

If that wasn’t cool enough for you, it even has an API. You could use this to create your own tools that make use of Prefixr, or you could use it to integrate it with your favorite text editor. Examples are included for Textmate, Vim, Espresso, Alfred and Coda. And someone has already cooked up a Text Filter for BBEdit. That’s the killer feature for me. I can just hit a keystroke in BBEdit and the text updates a second later.

Cross-Browser CSS in Seconds with Prefixr [Nettuts+]

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

It supports modern, standards-compliant browsers, but I imagine some of the niftier features would probably break down on older ones. That would be a big issue if you wanted to use Bootstrap for an ordinary website, but less so for “web apps,” where it’s more common to assume a user has a modern browser.

I haven’t tried Bootstrap yet, but you can give it a test run by hotlinking the 7kb minified CSS from their GitHub repository. Or download the LESS files from the repository if you want to customize it.

Bootstrap from Twitter [Twitter Developer Blog]

No matter your reason, anyone doing some web design can benefit from some freebie PSDs.

Creattica

Envato’s Creattica site, which is primarily a design gallery slash place to hire freelancers, has a category for downloadable freebies. There’s some good stuff, from icons to textures to audio player skins.

PixelBeam

PixelBeam is largely one guy making some cool graphics (though he seems open to contributions). Everything is free for commercial use, with a few “simple rules” to follow, namely that you link to PixelBeam if you’re sharing the resources and that you properly credit PixelBeam if you use them in a project you intend to sell somewhere like ThemeForest.

Premium Pixels

“Premium Pixels is a bunch of free design resources & tutorials created by Orman Clark. Don’t worry, shameless freeloading is encouraged, feel free to use and abuse at will.” Licensing is similar to PixelBeam. You can do pretty much anything you want with the PSDs, so long as you don’t redistribute them as-is. Attribution is requested for projects you intend to sell.

365psd

BittBox

BittBox is a good source for textures, patterns and the occasional Photoshop brush. There are tutorials and the like now and then, too.

There’s not much to be done for the latter, but there is a handy tool that makes finding the coordinates painless. Sprite Cow intelligently draws a box around an image you select in your sprite sheet (after you load the sprite, of course) and writes the CSS for it. You can’t get any simpler than that.

I bet the developers could make some good money by making a Mac version and putting it up for sale in the App Store.