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.

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!

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;
}

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 theatres this November when James Bond returns in Skyfall.

Cheers! ^_^

---

First off, cookieless domains are your friends for content distribution. Why? Because every time a web browser talks to a server it sends a copy of all its cookies for that domain. As you can imagine this is quite ridiculous if your client is requesting an image, CSS, JS or other static resource which can never use that cookie information. These wasted upload bits are totally unnecessary so lets get rid of them with the help of a cookieless domain.

Sub or New Domain?

You might think there is a magical ‘no cookies’ option on your server but there isn’t. A cookieless domain is simply one that has never set a cookie. This means two options; create a sub domain (like s.forstmist.org) or create a new domain name.

At first glance a sub domain seems nice and simple but there is a caveat. If you redirect your visitors from a sub domain (www.forestmist.org) to your root domain (forestmist.org) you’ll end up with cookies on your root domain. These root cookies are automatically sent along with any requests to all sub domains. That’s right, having cookies on your root domain taints all your sub domains from becoming cookieless domains. This is not a concern if you channel all your visitors to a www sub domain since any cookies there will not be available to the root domain and therefore won’t taint other sub domains.

For short domain name lovers, registering a new domain for serving static content is a no brainer. I definitely fall into this category so I registered forestmisty.org which I shall use as an example in the rest of this guide.

.htaccess Redirect

With the new misty domain setup and pointing to my web server everything was working great. Requests to static images weren’t passing cookie information but what if someone went to the root of forestmisty.org? What if a broken link sent them to a 404? WordPress would handle the request and that means potential cookies from it or Google Analytics. Yikes!

What would be nice is if we can allow any requests for forestmisty.org/wp-content/ but redirect anything else back to forestmist.org. We can do exactly that with the following .htaccess commands.

RewriteEngine on
RewriteCond %{HTTP_HOST} ^forestmisty.org$ [NC]
RewriteCond %{REQUEST_URI} !^/wp-content/?(.*)$ [NC]
RewriteRule ^(.*)?$ http://forestmist.org/$1 [R=301,L]

The first line enables the Apache rewrite engine.
The second line says anytime a request comes in for ‘forestmisty.org’ continue to the next line.
The third line says if the request is NOT for ‘/wp-content/…’ continue to the next line.
The forth line says if we made it this far redirect the original request to forestmist.org including any extra query information like /favicon.ico, /creative-resume, etc…

By the way…
^ means the start of a string.
$ means the end of a string.
? means the preceding character or collection in parenthesis is optional.
. means any one character.
* means the preceding character can occur 0 or more times.
$1 means insert whatever was inside the first set of parenthesis to the left.
[NC] means not case sensitive.
[R=301] means do a 301 redirect.
[L] means the last rule so don’t bother processing the rest of the .htaccess file.

Now we can rest assured that requests to our new cookieless domain will stay cookie free by only servering up what are almost always static file requests from the /wp-content folder.

Configure WordPress

Our new domain is setup and protected pretty well thanks to our .htaccess file so now it’s time for WordPress to join the fray. Specially, WordPress needs to have any /wp-content  links rewritten to point to the same location on our cookie free domain.

• Download, install and activate the excellent CDN Linker by W-Mark Kubacki.
• Login to WordPress
• Settings » CDN Linker
• Enter your new cookieless domain for CDN URL.
• Change your ‘Include Dirs’ line to read ‘wp-content’ if you setup your .htaccess file like mine.
• Save Changes

Load your home page and view source. You should see your new cookieless domain being referenced quite often. Yay!

Success

With a little bit of effort our server is less stressed, our clients are loading faster and hopefully you’ve got a silly grin on your face.

---

One of my daily destinations is a guiding web page called New Life. A very simple design containing five key concepts integral to my new self. These are Sleep, Fancy Dresser, Grooming, Focus and Freedom.

Of all these, freedom, the most etherial has shown itself of late. For brief interludes yes but a perfumed breeze of moisture is far more than sufficient for a fremen. Invigorated and renewed I find it easy to continue the journey knowing that no matter what happens, I chose the right path.

Much of these feelings are thanks to my new freelancing lifestyle. I choose what I work on, who I work with and have no obligations as a provider until I choose to accept them. Thanks to careful selecting, everything I work on is a tremendous learning font. Each hand crafted creation empowering me with abilities needed for my lifetime goals. No effort wasted, a perfect journey!

When I was a child freedom meant my huffy bicycle. Now that I am older, more nuanced and most importantly, know myself, freedom is so much more. Still, a simple picture of open skies, a classic muscle car and an airport runway evoke everything I need to ascend into the feeling of freedom.

Freedom must be different for each individual but for me, I know what it is, I have tasted it and I will work for it. When it arrives, we’ll go for a drive together. Two old friends reunited at last and with no guilt for the past.

The open road calls. Won’t you join me?

---