Webdesign - Das animierte Dreieck im Titel der Seiten

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie wurde das animierte Logo mit Hilfe von CSS3 erstellt?

01Mär2014

Das animierte Dreieck im Titel der Seiten


Ein Standard bei Webseiten ist, dass ein Sprung zur Startseite über den Titel oder das Logo erfolgt. Mein Logo, das hellblaue Dreieck am Anfang einer jeden Seite, hatte ich am Anfang als Bild eingebunden.
Aber mit einfachen CSS3 (Cascading Style Sheet)-Mitteln geht es auch eleganter.

In HTML (HyperText Markup Language) folgt zuerst:

<div id="dreieck">
    <a href="./" title="Startseite: webdesign klamonfra">
        webdesign<br>klamonfra<br>
        <span>Klaus Franz</span>
    </a>
</div>

Und jetzt werden die einzelnen Elemente mit CSS3 (Cascading Style Sheet) gestaltet. Zuerst das hellblaue Dreieck.

#dreieck {
    margin: 0 auto;
    width: 0;
    border-left: 105px solid transparent;
    border-right: 105px solid transparent;
    border-bottom: 135px solid #e0f2f4;
}

Wie entsteht eigentlich so ein Dreieck?

Ich zeichne zuerst einmal ein schwarzes Viereck mit einem linken (grünen), rechten (roten) und unteren (hellblauen) Rand. Die unterschiedlichen Farben dienen in diesem Fall zur Verdeutlichung.

#dreieck1 {
    background: #000;
    margin: 0 auto;
    width: 2em;
    height: 2em;
    border-left: 85px solid green;
    border-right: 85px solid red;
    border-bottom: 115px solid #e0f2f4;
}

Erhält das schwarze Viereck für die Breite den Wert "0", ist das Viereck verschwunden und wir erhalten nur den Rand.
Achtung! Eine Breite (width) muss angegeben werden, auch wenn diese den Wert "0" hat. Eine Höhenangabe ist hierbei nicht notwendig.

#dreieck1 {
    background: #000;
    margin: 0 auto;
    width: 0;
    border-left: 85px solid green;
    border-right: 85px solid red;
    border-bottom: 115px solid #e0f2f4;
}

Fertig! Setzt man nun die Farben für den linken und rechten Rand auf transparent erhalten wir unser gewünschtes Dreieck!


Es gibt aber auch noch eine weitere Möglichkeit ein Dreieck darzustellen.

Mit Hilfe der CSS3 (Cascading Style Sheet)-Selektoren ":before" und ":after" besteht die Möglichkeit vor, beziehungsweise nach einem HTML (HyperText Markup Language)-Element, ein sogenanntes Pseudoelement zu erzeugen. Es kann wie ein ganz normales HTML (HyperText Markup Language)-Element mit CSS (Cascading Style Sheet) gestaltet werden, wird aber nicht ins HTML (HyperText Markup Language) geschrieben, daher auch der Name "Pseudoelement" Es benötigt allerdings einen Inhalt der mit "content" angegeben wird und kann, wie in diesem Beispiel, auch leer bleiben.

Ich zeichne zuerst einmal zwei Rechtecke mit einem Farbverlauf der genau bei 50% von einer in die andere Farbe wechselt. Der Farbverlauf ist dazu noch um 130° beziehungsweise um 50° gedreht. Im linken Rechteck nehme ich wieder grün als zweite Farbe und im rechten Rechteck die Farbe "rot". Die unterschiedlichen Farben dienen wieder nur zur Verdeutlichung.

#dreieck3 {
    position: relative;
    margin: 20px auto;
    height: 7em;
}

#dreieck3:before,
#dreieck3:after {
    content: '';
    position: absolute;
    width: 6.6em;
    height: 8.1em;
}

#dreieck3:before {
    left: 5%;
    background: linear-gradient(130deg, green 50%, #e0f2f4 50%);
}

#dreieck3:after {
    left: 5%;
    background: linear-gradient(50deg, #e0f2f4 50%, red 50%);
}

Die beiden Rechtecke werden nun zusammengeschoben, die Farben grün und rot durch transparent ersetzt und schon erhalten wir wieder unser gewünschtes Dreieck!

#dreieck3 {
    position: relative;
    margin: 20px auto;
    height: 7em;
}

#dreieck3:before,
#dreieck3:after {
    content: '';
    position: absolute;
    width: 6.6em;
    height: 8.1em;
}

#dreieck3:before {
    left: 0;
    background: linear-gradient(130deg, transparent 50%, #e0f2f4 50%);
}

#dreieck3:after {
    left: 105px;
    background: linear-gradient(50deg, #e0f2f4 50%, transparent 50%);
}

