Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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.

Textlogo AP Design gelb-grün
Textlogo AP Design gelb-grün

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:

Beispiel von Logo über reinen Text erstellt
Beispiel von Logo über reinen Text erstellt

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

Textlogo AP Design gelb-grün
Textlogo AP Design gelb-grün

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

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe