Member preview

How I Made The NIKE Logo Using A Single HTML Element — Or How I Thought Inside The Box And Found Two More.

For over a decade we have been taught the CSS Box Model as that image that shows up in Chrome’s Developer Tools:

Figure 1: CSS Box Model integrated in Chrome’s JavaScript console pane under Developer Tools panel.

Will The Fake HTML Element Please Sit Down —

The image above has been embedded into the psyche of the large majority of web developers. But surprisingly this representation of an HTML element is not 100% entirely accurate. Shocking, I know.

Along Came :before and :after Pseudo Selectors

The :before and :after CSS pseudo-selectors refer to two uniquely separate HTML element entities contained within the same HTML tag!

Yes, Every HTML Element Is Actually 3 Unique And Separate HTML Elements.

This creates opportunities for saving a meaningful amount of bandwidth. Because you get two more div pairs (<div></div><div></div>) for free.

If you realize that the actual Box Model looks somewhat like this:

Figure 2: Stepping deeper into the CSS Box Model…

Knowing this you can now use CSS code to do somewhat miraculous things with just “1” HTML element. For example… create the NIKE logo.

Still don’t believe me? Well… see for yourself:

How To Create The NIKE Logo Using Only 1 <div> Element

Together with elliptical border radius (you know… when you supply two coordinates separated by space to the border-radius property) and also the transform: rotate(deg) plus our new knowledge of :before and :after pseudo selectors… aaand a bit of creativity… it is possible to construct the NIKE logo from a single HTML element.

Actual screenshot of an HTML element created by using these techniques:

Figure 3: Nike logo created 1 HTML element and 3 CSS commands.

Let’s define our main #nike container:

#nike {
position: absolute;
top: 300px;
left: 300px;
width: 470px;
height: 200px;
border: 1px solid gray;
overflow: hidden;
font−family: Arial, sans−serif;
font−size: 40px;
line−height: 300px;
text−indent: 350px;
z−index:3;
}

Note overflow: hidden here is used to ensure everything outside of the container is clipped away. Using #nike:before and #nike:after pseudo elements maintained by the single parent element, we’ll create the base of the NIKE logo which is a long black bar.

The values were picked by trial and error to match the curve of the rounded corners used here present in the famous Nike curve:

#nike:before {
content: "";
position: absolute;
top: −250px;
left: 190px;
width: 150px;
height: 550px;
background: black;
border−top−left−radius: 60px 110px;
border−top−right−radius: 130px 220px;
transform: rotate(−113deg);
z−index: 1;
}

Specifying empty space as a value for the content: ””; property will enable rendering of the pseudo-selector. (Or it will not appear at all.)

Similarly, we’ll create another curved box. Its white background will serve as a mask to block out the rest of the logo. Here, the rotation angle is everything. It’s what forms the recognizable curve of the logo. We’ve also used z-index of 1, 2 and 3 respectively to ensure proper layering of the elements.

#nike:after {
content: "";
position: absolute;
top: −235px;
left: 220px;
width: 120px;
height: 500px;
background: black;
border−top−left−radius: 60px 110px;
border−top−right−radius: 130px 220px;
background: white;
transform: rotate(−104deg);
z−index: 2;
}

Here is another view of the logo. This time with transparent background, so we can actually its geometric composition. Note: You can use “NIKE” as the value of content property of the inner curve and adjust its rotation angle if you wish to place the word “NIKE” inside the curve.

Figure 78: Composition of the Nike logo, consisting of 3 elements (1 HTML element and its 2 pseudo-element counterparts.)

The actual HTML is just a single div element:

<div id = "nike"></div>

Grab a copy of CSS Visual Dictionary — The ultimate CSS desk reference.