A CSS-only Hipster Style Logo

Hipster logos are totally up to date these days and why not creating one in HTML5/CSS3 without using a drawing tool, just the code editor of your choice. Here's a CodePen demo of the logo: http://cdpn.io/pfrFb

A good hipster logo requires a dividing cross, some letters and an icon. Let's begin with the cross. The HTML markup is fairly simple, just like this:

<div class="cross"></div>

The CSS code is a little more complex…

.cross::before,
.cross::after {
    background: #bdc3c7;
    width: 198px;
    height: 1px;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}


.cross::before {
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
}


.cross::after {
-webkit-transform: translateX(-50%) rotate(-45deg);
transform: translateX(-50%) rotate(-45deg);
}

First of all we define the basic properties just like color, width, height and position for both of the cross lines. Within the general declaration we define by using transform-origin: X Y the rotation origin for upconming CSS transformation.

The line visualization is done entirely by using the pseudo elements ::before and ::after. Afterwards the axis is rotated by 45° and with translateX(-50%) moved by 50% to the left.

And by that we've got the core component of every good hipster logo.

Hipster math

To arrange the letters and the icons we have to do a little bit of math. We calculate the diagonal of a square, which is d = a * sqrt(2).

As mentioned before we divide the cross into 4 quadrants. Their content gets centered vertically and horizontally and we're done. The following scheme shows the idea behind this approach.

To create the quadrants in our code we're gonna take a an unordered list with the following markup:

<div class="logo-container">
    <ul>
        <li class="characters portrait" id="l-q">C</li>
        <li class="characters portrait" id="r-q">S</li>
        <li class="characters landscape" id="t-q">S</li>
        <li class="characters landscape icon" id="b-q">❤</li>
    </ul>
</div>

The actual positioning is done by CSS:

li { list-style: none; }
.landscape { width: 140px; height: 70px; line-height: 70px; }
.portrait { width: 70px; height: 140px; line-height: 140px; }

#t-q { top: -70px; left: -70px; }
#b-q { top: 0px; left: -70px; }
#l-q { top: -70px; left: -70px; }
#r-q { top: -70px; left: 0px; }

But where are the values for height and with of the rectangles are coming from? From the hipster math… A square with the side length of 140 px has a diagonal of approximately 198 px in length (ok it's 197.9898987322333 px). A this is exactly the length of our cross lines!

Hipster layout

And now just some hipster layout to our logo and we're done. To be a flat style rebel we're gonna take a little bit of text shadow for the heart icon…

.characters {
    position: absolute;
    font: normal normal 400 18pt/1 "Times New Roman", Times, serif;
    color: #666;
    text-align: center;
}


.icon {
    color: #e74c3c;
    text-shadow:0 1px 0 #333;
}

If you want to, you can apply a circle arround the logo for instance with 4 px stroke size, but I think, you can figure this out by yourself :-). To read the full tutorial (in german) just visit http://usw-usf.de

HTH