CSS Hipster Logo

Das Tutorial vom Kreuz mit CSS und Flat Style

Henning über CSS, CSS3, Featured

Hipster Logos sind überall! Auf Aufklebern, Plakaten, Visiten-, ja sogar von Speisekarten prangen sie. Sogar bei der täglichen Arbeit wird man mit ihnen konfrontiert. Die Zeiten, in denen man mal mit CSS einfach einmal ein Kreuz gemalt hat ohne sofort daran zu denken daraus ein Hipster Signet zu machen sind vorbei. Ach übrigens – in diesem Tutorial zeige ich wie man das macht (CodePen-Demo)…

Das Kreuz mit dem Kreuz

Ein gutes Hipster Logo benötigt ein Kreuz als zentrales Visual. Aber wie malt man so etwas in CSS3? Eigentlich recht einfach. Man nehme ein wenig HTML Markup und ein paar Pseudo-Elemente, ein wenig drehen, transformieren… et voilà.

…und so sieht’s aus bzw. so – Buchstaben, Icon und Kreuz

ein CSS-only Hipster Logo

Werfen wir also einen Blick auf den Code, den wir zum Erstellen des Kreuzes benötigen:

HTML Markup

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

CSS Code

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

Der eigentliche HTML Part ist sehr einfach. Ein div-Element mit der CSS-Klasse cross. Die Stylesheet Deklarationen hingegen haben es schon mehr in sich. Zuerst werden die allgemeinen Eigenschaften der Kreuzlinien, wie Farbe, Höhe, Breite und Position beschrieben. Dann wird mit transform-origin: X Y der Drehpunkt für die nachfolgende Rotation festgelegt.

Wie aus dem HTML-Code zu ersehen ist wird die Linien-Darstellung durch die CSS Pseudo-Element ::before und ::after vorgenommen. Die jeweiligen Achsen werden nun einmal um 45° nach rechts bzw. nach links gedreht. Mittels translateX(-50%) wird die jeweilige Achse um die Hälfte nach links verschoben.

Damit steht das Kern-Element eines jeden Hipster Logos.

Hipster Mathe

Hefte raus! Klassenarbeit! Wer weiss noch wie man die Diagonale in einem Quadrat berechnet? Jawohl, Seitenlänge des Quadrats multipliziert mit Wurzel 2. Aber wozu braucht man das?

Diagonalen und die Verwendung im Hausgebrauch

Die Antwort ist einfach. Um die vielsagenden Buchstaben im Logo zu positionieren – hier C, S, S und ein Unicode-Herz – unterteilt man das Kreuz in Quadranten. Vier Rechtecke deren Inhalt vertikal und horizontal zentriert wird. Das obere und untere Rechteck erstreckt sich über die gesamte Breite des Kreuzes und die Hälfte der Höhe. Das linke und rechte Rechteck nimmt die halbe Breite und die gesamte Höhe des Kreuzes ein. Nachfolgende Grafik vereinfacht die Vorstellung:

Quadranten Schema

Zur Erstellung der Quadranten habe ich eine ungeordnete Liste gewählt.

HTML 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>

Die Ausrichtung und Positionierung der Rechtecke wird im nachfolgenden CSS-Statement beschrieben.

CSS-Code


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

Doch woher kommen die Werte für die Höhe und Breite der Rechtecke? Eben aus besagter Mathematik. Ein Quadrat mit der Seitenlänge 140 px hat eine Diagonale von etwa 198 px Länge (genau 197.9898987322333 px) und entspricht damit der Länge unserer Kreuzlinien. Die Quadranten werden dann entsprechend der obigen Schemazeichnung positioniert.

Hipster Layout

Flat Style Colors

Jetzt noch alles schön machen und das Logo steht. Dem Unicode-Icon etwas Farbe und einen kleinen Schatten (Flatstyle-Rebell) angedeihen lassen und die Buchstaben noch etwas in Form bringen und wir haben ein ansehnliches Endergebnis.

CSS Code

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

Wer möchte kann noch einen Kreis um das Logo malen, um es noch etwas hipper zu gestalten… Wie das funktioniert, lässt sich leicht selbst ausknobeln.

Fertig! Hipster Image!

Für alle, die es immer noch nicht fassen können gibt es hier nochmals die CodePen-Demo. Ich hoffe Ihr könnt mit diesem kleinen Tutorial irgendetwas aufhippen, oder es als Logo für euren eigenen Burger-Laden verwenden. Wenn nicht, wisst Ihr wenigstens, wie man mit CSS ein Kreuz malt.

HTH,
–Henning

Informationen über den Autor

Henning

...ist ein User Interface und User Experience Designer. Nebenbei Frontend Developer für Web-, Desktop- und mobile Plattformen. Mit mehr als 10 Jahren professioneller Projekterfahrung schreibt er zu den Themen Webdesign, -trends und -programmierung – eben fullstack! Follow @kingfries