Using CSS3 and a little JavaScript, I’ve created a bookshelf for your blog. For a demo, go to the CSS3 bookshelf, for some more information on how it was made, read on.

Inception

A few weeks ago, Nic Price (@nicprice) and I were talking about blogs and taking a picture of his bookshelf to show what books he’s found helpful over the years. After a little consideration, and watching the CSS 3D transform demo (snow stack), I thought that this is a perfect candidate for some CSS trickery.

The sketch

One sunny morning, I drew this:

CSS3 bookshelf sketch

The concept is simple:

• a definition list of title and description.
• Style and transform the <dt>s to look like books on a shelf
• CSS animations on hover to pull the book slightly out of the shelf
• Move the book into the centre on click/touch, displaying the definition underneath
• Use as many CSS3 techniques as possible

Implementation

Starting with the definition list, I set out the widths and heights required for each of the books. Initially, only the spine of the book was showing, but that didn’t look as good as a small gap. Each element is positioned using relative-absolute positioning, allowing for simple movements using the left property to center each book in the screen, instead of lots of calculations when using translateX. So, pretty standard stuff to get the books in line.

Book Styles

Each book has a css class associated with it. This allows for title position customisation and different backgrounds, widths and heights. Each book makes use of CSS3 Multiple backgrounds, allowing for different images between the book spine and the front cover. Whilst this can be done in one image with photoshop, I decided not to (potentially, the spine of the book can be removed).

Book titles

The title of each book needs to be rotated to read down the spine. Optionally, I could have put the titles into the background elements, making them more like the actual books. Unfortunately, I couldn’t find good images of the spines on the internet, and there’s more opportunity for CSS3 transforming text. So, using the -vendor-transform property, I rotated the text 90 degrees:

-webkit-transform: rotate(90deg); /* Rotate book title 90 degrees */

However, this rotates the whole element, so a <span> tag has to be used to target only the text. In the example there’s a few other properties to make the text line up properly, and on some books it’s overridden to allow for longer or shorter titles. In the end, it looks like this:

dl.bookshelf dt span {
	-webkit-transform: rotate(90deg); /* Rotate book title 90 degrees */
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
 
	display: block;
	position: relative;
	width: 300px; /* width is height of book */
	top:150px;
	right: 130px;
}

Animations

On hover (or focus) the book pulls itself out from the shelf and tilts slightly, adding some box shadow to give it a 3D look. This is in two parts, defining what elements will transition on the element, and then changing the values on hover. These values were gained by trial and error, with a small rotation and translation looking better than a more pronounced movement.

dl.bookshelf dt {
	height:300px; /* Default height of books */
	display: block;
	float: left;
	border:1px solid black;
	font-size: 1.5em;
	position: absolute; /* Using relative-absolute positioning */
 
	-webkit-transition-property: left, webkit-transform, webkit-box-shadow; /* transition on two properties */
	-webkit-transition-duration: 0.5s; /* take 0.5 seconds */
	-webkit-transition-timing-function:ease-in; /* Ease in */
	-webkit-transform-origin: left bottom; /* use the left, bottom of the element as the origin of transformation */
/*... see css file for full vendor property list */
}
/* Hover over or focus on a book and have it pull out of the shelf */
dl.bookshelf dt:not(.showBook):hover, dl.bookshelf dt:not(.showBook):focus {
	cursor:pointer; /* turn cursor to a hand */
 
	-webkit-transform: rotate(-5deg) translateX(-30px); /* Roate 5 degrees and pull out 30px */
	-webkit-box-shadow:#000 1px 3px 5px; /* Add a box shadow so it looks like the book has depth */
/*... see css file for full vendor property list */
}

Note the dt:not(.showBook), because we don’t want the selected book rotating when hovered over. I tried using -webkit-perspective here to make the books look a little more “3D”, but I couldn’t make it work properly. It’s a feature only available on Safari on Snow Leopard so isn’t widely used enough for my purposes.

All of those three together produces this:

Showing the Book
Using a little JavaScript, I added a click event that added a class of “showBook” onto the <dt> and <dd> tags. This triggers an animation to move the book to the middle of the page and displays the definition below it.

The animation is pretty simple stuff, modifying the left property and the z-index, no keyframed animation. I did try more complex animations, but it didn’t add anything to the look and feel, only complicated code.

The <dd> makes use of border radius, RGBA for its background and text-shadow to make the text stand out on the opaque background. Each <dd> has an Amazon affiliates link which floats to the right hand side of the definition. These together look like this:

A Book and description in CSS3, showing transform, box shadow, RGBA and text shadow

The code for that looks like this:

