Bokeh-Kreise

6. Bokeh-Kreise

Auch Divya Manian nutzt multiple Hintergründe, um seine Bokeh-Kreise auf den Bildschirm zu malen (nimbupani.com/bokeh-with-css3-gradients.html). Jeder Kreis ist ein Hintergrund desselben Elternelementes, eines body mit schwarzem Hintergrund. Das Beispiel besteht aus mehreren Gruppen halbtransparenter Kreise mit etwas kräftigerem, gleichfarbigem Rand, die einander teilweise überdecken. Die Übergänge zwischen den verschiedenfarbigen Gruppen erzielt Manian durch einen Gradient, dem er einen Wischeffekt (Blur) mitgibt.Manian verwendet in seinem Beispiel die proprietären Attribute wie zum Beispiel -webkit-radial-gradient oder -moz-radialgradient, sodass sein Bokeh-Effekt nur in Firefox sowie Webkit- Browsern wie Chrome und Safari funktioniert.

7. Dropdown-Menu?

Muss man keine älteren IE berücksichtigen, kann man Dropdown- Menüs erzeugen, die ohne Javascript auskommen. Dabei besteht das Menü aus einer ungeordneten Liste (<ul>). In den relativ positionierten Listenelementen (<li>) stecken jeweils ein Link und eine ungeordnete Liste mit dem Untermenü. Letztere wird absolut außerhalb des Bildschirms positioniert:

ul.navigation ul {position: absolute;top: -9999px;}

Gleitet der Nutzer über das zugehörige List Item, wird die Liste in den sichtbaren Bereich geholt:

ul.navigation li:hover ul {top: 20px;}

Dass dennoch häufig Javascript für zum Beispiel das jQuery-basierte Superfish (users.tpg.com.au/j_birch/plugins/superfish/ ) zum Einsatz kommt, rührt vor allem daher, dass reine HTML/ CSS-Menüs sonst zu schnell erscheinen und wieder verschwinden. Mit CSS3 bietet sich nun eine Javascript-freie Alternative.Dabei erhält die ungeordnete Liste mit dem Untermenü einen Übergangseffekt, der dafür sorgt, dass das Menü sanft ein- und ausgeblendet wird. Er greift erst mit einer gewissen Verzögerung, was verhindert, dass kurzes Verlassen der Menüfläche mit dem Mauszeiger zum Schließen des Menüs führt. Sie benötigen zusätzlich zum obigen Code die folgenden Anweisungen:

ul.navigation ul {opacity: 0;transition: opacity 0.5s ease-in-out 0.2s, left 0 linear 0.7s, z-index 0 linear 0.2s; z-index: 1;} ul.navigation li:hover ul {opacity: 1;transition: opacity 0.5s ease-in-out 0.2s, left 0 linear 0.2s, z-index 0 linear 0.2s; z-index: 2;}

Wenn Sie dieses Beispiel bei Ihrem Projekt einsetzen möchten, sollten Sie außerdem über -moz-transition, -o-transition und -webkit-transition auch (ältere Versionen von) Firefox, Opera, Safari und Chrome versorgen.

8. Mehrspaltige Layouts

Noch eine pfiffige Idee, ersonnen von Andre Luis und verfeinert von Lea Verou: Mehrspaltige Layouts mit den CSS3-Pseudoklassen :nth-child, :nth-last-child und CSS-Siblings.HTML-seitig benötigen Sie lediglich eine einfache Konstruktion aus einem umgebenden Container und darin liegenden Blöcken für die Spalten, beispielsweise eine ungeordnete Liste und Listenelemente. Ein einspaltiges Layout erzeugen Sie mit folgendem CSS:

li:first-child:nth-last-child(1) {width: 100%;}

Der Selektor erfasst alle Listenelemente, die sowohl das erste wie auch das letzte - also das einzige - Kindelement sind. Ein zweispaltiges Layout bestünde demnach aus zwei und folgendem CSS:

li:first-child:nth-last-child(2), li:first-child: nth-last-child(2) ~ li {width: 50%;}

Der erste Selektor erfasst alle Listenelemente, die zugleich das erste wie auch das zweitletzte Kindelement sind. Der zweite Selektor greift dank des "~" für alle Zwillinge dieses Elements. Dieses Prinzip lässt sich auf beliebig viele Spalten ausdehnen - im Beispiel sind es vier:

li:first-child:nth-last-child(4), li:first-child:nth-last-child(4) ~ li {width: 25%;}

Damit daraus auch wirklich mehrere nebeneinander angeordnete Spalten werden, müssen Sie den li noch ein float:left zuordnen. Um das Umgebene auf die volle Höhe der darin enthaltenen Spalten zu strecken, verwenden Sie am besten die Clearfix-Methode (perishablepress.com/press/2009/12/06/new-clearfix-hack/ ) oder overflow:auto beziehungsweise overflow:hidden - je nachdem, was für Ihr Design am besten funktioniert.

9. Modaler Dialog

Ein modales Fenster verhindert, dass man in der zugehörigen Anwendung weiterarbeiten kann, so lange es geöffnet ist. Paul Hayes hat mit den Mitteln von CSS3 einen modalen Dialog gestaltet, den Sie in Ihre Website einbetten können (www.paulrhayes.com/2011-03/css-modal/ ). Der zentrale technische Baustein der Box ist die Pseudoklasse :target, über die sich das Styling eines Elementes in dem Augenblick verändert, wo es durch Anklicken eines Links angesprungen wird. Der Container, der den modalen Dialog enthält, wird mit position:fixed positioniert und über

.modal {top: 0; left: 0; right: 0; bottom: 0;}

wird sichergestellt, dass er die gesamte Website beziehungsweise das Browserfenster bedeckt. Außerdem nutzt Hayes einen CSS3-Übergang, um die Website abzudunkeln:

.modal { transition: opacity 500ms ease-in;}

Zahlreiche weitere Effekte sorgen dafür, dass das Ein- und Ausblenden der Box optisch beeindruckt. Sofern Sie den Effekt übernehmen, sollten Sie auch die Verbesserungen implementieren, die Hayes am Ende seines Artikels unter Update verlinkt hat.

10. Kontrolle des Box-Modells

Es ist ein ganz gängiges Problem: Sie haben zwei Blockelemente mit einer Breite von 49 Prozent, die Sie mit float:left nach links fließen lassen. Nun fügen Sie beiden Boxen etwas padding und/oder border hinzu und schon stehen die Boxen nicht mehr neben- sondern untereinander. Schuld daran ist das CSS Box Model, bei dem padding und border zur Breite eines Elements hinzu addiert werden.Mit der CSS3-Eigenschaft box-sizing können Sie das aber ändern, wie es der Beitrag zeigt.

.box {width: 49%;box-sizing: border-box;padding: 1em; border: 3px solid gray;}

Durch diese Änderung werden padding und border nicht mehr zur Breite hinzugerechnet. Vielmehr bleibt es bei der vorgegebenen Breite von 49 Prozent, die padding und border bereits beinhaltet. box-sizing wird von allen aktuellen Browsern und Internet Explorer ab Version 8 unterstützt.