On my day off I decided to reproduce the Dusted logo through CSS. CSS3 properties have allowed us to reproduce some images and icons purely with code — whilst it is pretty cool, it also has some disadvantages.
From left to right: The original JPG, CSS and CSS — but without border-radius. As you can see, the creation has been pretty successful, I used two key CSS3 properties to help achieve this. Setting border radiuses and gradients of several elements.
The finished product
Technically it wasn’t that hard to produce — a couple of CSS3 properties and we can achieve the below. The tricky bit is getting the shapes and curvature to match the image. It needs a fair bit of trial and error and you could spend hours perfecting it. Matching the typeface took longest — luckily we don’t use a font with serifs.
If you look closely, you will see a small imperfection with the highlighted layer — it should be straighter, but that was the best I could get it. Anyone got any ideas how I can make this line look more accurate? Perhaps by rotating the element slightly?
Whilst this is quite cool, is it the right thing to do?
Semantically I don’t agree with inserting empty HTML elements like divs, although I’ve inserted nbsp in some tags for this example, we really shouldn’t be inserting blank content into these elements — they exist to hold objects like text, not to be styled to look like text. HTML5 Canvas is the current web tool that we should be using or starting to use when drawing 2d elements and graphics. This is just an experiment.
Canvas however, is not supported by ‘less distinguished’ web browsers and that is a problem for developers who need to produce these 2d objects and make them appear consistent across each and every browser. CSS3 tools like border-radius and gradients are also not supported by these browsers — meaning our developments will look like the far right icon above. Here our D appears as an pixelated O — quite cool as it happens, but suicide for the brand. I’m hoping I don’t get shot for that.
For now we can just use images right?
Yes, at the moment images are just fine. If you’re really desperate to produce something with pure code, have a crack at Raphael.js — something which is accessible for all browsers. You can also do a lot more than just draw with it.
The Dusted “D.” device are registered trademarks of Dusted Design Partners Limited.