Multiple background images is a cool feature of CSS3. The syntax is easy, you just comma separate them. I find it's easiest/best to use the background shorthand property so you can declare the position and repeating and whatnot and keep them all grou ... More
jQuery plugin by Daniel Rapp to fill any element with background noise. Uses <canvas> to create, then turns it into an image and sets a repeating background-image. Even if you'd be against using this on a production site, it's still a clever pr ... More
I made a little CSS3 rotate-y loading graphic thing just for kicks. Here's an animated GIF of the glory as it appears in WebKit.Theories at work:Two circles on top of each other. One created by a pseudo element.Pseudo circle sits underneath with nega ... More
Just in case anyone doesn't read Smashing Magazine, Eric Meyer has a long excerpt from his latest CSS book here which is loaded with good stuff. I particularly liked the bit about clearing :nth-child elements combined with media queries.Direct Link t ... More
Creating an image rollover is pretty easy with CSS. Give the element a background-image, then on it's :hover, change the background-image. It's best practice to combine both images into one and shift the background-position rather than use two separa ... More
When designing for print, having a properly calibrated monitor makes all the sense in the world. If done perfectly, what you see on the monitor should look like what you get on paper from a printer. No surprises.When designing for the web, there is n ... More
As a follow up to asking people if they are using HTML5 or not, I asked the people who are:What features of HTML5 have you used on production sites?These are the levels of popularity, from almost 3,000 voters:Not a big surprise that using the new sem ... More
Randomly, I made a letter flipper thingy the other day. I saw a similiarish effect on a Flash site and tried doing it with JavaScript instead. You can view source on that page to see the simple code. It's just recursively calling a function to change ... More
Funny article from Thierry Koblentz on CSS selector efficiency. Although there are cases where multiple ID selectors are needed, a selector like #nav li ul li a#active is almost certainly too heavy and inefficient.Direct Link to Article — Perma ... More
Editor's Note: This article originally appeared on danheberden.com. jQuery’s .animate() method, and the shorthand methods that use it, are fantastic tools to create animations. Creating animations that link together to achieve a particular eff ... More
It's not every day you come across a solid bug in WebKit, which it seems to me leads the pack in quality support of CSS. Alexander Futekov emailed to let me know about this one, which somehow I have never personally come across.The problem is using a ... More
I made a page with the shapes you can make with a single HTML element and CSS. Here is an example:The CSS you see on the page is the real CSS rendering that shape, and it also editable, so feel free to tweak it right there. I'd love to expand it if a ... More
The <html> element is the highest level element on any web page. Every other element is within it. If you are making a fluid width site but wish to limit the maximum width it can expand (a good idea), you can do so easily by literally applying ... More
An Ajax autosuggest script is supposed to help the visitor and present in real time (as they type) some possible results based on their entered words/characters. In my opinion, this is a great feature to enhance the user experience. It's very easy to ... More
A MooTools Autocompleter widget that creates a unobtrusive and customisable suggestion box for input fields from variable data sources. Try it out, it can load the suggestions from a local object or via XHR from a JSON or an XHTML source. Example in ... More
A small piece of javascript reads al SPAN tags, checks if it has class="editText" and a id=. If that is true, it adds a onclick function. That onclick function will create a textfield or input (depending on the size of the editable text). Someone has ... More
If you are not familiar with how flickr handles editing data, here's a short summary. - Show user the data field normally (for instance: the title of a picture) - When mouse rolls over that title, make the background of the word yellow - If the user ... More
Quickly, and easily, build an accessible and unobtrusive tabbed navigation interface for your web site. ... More
ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it's 58k. - The ThickBox JavaScript code and CSS file only add an additional 15k (only 10k by using the thickbox-compressed.js) on top ... More
Bokeh with CSS3 Gradients
Bokuh is the effect of backgrounds in photographs with deep depth of field. Shapes round out and get blurry. Think of a really out of focus picture of a lighted Christmas tree. Divya Manian creates that effect in WebKit by using multiple backgrounds ... More