Quantum of CSS

April 30, 2012

If you like this article you'll probably like Red Alert, Fair Use and Bahamas too. ^_^

James Bond Logo

One of my favorite things to reflect upon when graced with a beautiful logo is... can it be done in CSS? The answer almost always, is yes.

Of course, just because you can build an aircraft carrier out of parts ordered from a 1979 Sears catalog, doesn't mean it's a good idea. The fun part is figuring out how to recreate a design with elegance.

View the finished logo
Chrome, FireFox, Safari or IE9 recommended

Mini How-To

A good example of elegance can be found in recreating the iconic 007 gun barrel. All we need is one HTML tag and a bit of CSS. Neat!

Animation illustrating how one HTML element and two CSS pseudo elements are used to draw three individual shapes.

Step 1

Set the body background color and add some basic style to the barrel div.


<div class="barrel"></div>

body {
    background: #eee;
}
.barrel {
    background-color: #444;
    height: 30px;
    width: 145px;
}

Step 2

Add a nice curve to the front of our barrel.


.barrel {
    border-bottom-right-radius: 26% 100%;
}

Step 3

Create a :before pseudo element with a border-radius curve and move it to the top and left of its parent. Don't worry if it seems too large and just focus on the overlapping area for now.


.barrel:before {
    background-color: rgba(255,155,55,0.5);
    border-bottom-right-radius: 41% 100%;
    content: '';
    display: block;
    height: 49px;
    left: -42px;
    position: absolute;
    top: -7px;
    width: 50px;
}

Step 4

Create a curvy :after pseudo element and move it to the bottom and right.


.barrel:after {
    background-color: rgba(155,255,155,0.5);
    border-top-left-radius: 30% 109%;
    border-top-left-radius: 60% 200%;
    content: '';
    display: block;
    height: 18px;
    left: 78px;
    position: absolute;
    top: 23px;
    width: 59px;
}

Step 5

With everything lined up nicely; set the overflow property of .barrel to hidden to trim anything that wanders outside its shape.


.barrel {
    overflow: hidden;
}

Step 6

Now set the background color of the pseudo elements to the same as the body. Perfection!


.barrel:before,
.barrel:after {
    background-color: #eee;
}

View the finished logo

Epilogue

Recreating the 007 logo ranged from the ridiculously simple (zeros) to pleasingly complex (gun trigger/guard). The seven however, was especially difficult. It required multiple attempts to forge it into a shape that not only looked great in all browsers but retained its beauty when zoomed in or out.

Speaking of browsers, you'll want to make sure you are using IE9 or any recent version of Chrome, FireFox or Safari.

Not having to worry about old browsers is a lovely benefit of working on personal projects. Well that and obsessing over pixel or even sub-pixel details for up to a week of time which is exactly what this project took.

Hope to see you in the theaters this November when James Bond returns in Skyfall.

Cheers! ^_^