Wie man in Zukunft Hintergrundverläufe mit CSS erstellt, möchte ich heute vorstellen.

Da die Browserunterstützung für die Verläufe noch nicht sehr fortgeschritten ist, ist es eher ein Blick in die Zukunft, es sei denn, man kann auf eine browserweite optische Gleichheit verzichten oder man macht ein Workaround mit Bildern. Der aktuelle Stand der CSS3-Eigenschaft “linear-gradient” ist hier nachzulesen. Die Vorreiter in der Entwicklung sind – wie gewohnt – Webkit (Safari ab 4.0, Chrome 4) und Gecko (Mozilla Firefox ab 3.6). Opera unterstützt die Eigenschaft bisher nicht. Die Internet Explorer kann zwar seit IE 5.5 über die filter-Eigenschaft bedient werden, aber das ist weder performant noch zielführend – da nur ein einfacher Verlauf erzeugt werden kann.

In der aktuellen Ausgabe des TYPO3 Onlinemagazins TY-MA habe ich beschrieben, wie man solche Teaserboxen in TYPO3 4.3  über die Inhaltsrahmen (section_frames) der Contentelemente erstellt.

Dabei werden für die Teaserboxen CSS-Klassen vergeben. Über CSS-Background-Images für die Überschrift und für den Inhaltsbereich wird dann der DIV-Block optisch zur Teaserbox. Da die Teaser-Boxen ein feste Breite haben, kann dabei 1 Bild für den Teaser-Top-Bereich und 1 Bild für den Teaser-Bottom-Bereich verwendet werden. So bleibt die Teaserbox in der Höhe flexibel.

Allerding werden wie schon erwähnt 2 Bilder, in unserem Fall also rund 2Kb Bilddaten geladen. Zudem sind das 2 HTTP-Request, die man in Zukunft mit dem Einsatz von CSS-Gradients einsparen kann – somit wird die Website beim Aufruf noch schneller. Als Vergleich folgende Übersicht der verschiedenen Varianten, 1x das Original mit 2 Bilddateien, 1x als CSS3 Version mit nur einem kleinen Bild und 1x ohne jegliche Bilder.

Man kann sehen, dass der optische Unterschied zwischen der reinen CSS Umsetzung nur sehr gering ist. Dreieckige Objekte lassen sich bisher nur schwerlich mit CSS implementieren.

Wir nehmen folgenden HTML-Schnippet als Basis:

<div class="css-block">
 <h3>Block teaser blue</h3>
 <div class="css-block-inner">
  <p>
  Cras tortor turpis, vulputate non, accumsan a, pretium in, magna.
  Cras turpis turpis, pretium pulvinar, pretium vel, nonummy eu, leo.
  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus.
  Curabitur augue nibh, iaculis eget, suscipit ut, sodales in, lectus.
  </p>
 </div>
</div>

Das CSS dazu ist folgendes:

