Hauptmenü

Untermenü

HTML5 / CSS3 - Praxistutorial 1 - Der Footer

1. Die Abschnitte

2. Zuerst der leichte Stoff

Beim folgenden Code gibt es eigentlich nur zwei Dinge, auf die ich eingehen werde. Der Rest ist ja wohl selbsterklärend.


footer {
  clearboth;
  border1px solid #dadada;
  padding10px;
  border-radius10px;
  background: -webkit-linear-gradient(#ededed, #dadada, #ededed);
  backgroundlinear-gradient(#ededed, #dadada, #ededed);
  filterprogid:DXImageTransform.Microsoft.gradient(startColorstr=#ededed,endColorstr=#dadada);
}

Erläuterung

Zunächst mal das Offensichtliche, nämlich das clear: both;, denn damit heben wir die vorgehenden Floats auf. Wer das überhaupt nicht versteht, der sollte sich erst mal das hier zu Gemüte führen. Interessanter ist da schon der Verlauf.

Denn diesmal arbeiten wir mit drei Werten. Da es keine weiteren Angaben gibt, bedeutet das Folgendes. Fange oben mit dem ersten Wert (#ededed) an. Danach folgt auf halber Strecke (also in der Mitte) die nächste Farbangabe (#dadada), nämlich das berühmte Trio-Grau (Aha Aha Aha). Und am Ende kommt der letzte Wert (#ededed). Ohne Angabe von Stopp-Punkten entspricht das einem (#ededed 0%, #dadada 50%, #ededed 100%). Die Schritte werden vom Browser also selbstständig berechnet, egal wie viele Angaben es gibt.

Ein Hinweis noch zu filter. Da der IE 9 noch kein linear-gradient beherrscht, bauen wir für diesen Fall wie gehabt eine Fallback-Lösung ein. Aber! Das ist nur mit zwei Angaben möglich, folglich gibt es hier eine entsprechende optische Abweichung. Auf die Details gehe ich am Ende ein.

3. Und jetzt die harten Sachen

Eine Warnung vorab. Wer das Folgende seinem Chef zeigt, muss damit rechnen, zu einem Drogentest geschickt zu werden. Denn das Kommende sieht doch stark nach einem LSD-Tripp aus.


footer p {
  border-radius10px;
  padding10px;
  border1px solid #00f;
  color#fff;
  background: -webkit-linear-gradient(89.5deg#0ff 5px, #00f 20px, #0ff 30px);
  backgroundlinear-gradient(0.5deg#0ff 5px, #00f 20px, #0ff 30px); 
  filterprogid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#0000ff);    
}

Erläuterung

Hier konzentrieren wir uns ausschließlich auf den Verlauf. Denn diesmal gibt es zwei Besonderheiten. Zum einem setzen wir Stopp-Punkte und zwar hart als Pixelangaben. Und zum anderen gibt es noch eine Drehung, die eine Besonderheit aufweist.

Die Colorstops

Um die Wirkung abschätzen zu können, schmeißt ihr erst mal die 0.5deg raus. Dann seht ihr nämlich, dass der Cyan-Bereich (also oben und unten) stärker akzentuiert, vulgo größer ist als ohne diese Angaben.

Die Drehung

Hier gibt es leider zwei unterschiedliche Verhalten. Nämlich das der standardkonformen Browser und das des Safari 5.1 für PC (den für den Mac kann ich nicht testen). Chrome gehört mittlerweile zu ersten Gruppe, da er jetzt auch die originäre Variante linear-gradient versteht und nicht mehr auf das Vendor-Präfix -webkit- angewiesen ist.

linear-grdient

Normale Browser setzen den Nullpunkt für die Drehung auf der x-Achse an, während es bei der Webkit-Variante die y-Achse ist. Will man also noch den Safari für PC bedienen, so gibt es eine einfache Rechung.


[90 normale-deg-Angabe]deg 

Ich hoffe, ihr habt das verstanden. Und wer sich über die scheinbar extreme Drehung wundert, dem sei gesagt, dass das was mit der Höhe des jeweiligen Elements zu tun hat. Denn der Winkel bezieht sich auf die Gesamthöhe. Je geringer die ist, desto stärker die Drehung. Kapiert?

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt