Tangled in Design Branding Decoration

Tangled in Design is the work of Stephen Greig, currently a Web Designer/Front-end guy in Nottingham, UK.

Read more about Stephen

I wrote a book on advanced CSS3, published by John Wiley & Sons. You should totally buy it…

Buy my book: CSS3 Pushing the Limits

Tangled in Design is the work of Stephen Greig, currently a Freelance Web Designer/Front-end guy in Nottingham, UK.

Stephen specialises in design and front-end development, notably HTML5 & semantics, scalable CSS, along with particular expertise in the experimental, cutting edge CSS3 modules.

Stephen's been in the industry as a full-time professional for over 5 years, during which he has graduated with a First Class BA Honours degree, written a 380 page book on advanced CSS3 and held Senior positions in both New Zealand and South Wales.

He has since moved back to his home in Nottingham where he now works as a Senior Web Designer.

Stephen loves sports and is a keen follower of Hereford FC as well as the Welsh Rugby Union and Football teams.

He also has a deep passion for music and boasts an extremely varied taste, as is evident by his last.fm profile.

He also likes swearing and thinks that talking in third person is cool as fuck.

Want to know more? Tweet me. I'm nice.

Slide Back

Famous Logos in CSS3 – Batman

Tweet

Batman Logo in CSS3 The second famous logo in the series we’ll be attempting to re-create with CSS3 is the Batman logo!

Last week we looked at the Pepsi logo, which was relatively simple with only three blocks of colour to manipulate into the appropriate shapes and position. The Batman logo is a bit more tricky, occupying a much more comprehensive shape than the Pepsi logo.

I took on some advice from Chris Coyier of CSS Tricks after last weeks effort, who advised using the :before and :after pseudo-selectors in order to minimise the number of divs. This would prove especially useful advice in creating the batman logo, as I had initially counted up a total of 11 div elements in order to recreate the symbol. However, with the help of the aforementioned pseudo-selectors, I managed to reduce this number to just 6.

View Demo

Browser Support

Browser support for the CSS3 Batman logo is a little sparse generally, but it’s pretty solid among the most recent browser releases.

It’s important to note that the reason it isn’t rendering correctly in some browsers is because the :before and :after pseudo-selectors in these browsers don’t recognise certain properties, namely the border-radius and transform CSS3 properties.

So Firefox 4, Chrome 11, Opera 11.1 and Safari 5 all render the logo correctly, but IE9 proves to be the only latest major browser release to fall victim of the pseudo-selectors. You can see that a few of the elements have rounded corners, proving that IE9 has no problem rendering them, but it does when using :before and :after!

A couple of the older versions of Firefox and Safari also have trouble rendering CSS3 properties when using pseudo-selectors.

They would render correctly if we used extra HTML markup instead of using the pseudo-selectors, but this series is all about experimenting with CSS3 and re-creating these logos in the most efficient way possible and then taking note of browser-support rather than doing eveything possible to achieve it.

How close is it to the real thing?

On first glance I feel it looks pretty accurate, but when directly compared with the real deal, side by side, you can notice a number of differences. It needs quite a bit of tweaking to get it to a state where it would be hard to tell the difference, but overall I’m pretty pleased with the outcome. You can clearly see it’s the batman logo and only when it’s put next to the real thing can you really see the differences.

The Pseudo-Selectors

Enough talk about them – what do they actually do? They are actually really easy; the one’s we’re using simply add content before or after an element. In this case, I created one div for the yellow areas at the top of the batman symbol, as shown below.

Usually, you might would use three divs to create each of those three yellow elements, but in this case, we’re only going to use one div; <div id="top-yellow"> for the middle yellow bit and then for the left and right yellow bits we can use #top-yellow:before and #top-yellow:before as you can see below.

Simple, right?! One last thing – when using these pseudo-selectors we need to specify the content like so…

#top-yellow:before {
    content:"";
}

Now usually, you’d insert some content within the speech marks such as “This is a yellow div” and then this content would appear immediately before any elements with an id of #top-yellow. In this case, we’re just styling the pseudo-element so we don’t require any content.

And there we have it, the batman logo recreated using CSS3, pseudo-selectors and 6 divs! Again, if you have an even more efficient way to achieve my result, I’d love to see it in the comments section!

View DemoView CSS

About Stephen Greig

Stephen Greig is a 25 year old Freelance Web Designer/Front-end guy, currently living in Nottingham, UK. Stephen is also the creator of messivsronaldo.net and author of CSS3 Pushing the Limits, a book on advanced CSS3. You should follow him on Twitter where he talks about the web, sports, music and swears a lot. Stephen's also on Google+ if that's more your bag.