dl.bookshelf dt.showBook {
	-webkit-transform: translateZ(10px); /* Come above all the books */
	-webkit-box-shadow:#000 10px 10px 5px;
	/* See code for other vendors */
 
	left:335px; /*(page width / 2) - (book width / 2), or thereabouts */
	z-index: 100; /* just in case the translateZ doesn't work */
	padding-left: -80px;
}
 
/* Class applied to definitions when shown */
dl.bookshelf dd.showBook {
	display:block;
	width:350px;
	position: absolute;
	top:310px;
	left:250px;
	background:rgba(0,0,0,0.8); /* RGBA background */
	padding: 10px;
	color:#fff;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px; /* Opera and MS will support border radius without prefix */
	text-shadow: #666 1px 1px;
}

Before I finish, there are a few caveats:

• The only browsers to completely support all features are Safari for Mac, Chrome 5 and Opera 10.5
• Firefox gets animation support in 3.7 (or above)
• Animations aren’t smooth in Opera 10.5 until they’ve been run a few times; after that, it look fantastic.
• Internet Explorer… let’s not go there. Some features like border radius will work in IE9. I’ve put all vendor prefixes in even if the browser doesn’t support it at this time.

So, enjoy the CSS3 Bookshelf, I’ve enjoyed making it and it’s a good use of this new technology. I’ll make a downloadable package available in a few days, for now, take a look at the source code.

Thanks for reading.

Update: I’ve re-jigged the CSS a little to account for some more perspective. I’ve also changed the shelf as the old one was, well, hideous. New screenshot below:

If you liked this, you may also like:

1. Don’t just complain about CSS3, do something!

This was very good week to be a web developer, some big announcements: Google announces WebM – a collaborative project with Mozilla, Microsoft and Opera all announcing that a new royalty-free HTML 5 <video> format has been created using the VP8 codec. Apple haven’t said anything thus far but you can guarantee they’ll say something soon.

TypeKit and Google have got together to make the Web Fonts API including a modified version of TypeKit’s WebFont loader. The fontsquirrel has this comparison of the fonts used by all three loaders.

Future of Web Design and UX London happened. There are video passes available and lots of people will be sharing their slides. Check out the presenters’ twitter feeds for more information. Box-shadow may make its way back into CSS3 – as reported by CSS3.info

Oh, and my server got hacked, leading to a wasted evening of clearing out and removing attack points.

If you liked this, you may also like:

1. The Future of the Wave
2. One long week

So, infamously, the iPhone OS doesn’t support Flash, encouraging its users to use the advantages of the webkit-based Safari to overcome any challenges that a lack of Flash can present. Last year, Adobe announced that in Flash CS5, you’d be able to convert it to run on the iPhone. In April, with a revised iPhone developer agreement, Apple put the brakes on, saying only apps written in one of three languages would be accepted on the App store. Adobe’s solution would compile directly to the CPU bytecode, hence being illegal.

Adobe weren’t too pleased about this, yet launched the product anyway, hoping Apple would change its mind. Since then, Steve Jobs wrote an open letter, explaining their position, claiming six points:

1. Flash is closed source (like the iPhone), HTML5 is open
2. Flash is the number one cause of crashes on OS X
3. Flash is not designed for touch
4. Need to maintain app quality on the store
5. HTML5 can do everything that Flash can
6. Battery life suffers

In the letter, there’s a bit of pretending that the iPhone is the only phone in the market, but otherwise, in my opinion, it’s accurate.

Adobe’s response was somewhat deluded; laughing that Flash wasn’t an open platform (someone should break the news to Adobe’s CEO) and saying that Flash 10.1 will ship to mobile devices later this year, focusing on multi-platform development. Adobe’s CEO also points that Apple’s developer restrictions are cumbersome and have nothing to do with the technology.

Even worse for Adobe, Microsoft has weighed in, saying HTML5 is the future of the web.

So, who’s on the right side? I believe that Apple have got it right this time, even implementing a half-finished specification is better than a platform that Apple have no control over, especially when the user experience is so important for the iPhone’s success. HTML5 genuinely can do everything Flash can, and do it all on hardware. It goes beyond Flash with geo-location and JavaScript access to more hardware features like the accelerometer and camera.

Personally, Adobe needs a re-think of their strategy. Flash enjoyed enormous success as a video player (thanks to YouTube) but they should have seen HTML5 coming. It’s been on the cards since the first iPhone in 2007 and Adobe has done through an entire release cycle (CS5) with little though for HTML5. If they’re smart, which they are, Flash CS6 will be able to create SVG graphics and Canvas apps using web databases and fonts, having Flash fallbacks for non-HTML5 capable browsers. Dreamweaver will have HTML5 structure tags available and Illustrator and Photoshop will do SVG too.

If Adobe don’t keep up with developers, the devs will simply find other tools to use. Adobe can avoid this, and it’s in their hands.

If you liked this, you may also like:

