Teaserboxen mit Verlauf ohne Bilder (CSS3 linear-gradient)

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.

overview css3 linear-gradient

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.

Getagged mit: ,
Veröffentlicht unter TYPO3 Technik
7 Kommentare auf “Teaserboxen mit Verlauf ohne Bilder (CSS3 linear-gradient)
  1. Danke für die auführliche Information. Leider wird es noch eine Weile dauern bis man das wirklich einsetzen kann. Der IE9 soll ja weitestgehend CSS3 Support bekommen, aber bis IE6-8 dann verschwunden sind werden sicher 10 Jahre ins Land gehen.

    Zumindest könnte man in T3 die Seite für die „guten“ Browser performant und für die „schlechten“ mit Hintergrundbild ausliefern.

  2. Sven sagt:

    Hab grad noch ein nettes Online-Tool für das Erstellen von browserübergreifenden Verläufen bei meiner Nachrecherche gefunden: http://www.display-inline.fr/projects/css-gradient

  3. wiyono sagt:

    this work for IE too?

  4. Jones111 sagt:

    Mn sollte beachten, dass diese Art der Seitenerstellung weitab von jedem HTML oder CSS Standart ist und deswegen nur selten verwednet werden sollte. Der IE9 wird sicvherlich keine Hacks in Form von -moz oder -webkit unterstützen. Zudem sind diese Vendortags für experimentelle Features, also nicht fr große Seiten gedacht.

  5. Michael sagt:

    Endlich mal eine gute Erklärung der ganzen Einzelteile. Weißt du zufällig, ob man statt der Prozentangaben auch Pixelangaben verwenden kann? Das wäre z.B. hilfreich, wenn man am Ende eines Bereiches einen Verlauf machen will, die Bereiche aber unterschiedlich hoch sein sollen.

  6. Sven sagt:

    @Michael Danke! Ja Pixelangaben gehen auch, als Beispiel ein Tutorial zu „gleich Hohe Spalten mit CSS3“, allerdings mit Prozentangaben: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-mimic-equal-columns-with-css3-gradients/

  7. Freddy sagt:

    Howdy very nice web site!! Man .. Excellent ..
    Wonderful .. I will bookmark your site and take the feeds additionally?
    I’m happy to seek out a lot of helpful info right here within the
    put up, we want work out more strategies on this regard, thanks for sharing.

    . . . . .

13 Pings/Trackbacks für "Teaserboxen mit Verlauf ohne Bilder (CSS3 linear-gradient)"
  1. Teaserboxen mit Verlauf ohne Bilder (CSS3 linear-gradient)…

    Im Marit AG TYPO3 Blog zeigt Sven Wolfermann wie man Hintergrundverläufe für Teaserboxen mit CSS3 macht und dabei komplett auf Bilder verzichten kann. Er erklärt die Unterschiede der Implementierung für Safari und Firefox und welche Alternativen es der…

  2. maddesigns sagt:

    Blog-Artikel “CSS3 linear-gradient” Hintergrundverläufe mit CSS…

    Im Marit AG TYPO3 Blog habe ich einen Artikel zum Thema “Teaserboxen mit Verlauf ohne Bilder (CSS3 linear-gradient)” geschrieben. Dabei geht es um die Gestaltung von Teaserboxen ohne Bilder, also ausschließlich mit CSS. Hier der Link: http:…

  3. […] Falk Hedemann) Im Blog der Marit AG zeigt Sven Wolfermann sehr anschaulich, wie man zukünftig mit CSS3 Teaserboxen mit Farbverläufen erstellt, die ganz ohne Bilder auskommen. „Zukünftig“ insofern, weil derzeit allein Firefox 3.6, Safari 4 und Chrome 4 damit […]

  4. […] Teaserboxen mit Verlauf ohne Bilder (CSS3 linear-gradient) Nur per CSS Farbverläufe erstellen: gute Vorstellung dieser Technik […]

  5. […] der Hintergrundgestaltung mit background: linear-gradient (ein Umfangreiches Tutorial zu “Verlauf ohne Bilder (CSS3 linear-gradient)” habe ich im Marit AG TYPO3 Blog veröffentlicht) zum […]

  6. […] mal ein Tutorial “revised”. Bereits im Mai 2010 habe ich zu linear-gradient den Artikel “Teaserboxen mit Verlauf ohne Bilder (CSS3 linear-gradient)” geschrieben und gezeigt, welche Möglichkeiten uns CSS3 heute schon bietet. Dabei habe ich versucht […]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*