Beispiel ID-Selektor für Umsetzung eines Logos

In den vorherigen Kapiteln haben wir das HTML-Element <span> kennen gelernt und Selektoren um Elemente direkt anzusprechen.

Im Kapitel zu CSS-Zeichenabstand letter-spacing wurde als Beispiel ein Logo gezeigt, dass durch die Zusammenziehung von Buchstaben entstanden ist. Solche Logos können wir nun einfach über CSS umsetzen.

Wer kein AP-Logo machen möchte, kann auch einfach seine Anfangsbuchstaben von Vor- und Nachnamen nutzen. Wir erstellen folgende vereinfachte Form des Logos, die dann nach belieben erweitert und variiert werden kann:

Hier die Vorgabe, wie unserer HTML-Code aussehen kann – einfach probieren, den entsprechenden CSS-Code selber zu erstellen, bevor unten die Lösung angesehen wird:

<span id="textlogo">
<span id="logobuchstaben1">A</span><span id="logobuchstaben2">P</span><span id="schriftzug">Design</span>
</span>

Lösung: Design Text-Logo Schritt für Schritt

Wenn wir uns den obigen HTML-Code ansehen, fällt auf, dass unserer Buchstaben umschlossen werden von einem span-Element mit der ID mit den Namen „textlogo“. Darüber können wir alle Einstellungen machen, die für alle Elemente unseres Textlogos gleich sind:

• Hintergrundfarbe (schwarz)
• Schriftart (sans-serif)
• Schriftgewicht (bold)
• Schriftgröße (5em)
• Schriftfarbe (gelb)

Das ist also unser ersten CSS-Code, in dem wir das <span>-Element mit den ID-Selektor verwenden:

#textlogo {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 5em;
    background-color: black;
}

Jetzt wollen wir, dass der zweite Buchstabe den ersten Buchstaben überdeckt. Dabei ist wichtig, dass im HTML-Code kein Leerzeichen zwischen unseren einzelnen Elementen vorhanden sind!

Wir geben also einen negativen Wert für unser letter-spacing: -0.25em mit. Jetzt kommt bei dem Logo allerdings zum tragen, dass der Buchstabe A keine gerade Fläche nach rechts hat. Diese bekommen wir, wenn wir den Buchstaben kursiv anzeigen lassen.

Unser Werte für das <span>-Element mit den ID-Selektor „logobuchstaben1“ bekommt folgende CSS-Zuweisungen:

#logobuchstaben1 {
    letter-spacing: -0.25em;
    font-style: italic;
}

Unser Schriftzug mit dem Wort „Design“ soll in der Farbe Weiß und in klein dahinterkommen. Die Schriftgröße geben wir in Prozent an. Dadurch passt diese sich automatisch an, wenn wir die Schriftgröße im Element „#textlogo“ verändern.

#schriftzug {
    font-size: 30%;
    color: white;
}

Und jetzt müssen wir nur noch den Abstand zwischen den zweiten Buchstaben und dem Wort „Design“ verringern, dass das Wort „Design“ unter das ausladende P rutscht:

#logobuchstaben2 {
    letter-spacing: -0.4em;
}

Hier der komplette CSS-Code:

#textlogo {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 15em;
    background-color: black;
    color: yellow;
}

#logobuchstaben1 {
    letter-spacing: -0.25em;
    font-style: italic;
}

#logobuchstaben2 {
    letter-spacing: -0.4em;
}

#schriftzug {
    font-size: 30%;
    color: white;
}

Das ganze Spiel mit der Schrift funktioniert immer besonders gut, wenn eine große fette Schrift ohne Serifen wählt (also etwas gerade ohne viel Schnörkel).

Hier sind der Kreativität in Schrift und Farbe keine Grenzen gesetzt. Ein kleines weiteres Beispiel - wer Lust hat, kann nachbauen ;)

Viel Spaß beim Spielen mit den eigenen Buchstaben und Ideen.