1. HTML5 Coming of Age
2. Want your company to develop for iPhones? Get in the Yellow Pages!
3. Why iPhone Web Apps are Still Worthwhile

This is a follow-up to one of my most popular posts, “Getting a Facebook Login working with your application“. That was written in 2007, and is quite out of date.

This entire post was inspired by a reader who e-mailed me asking for help. I’m more than happy to help someone who is learning. It makes the whole thing worthwhile.

In May 2008, Facebook announced “Facebook Connect”, a Trusted authentication method so that user’s profiles can be used on other sites. My 2007 article pretty much does what Facebook Connect does for you now, but Facebook have made it much easier. To get started, take a look at the Facebook Connect web pages and more specifically, the single sign-on guide.

A few things of note:

1. This does not replace your current login system. You still need a user database
2. People still need to click “connect” and you cannot use general session/cookie information to simply log in without interaction.

Facebook claims it gives you 15% more registrations, so what are you waiting for, get started!

If you liked this, you may also like:

1. Getting a Facebook Login working on your application
2. Facebook Platform – a thought
3. The Facebook Platform

If technology is driven forward by demand and hype, Apple is at the helm of a HTML5 labelled chariot rampaging through the streets. The iPad is coming and high-end newspaper and magazine publications are falling over themselves to change their sites to be used with Apple’s new flagship device.

The amount of power Apple holds is amazing. Forcing the likes of News Corp to change the way their content is published is a task that would normally be impossible for any external company. Even if you were coming at it from the inside, you would never have a hope of dropping Flash video players. There simply isn’t the business case to change something that so many man hours will have been put into, and backwards-compatability issues crop up all over the place. Yet with the onset of this new device, predicted to sell between 8 and 10 million units this year, companies have had to look to new, Apple endorsed, technologies.

This change, away from Flash, has forced the issue of HTML5 video. YouTube has HTML5 video mode, as does Vimeo, and this will soon be supported by the upcoming IE9. All of these major sites are now raising awareness of this new technology to people who wouldn’t normally know about it i.e. your manager AKA the person with the budget. Now they’re aware of the benefits of HTML5, they want to see what else it can do. If you are ever asked this question, show them HTML5demos.com or the IE9 test drive page. If they’ve got a more detailed question, go to the HTML5 Doctor or just twitter @brucel, Opera’s web evangelist.

With so much drive towards HTML5 at the moment, you can’t get away from it. With Apple as the driving force, the train will be unstoppable, though it will still be many years until you can use it in all situations; probably around the time we ditch Windows XP for good.

If you liked this, you may also like:

1. Executive Summary: Flash vs HTML5
2. HTML5 in your blog

This is the second part of a series on the construction of my blog. In this post, I’ll be focusing on the underlying HTML5 markup.

When I started making this blog, I had a decision about what language to use underneath. The choices were simple: HTML4, XHTML 1.0, or HTML5. The first two options represent the old school of HTML, both based on standards from 1999, with tags which have worked for years and are well understood and supported across all browsers. What these standards fall down on are their semantic tags.

Since table layouts disappeared, site content has been divided by large blocks, created using <div> tags.  Whilst having a single multi-purpose tag has been very useful, this tag has become littered around websites, trying to find ways to semantically structure their data.

HTML5 Tags

HTML5 brings a new set of structural tags for designers and developers to use in their sites. These tags are:

• <header>
• <nav>
• <section>
• <article>
• <aside>
• <footer>
• <figure>

These semantic elements can all be used in place of <div> tags, as they are all “block-level” elements. For an example of how they can be used, let’s take a look at the front page of my blog.

It all looks like the blog has a firm structure, that could quite easily be <div> tags. Look closer and you’ll see that there isn’t a single <div> tag defining general structure. Only the <article> and <section> tags have been repeated at any point in the page. Take a look at this next screenshot, without the content visible:

The layout is very simple, making full use of the HTML5 tags. The advantages here are clear:

• For screen readers, users can skip straight past the <header> and <nav>, and locate <articles> simply by using keyboard shortcuts or having screen readers jump to articles
• For search engines, all <articles> are marked up accordingly, making it easier to determine what the actual content of the site is
• The same goes for the <nav>, providing hard links for the main parts of the site.

There’s other benefits too. This blog uses WAI-ARIA to identify the role of each of the sections. Using this, the content section is marked up differently to the toolbox section where my Twitter and Last.fm links are displayed.

It’s a similar story on a single article page. Making use of the new tags makes reading an article easier and more clearly defined:

The single page template makes use of the <aside> tag to mark up the sidebar as inconsequential information.

Browser issues

As usual, IE has problems rendering these new tags. Thankfully, Remmy Sharp has an very useful bit of JavaScript that makes everything work nicely. IE then acts just like the other browsers. Problem solved.

HTML5 Video