Der Vorteil dieser Methode ist, dass man verschiedene Neigungswinkel beim Dreieck einstellen kann. Der Nachteil ist aber dass zum Beispiel der Internet Explorer 9 keine schrägen Farbverläufe darstellen kann.
Aus diesem Grund nutze ich für das Logo die erste Variante!


Und damit komme ich wieder zurück zu meinem Logo. Als nächstes wird der Schriftzug des Logos über das Dreieck gelegt. Die Schrift erhält dabei einen Schatten so dass sie hervorsteht. Beim Überfahren mit dem Mauszeiger soll die Schrift einen Letterpress-Effekt erhalten. Und da auf der Startseite kein Sprung erfolgen soll, wohin auch, wir befinden uns ja auf der Startseite, erhält die Startseite grundsätzlich diesen Letterpress-Effekt. Zum Schluss folgt dann noch das "<span>-Element" für den Namen und mit dem Befehl der "transition" sorge ich für eine zeitliche Animation.

#dreieck a {
    position: absolute;
    text-decoration: none;
    text-align: center;
    font: italic 1.3em/1.1 Arial;
    color: #5f5f5f;
    margin: 68px 0 0 -50px;;
    text-shadow: 2px 2px 1px #101010, 1px 1px 0 #505050;
    transition: .4s;
}

#dreieck a:hover,
#dreieck a:focus {
    text-shadow: -1px -1px 0 #202020, 1px 1px 0 #fff;
}

#dreieck span {
    font: .5em Arial;
    text-shadow: none;
}

#index {
    position: absolute;
    text-align: center;
    font: italic 1.3em/1.1 Arial;
    color: #5f5f5f;
    margin: 68px 0 0 -60px;
    text-shadow: -1px -1px 0 #202020, 1px 1px 0 #fff;
}

Das sieht gut aus und die Animation funktioniert reibungslos! Dadurch dass ich nun das Logo mit CSS3 (Cascading Style Sheet)-Mitteln erstellt habe, kann ich jederzeit und auf die Schnelle kleinere Änderungen vornehmen.


02Nov2014

Aber für das Dreieck einen eigenen "div-Container" einzubauen ist gar nicht notwendig, denn man kann das Dreieck auch direkt als Inhalt dem "p-Tag" zuweisen und damit, statt der ID-Bezeichnung id="dreieck", das "p-Tag" verwenden. Die ID-Bezeichnung im HTML (HyperText Markup Language) entfällt natürlich ebenfalls.

<p>
    <a href="./" title="Startseite: webdesign klamonfra">
        webdesign<br>klamonfra<br><span>Klaus Franz</span>
    </a>
</p>


    Und für die Startseite:
<p>
    <em>
        webdesign<br>klamonfra<br><span>Klaus Franz</span>
    </em>
</p>

Das vollständige CSS (Cascading Style Sheet) für das animierte Dreieck im Kopf der Seiten sieht damit wie folgt aus:

header p {
    position: absolute;
    top: 2.35em;
    right: 0;
    width: 0;
    padding: 0;
    border: 105px solid transparent;
    border-bottom: 135px solid #e0f2f4;
    border-top: none;
}

header p a,
header em {
    position: absolute;
    text-decoration: none;
    text-align: center;
    font: italic 1.3em/1.1 Arial;
    color: #5f5f5f;
    margin: 68px 0 0 -50px;
    text-shadow: 2px 2px 1px #101010, 1px 1px 0 #505050;
    transition: .4s;
}

header p a:hover,
header p a:focus,
header em {
    text-shadow: -1px -1px 0 #202020, 1px 1px 0 #fff;
}

header p span {
    font: .5em Arial;
    text-shadow: none;
}

Auch die hellblaue Linie hatte ich anfangs mit einem eigenen "div-Container" realisiert.

<div id="line"> </div>
#line {
    position: relative;
    top: 10.75em;
    width: auto;
    height: .3em;
    background: #e0f2f4;
}

Aber hierfür muss ebenfalls kein "div-Container" verwendet werden, denn es bietet sich extra das "<hr>-Element" an. Dieses Element fügt eine Trennlinie (englisch: horizontal rule) ein, die mit CSS (Cascading Style Sheet) gestaltet wird.

<hr>
header hr {
    position: relative;
    top: 10.75em;
    height: .3em;
    margin: 0;
    background: #e0f2f4;
}

Und damit sind auf dieser Website wieder ein paar grundsätzliche Vereinfachungen durchgeführt worden, die schließlich für eine geringere Größe der Dateien sorgen, auch wenn es nur Kleinigkeiten sind.

Zum Seitenanfang springen Λ