Desktop Demo
15th September 2011 · Last updated: 5th October 2016
One day I suddenly wondered why I couldn't use the Windows desktop to drop images and text notes directly onto it. These would relate to things I was working on at any given time. They might be rotated and piled in heaps, as if they were scattered across an actual desk. What's more, they might be in slightly opaque boxes, so you could see the desktop underneath. Well, here is that vision, created using CSS:
It works in all modern browsers that support CSS rotation, box shadows and opacity. I only have Internet Explorer 8 though, and found it doesn't quite work fully in that. I haven't tried to add fixes because it may well work in later versions of IE. Can anyone test it and let me know?
Here's an enlargeable screenshot of how it should look. Make sure you go fullscreen to enjoy the demo at its best. On Windows, press F11.
Hovering over the items on the desktop highlights them. I noticed a strange effect when hovering in Firefox 6. The text suddenly smoothed, then went ragged again. Firstly, I'm not a fan of rotated text as it looks, well, awful. The letters are jagged, and lined up higgledypiggledy. What's more, they sometimes rearrange themselves slightly on hover. I've no idea why.
Here's the effect I mean. I took a screenshot from the same page in Firefox. On the left is the rotated text seen briefly on hover. Firefox seems to add an anti-aliasing effect, which lines up the text nicely. On the right is the text as it appears on the page before and after hovering. Yeuch.
I decided to test this in other browsers. I found that Opera and Chrome always use the smoother style for rotated text. Whereas Firefox and Safari do not.
Lastly, whilst making this demo, I found a neat way to align text to the right of the screen. I'm not sure if it's proper use of HTML or not (or even if I should have used CSS for this) but it works. I placed the text at the bottom right in a <bdo> tag and ran it right-to-left. I just had to type it in backwards first! Take a look at the source of the demo to see what I mean. The text then aligns with the right edge of the desktop photograph.