Structural tags are one of the only items currently implemented in most modern web browsers. Other technologies such as web databases and drag & drop are still a long way off. What isn’t a long way off is HTML5′s <video> tag – native video in the browser. Youtube and Vimeo are already implementing this so you can too. It’s simple enough, just encode your videos in H.264 (for webkit browsers) and Ogg (for Firefox and Opera) and you’re good to go. If you want to know a bit more about the H.264/Ogg debate, read Bruce Lawson’s column.

There are lots more benefits to HTML5 that I’ll show as I add them to the blog (like the <mark> element!).

I hope you’ve found this useful. The accessibility benefits of HTML5 are excellent, and I hope you’ll be upgrading your blog soon.

If you liked this, you may also like:

1. HTML5 Coming of Age
2. Executive Summary: Flash vs HTML5
3. My problem with HTML 5 – Styling <meter>

Did you know, HTML 5, the spec that will be completed in 2022, but with some bits available now, will have a whole new set of form elements designed to make complex forms available natively from the browser. I’ve been to a few talks where Opera’s Bruce Lawson has demoed and talked about these upcoming features that have been implemented in the Opera browser. From an accessibility standpoint it looks great; no longer will screen readers have to rely on labels to infer the type of data to be entered into forms. From a developer’s standpoint, you won’t have to code javascript date pickers any more, nor have to rely on javascript for validation.

So, all of this makes it easier to enter data on the web, a great thing. I asked the question this morning, “who enters the most data on the internet?”. The answer is spammers. It is generally thought that 90% of all e-mail sent is spam, and a quick glance at my blog’s spam counter sees 7,300 fake comments caught compared to 56 real comments.

So, why will HTML 5 forms be such a problem? Well, at the moment, spammers use automated tools to crawl the internet, looking for forms to fill in to spread their advertising links or perform XSS attacks. To bypass most validation, the crawlers look for labeled form fields to fill in. Quite simply, HTML 5 forms will make this job easier.

Instead of labelling forms with “e-mail”, there’s now a specific input type <input type=”email”> which validate an e-mail address. Common anti-spam methods of adding a second e-mail field hidden to normal users will be ignored as there is a clear (and CSS visible) e-mail address field.

Forms validation may be useful for the normal user, but it’s even more useful for the spammer. With limits of input fields now being contained in plain text in the input, it makes it trivial for bots to enter correct data.

So, what can be done about this? Well, I’m not sure. There are some anti-spam methods that will still work, for instance timing the entrance to the page and seeing how long it took to complete the form. Very short times are spam, short times are sent for moderation and normal times are approved. There’s captcha, which is inaccessible and then there’s blacklisting, which hasn’t worked for years.

If you have any theories, please share them here. If there’s a solution or something the working group can do to make spam more difficult rather than easier, it should get into the spec sooner, rather than later.

If you liked this, you may also like:

1. Easy Semantic Forms with CSS
2. Application Forms
3. Unique IDs in AJAX Web Applications

Of the upcoming CSS3 modules that are coming into common use: selectors, borders, text etc, the multi-column layout module interests me the most. I’ve always been a fan of newspaper style layouts and that was one of the key looks I was going for when re-designing this site. The big problem is that the module just isn’t ready yet.

The facts:

1. The module is currently supported by Safari 4, Chrome 3 and Firefox 3.5
2. Opera 10.5 has support coming but is not implemented yet. IE has no support for the feature, which is currently not planned for IE9 (at least not mentioned)
3. The spec has a number of properties that are not implemented by any browser (column breaks)

Ok, so you can work around some of those problems with javascript hacks but that’s not the point here. I wanted a pure multi-column layout for the front page of my blog, but instead I’ve removed the experiement and relegated it to the footer as I just could not get it to work consistently. If you look at this page’s footer (or the image at the top of this post) now you can see the problem.

The basics of my issue

I’ve got a containing <div> with [-moz|-webkit]column-count set to 3, ample gap for the lists and no width specified to let the browser lay out the content as it sees fit. There are three <h5> elements, each followed by a <ul> element in the <div>. What I expect the browser to do is identify the <h5> elements at column headings and start a new column with this element. Instead, it ignores my semantics and tries to push out equal height columns.

Why is this so annoying

Simply because column-break doesn’t work. What I do is put [-moz|-webkit]column-break:after on the <ul> elements but the browser continues to insist on its own break points.

Get it right

It appears that the candidate recommendation spec (17th December 2009) has resolved some of these issues, but it will take a while for them to get in to builds and even longer before they become mainstream. For now, keep using floated <div> elements and javascript.  Maybe then it’ll be worth the pain.

If you liked this, you may also like:

1. CSS Matrix Layouts: Another Way?
2. Classitis (class-eye-tiss) – The new CSS disease
3. Is CSS a black art?