I hope you’ll forgive a little self-promotion, as I’d just like to play a few quick notes on my own trumpet. The latest issue of Net magazine is now on sale, and features a tutorial article, Create A Dynamic Content Panel, written by me.
In the article I explain how to build a dynamic Contact area, as we did on our recent redesign of Preloaded.com, using the Web Storage API and the BBC’s Glow Javascript library.
I’m not sure what the rights situation is with this article, but I hope that at some point in the future I’ll be able to post it here on my blog. But in the meantime, you can buy a copy of Net magazine in the UK at all good newsagents, as the saying goes (I don’t know if it will be in overseas editions also).
On the subject of print, I’m also currently writing a book about CSS3 which should be published later this year. I’ll have more information on that nearer the time.
Sitepoint’s Web Design blog featured an article this week called Create A Studio Style Backdrop In Photoshop, which provides instructions for making a glossy, reflective surface effect, similar to what you often see in adverts.
As the title makes clear, the tutorial is for creating the effect in Photoshop — but really, the same effect is fairly easily achievable with some bleeding-edge CSS. That said, it won’t work in every browser, so currently it’s just a proof-of-concept piece.
Read the full article
Firefox 3.5 was released earlier today, and joins Safari in supporting the @font-face rule with OpenType and TrueType font families, allowing you to use a wider range of fonts in your designs (as long as they are correctly licensed, of course).
One slight drawback of the technique is the blank space that’s displayed as the new font is loaded into the browser; this is especially unnecessary for users who already have that font natively on their system.
The way to get around that is quite simple; use local() to check if the font is on the user’s system first.
Read the full article
A mistake which seems to be fairly common when taking the first steps in learning about Microformats (and one which I have made) is to presume that the markup which is generated by the generation tools – for example, the hCard Creator – is the markup that must be used in the page.
That’s not the case, of course; with a few notable exceptions, the markup is completely customisable, and it is the order of the class names (and other attributes) which matters.
Read the full article
One of the pieces of good news from the Internet Explorer 8 announcement is that the new browser will support generated content. This is something the IE team have been resisting for a while, but it’s a very useful and flexible extension to CSS (whether or not it should be included is an argument for a different time).
At it’s most basic level of usage, content allows you to append strings at the beginning or end of an element. In this first example I’m going to use the :after and :before pseudo-classes to append content to both ends of the h1 element:
Read the full article