.css-block {
 /*
 W3C Spec
 background: linear-gradient(top, yellow, blue 20%, #0f0);
 */
 background: -moz-linear-gradient(top, #fff 0, #fff 67%, #d2d2d2 100%);
 background: -webkit-gradient(linear,
  left top, left bottom,
  color-stop(0, #fff),
  color-stop(0.67, #fff),
  color-stop(1, #d2d2d2));
 padding: 1px;

 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;

 box-shadow: 0 15px 20px -10px #e1e1e1;
 -moz-box-shadow: 0 15px 20px -10px #e1e1e1;
 -webkit-box-shadow: 0 15px 20px -10px #e1e1e1;
 }

.css-block-inner {
 background-color: #ebebeb; /*fallback color*/
 background: url(img/arrow.png) no-repeat, -moz-linear-gradient(top,
  #8598aa 0,
  #fff 17%,
  #fff 83%,
  #ebebeb 99%,
  #fff 100%);
 background: url(img/arrow.png) no-repeat, -webkit-gradient(linear,
  left top, left bottom,
  color-stop(0, #8598aa),
  color-stop(0.17, #fff),
  color-stop(0.83, #fff),
  color-stop(0.99, #ebebeb),
  color-stop(1, #fff));
 padding: 10px;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}

.css-block h3 {
 background-color: #2b4c6b;
 background: -moz-linear-gradient(top,
  #6b8298 0,
  #6b8298 50%,
  #2b4c6b 50%,
  #2b4c6b 100%);
 background: -webkit-gradient(linear,
  left top, left bottom,
  color-stop(0, #6b8298),
  color-stop(0.5, #6b8298),
  color-stop(0.5, #2b4c6b),
  color-stop(1, #2b4c6b));
 padding: 1px;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border: 1px solid #2b4c6b;
 color: #fff;
 padding: 7px 10px;
 margin: 0;
 }

Der äußere DIV-Block “.css-block” erhält einen Verlauf von #fff (weiß) zu #d2d2d2 (helles grau). Dabei sind für die Eigenschaft “background” folgende Werte zugewiesen:

background: -moz-linear-gradient(top, #fff 0%, #fff 67%, #d2d2d2 100%);

-moz-linear-gradient() ist die Wertzuweisung für Mozilla (Firefox), die kommagetrennten Werte in der Klammer bedeuten dann folgendes

• top = Verlauf beginnend oben
• #fff  0 = start bei 0% mit der Farbe #fff (weiß), wobei man den Initialwert (0%) auch weglassen kann
• #fff  67% = bis 67% mit der Farbe #fff (weiß) weitermachen
• #d2d2d2 100% = Verlaufsende bei 100% mit der Farbe #d2d2d2 (helles grau), wobei man den Endwert (100%) auch weglassen kann

Die Anweisung für Webkits ist leicht unterschiedlich im Syntax:

background: -webkit-gradient(linear,
  left top, left bottom,
  color-stop(0, #fff),
  color-stop(0.67, #fff),
  color-stop(1, #d2d2d2));

Der innere DIV-Block “.css-block-inner” mit einem zusätzlichen Bild erhält für unser Beispiel nun diese Werte für den Hintergrund:

background-color: #ebebeb; /*fallback color*/
background: url(img/arrow.png) no-repeat, -moz-linear-gradient(top,
 #8598aa 0,
 #fff 17%,
 #fff 83%,
 #ebebeb 99%,
 #fff 100%);

Wir weisen eine “Fallback”-Farbe zu (background-color: #ebebeb) – für Browser, die Verläufe noch nicht darstellen können. Dann weisen wir ein Hintergrundbild zu – url(img/arrow.png) no-repeat – das ist der kleine Pfeil, der von der Überschrift in den Haupttext “ragt”. Hinter dem Komma wird der Verlauftshintergrund definiert. Es fängt bei 0 mit der Farbe #8598aa (helles blau) an, geht bis 17% ins #fff (weiß) über, weiter mit #fff bis 83% der Höhe, übergehend zu #ebebeb (helles grau) bis 99% und wieder zu #fff bis 100%. Das ergibt am unterem Rand ein leichtes “Blitzen” und wirkt ein wenig 3-Dimensional.

Für die Überschrift h3 wird ebenfalls ein Verlauf benötig, allerdings mit einer “harten Kante”:

background: -moz-linear-gradient(top,
  #6b8298 0,
  #6b8298 50%,
  #2b4c6b 50%,
  #2b4c6b 100%);

Die Farbe #6b8298 (mittelblau) geht von 0-50%. Das dunklere blau #2b4c6b geht direkt weiter von 50-100%. Dadurch entsteht beim Verlauf die “harte Kante”.

Noch ein wenig “box-shadow” und “border-radius” und schon ist unsere Teaserbox mit CSS3-Verlauf fertig.

Fazit:

Die Möglichkeiten mit CSS3 sind nahezu unbegrenzt für die Umsetzung moderner Layouts, leider müssen wir mit der Implementierung noch eine Weile warten, bis alle Browser die Eigenschaften unterstützen. Dann lassen sich die netten Effekte aus Photoshop wie Schatten, runde Ecken oder Verlauf ausschließlich mit CSS umsetzen.

Be Sociable, Share!

•