This wrap-around banner effect contains no unneccessary markup, and uses padding + negative margins to align the content with its parent element. The illusion of depth is achieved by using the :before and :after selectors. The triangles are created with border corners, where an opaque border meets a transparent border.

As far as I know, there is no simpler way to achieve this effect. Hope you can use it!

Years back, we at User Interface Engineering did a little experiment. We asked folks to search for information and items on sites they’d never been to. In advance of showing them the site, we asked them what terms they thought described what they were seeking, then we asked them to go to the site and find what the items. After they either completed the task or gave up, we went back to the site’s home page and counted the number of times the users terms were on that page.

On the sites where the users’ terms were present in the navigation, those users succeeded about 72% of the time at finding what they were seeking. Yet, on the sites that didn’t mention the users’ terms at all, those users only succeeded 6% of the time.

http://webstandardssherpa.com/reviews/stop-hiding-behind-products/

This guy, Jef Raskin, believes you should cut the username altogether:

Media queries can still be confusing for a lot of us, and people are using them differently. When looking for a way to target the iPad specifically, I found a number of different solutions. This is the one I prefer.

Using the max-device-width lets you know that this is a device with a maximum of 1024 pixels. Then use the width property to limit the query to match the size of the iPad, which is 1024 pixels on the long side, and 768 on the short side. Obviously, if there is another tablet with the exact same specifications–and if not, there surely will be–it will display the same styles.

@media screen and (max-device-width:1024px) and (width:1024px) { /* iPad landscape styles*/ }
@media screen and (max-device-width:1024px) and (width:768px) { /* iPad portrait*/ }

I believe this is as iPad specific as it gets.

Search results updated by the key stroke. (via The Register)

In previous versions of HTML, you were restricted to the text input type for written information. However, you were not able to define what kind of information a text field was expecting.

HTML5 introduces 13-ish new input types

With the new input types, you can define that aparticular input is expecting a phone number, or an email address, or a URL, or a date, et cetera. The most practical use of the new values, beside the fact that it makes more sense, is that user agents can display the most useful keyboard for the input.

Full list of HTML5 input types (as of 20. August 2010)

*  input type=text
*  input type=password
*  input type=checkbox
*  input type=radio
*  input type=button
*  input type=submit
*  input type=reset
*  input type=file
*  input type=hidden
*  input type=image
*  input type=datetime NEW
*  input type=datetime-local NEW
*  input type=date NEW
*  input type=month NEW
*  input type=time NEW
*  input type=week NEW
*  input type=number NEW
*  input type=range NEW
*  input type=email NEW
*  input type=url NEW
*  input type=search NEW
*  input type=tel NEW
*  input type=color NEW

Adobe and Typekit are teaming up to bring some of the world’s most popular, recognizable, and respected fonts to the web. Starting today, you’ll be able to use classics like Adobe Garamond, News Gothic, Myriad, and Minion plus many more on your website — all of them newly optimized and hinted for the screen.

I can not wait to see the personal weblogs about food and babies, with body copy set in Bickham Script with negative leading.

(But seriously, we get Myriad!)

css3-mediaqueries-js is a small javascript library that gives you support for CSS3 media queries in older browsers, including IE5+, Firefox 1+ and Safari. Newer versions of Firefox, Opera, Safari and Chrome already offer native support.

If you are unfamiliar with media queries, I suggest reading Ethan Marcotte’s article in a recent issue of A List Apart. Speaking of which, I just finished the first A Book Apart by Jeremy Keith. It is a short read, clearly explaining the most important aspects of HTML5.

Put this function in your functions.php:

function the_slug() {
	$post_data = get_post($post->ID, ARRAY_A);
	$slug = $post_data['post_name'];
	return $slug;
}

And call it in your template file like this:

<article id="<?php echo the_slug(); ?>">

Simple as that; saves you from writing CSS for randomly numbered IDs.