Fair Use CSS Logo

September 12, 2013

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

Fair Use is an amazing concept. CSS is also. So how about a Fair Use logo using CSS!

Fair Use logo as rendered in Firefox 23

Fair Use CSS Logo
Chrome, Firefox, IE 9+ and Safari

Behind the Scenes

Recreating the logo was super easy since the all the shapes were either circular (border-radius), boxy, or a combination of both. Box-u-lar if you will.

I did however, learn an important technique during the finessing phase.

That technique was to set any two elements that needed to line up with each other with the the exact same spacing from some third element. That way when em to px math rounding occurs they'll both end up with the same value. No more pesky 1px object intersection imperfections; at any size!

I know, the above paragraph may not make much sense right now but, trust me... it will come in handy one day.

Feel free to explore the source of the Fair Use CSS Logo to see how things work. The essential bits of code are also below for easy copying and pasting.

HTML


<div class="contain">
    <div class="fair"></div>
    <div class="use"></div>
</div>

CSS


*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html {
    margin: 0;
    padding: 0;
}
body {
    background: #ccc;
    font-size: 7px;
    margin: 0;
    padding: 16px;
}
.contain {
    height: 61.3em;
    margin: auto;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all 0.7s ease;
    width: 61.3em;
    z-index: 1;
}
.fair,
.use {
    background: white;
    color: transparent;
    cursor: default;
    position: absolute;
    text-indent: 110%;
}
.fair:before,
.use:before,
.use:after {
    content: '';
    display: block;
    position: absolute;
}
.fair { /* circle with borders */
    border: 6.3em solid black;
    border-radius: 50%;
    height: 61.3em;
    overflow: hidden;
    top: 0.2em;
    width: 61.3em;
}
.fair:before { /* letter shape background in the middle of the circle */
    background: black;
    border-radius: 0 0 50% 50% / 0 0 44% 44%;
    height: 34.8em;
    left: 9.45em;
    top: 9.5em;
    width: 29.8em;
}
.use { /* horitonzal bar in F */
    height: 3.2em;
    right: 23.75em;
    position: absolute;
    top: 23.6em;
    width: 14em;
}
.use:before { /* bowl at bottom of F */
    background: white;
    border-radius: 0 0 50% 50% / 0 0 85% 85%;
    height: 8.3em;
    position: absolute;
    top: 11em;
    width: 100%;
}
.use:after { /* vertical bar to the right of F */
    background: white;
    height: 19.5em;
    right: 0;
    top: -8.5em;
    width: 3.05em;
}

Epilogue

Once you get into a flow; recreating designs in CSS can be both fun and educational.

Kinda like watching PBS. Sure, it takes a bit of effort at first but then you feel smarter. Smarter than watching endless American Gladiators re-runs with an equally endless bowl of Doritos.

What? Just me?!