Teaserboxen komplett ohne Bilder – CSS3 Adventskalender Tag 9

Heute im CSS3 Adventskalender 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 eine Designvorgabe komplett mit CSS3 umzusetzen und bin zu einem akzeptablen Ergebnis gekommen. So konnte ich den Einsatz von 2 Grafiken / 2 http-Requests mit insgesamt 2kb auf 1 Grafik / 1 Request mit 0,2kb reduzieren und habe gleichzeitig auch das Ergebnis gänzlich ohne Bilder gezeigt. Leider musste ich dabei auf eine grafische Feinheit verzichten (das kleine Pfeilsymbol/Dreieck)

Das zum Anlass genommen, habe ich das Tutorial jetzt erweitert und die Vorlage aus Photoshop 1:1 in CSS3 erstellt.

Der Vergleich: Photoshop vs. CSS3

Das Ergebnis kann sich durchaus sehen lassen.

Mitte des Jahres hatte ich für das Pfeilsymbol noch keine Lösung, mittlerweile habe ich allerdings ein Tutorial gefunden, dass die Problematik beschreibt und löst.

Der Trick wird über die Pseudo-Klassen :before und :after erzeugt. Die Pseudo-Klasse :after sollte dem Webworker schon etwas sagen, da sie beim bekannten „Clearfix“ zum automatischen clearen ohne zusätzliches HTML verwendet wird. Beim Clearfix-Trick wird am Ende per CSS ein Content generiert, der in dem Fall nicht sichtbar ist.

Das machen wir uns zu nutze und generieren ebenfalls Inhalt über die Eigenschaft content, der zwar keine Höhe und Breite hat (also width:0; height:0;) aber einen Rahmen über border. Dadurch entsteht ein dreieckiger Border!

.css-block h4:before, .css-block h4:after {
        content: "\0020"; display: block; 
        border-color: #2b4c6b transparent transparent;
        border-style:solid;
        border-width:7px;
        width:0;
        height:0;
        position: absolute;
        bottom: -15px;
        left: 30px;
        z-index: 6;
}
.css-block h4:before {
        border-color: #ffffff transparent transparent;
        border-style:solid;
        border-width:9px;
        bottom: -19px;
        left: 28px;
        z-index: 5
}

Jetzt werden die generierten Inhalte noch positioniert und fertig ist der CSS-Pfeil.

Abschließend habe ich den Schatten (der im Marit Blog CSS3 Tutorial noch ein richtiger Box-Shadow war) über den gleichen „Trick“ erzeugt, also ohne zusätzliches Markup. Allerdings ist es wie in der Photoshop-Vorlage eher ein Verlauf, deshalb kommt auch hier wieder linear-gradient zum Einsatz.

.css-block:after {
  content: "\0020"; 
  display: block; 
  position: absolute;
  bottom: -24px;
  left: 0; 
  width: 218px;
  height: 30px;
  z-index: -2;
  background: -moz-linear-gradient(top, 
              #ffffff 0%,
              #efefef 25%,
              #e0e0e0 30%,
              #f3f3f3 40%,
              #fff 100%);
  background: -webkit-gradient(linear, 
              left top, left bottom, 
              color-stop(0, #fff),
              color-stop(0.25, #efefef),
              color-stop(0.3, #e0e0e0),
              color-stop(0.4, #f3f3f3),
              color-stop(1, #fff));
  background: linear-gradient(top, 
              #ffffff 0%,
              #efefef 25%,
              #e0e0e0 30%,
              #f3f3f3 40%,
              #fff 100%);
}

Demo

Demo-Datei zu CSS3 Teaserboxen aufrufen

Browser-Support:

Der Einsatz von verschiedenen CSS3-Eigenschaften wird unterschiedlich gut unterstützt. Wie schon im linear-gradient Tutorial beschrieben unterstützen Opera und IE9 die Generierung eines Verlaufs über SVG, IE6-8 leider nur einen einfachen Verlauf von Farbe A nach Farbe B. Runde Ecken werden Im Internet Explorer ebenfalls nicht unterstützt. Die CSS-Pseudoklasse :before und :after werden seit IE8 unterstützt, bringt uns aber zum Gesamtergebnis nicht weiter… deshalb unterstützen bislang nur Safari 4+, Chrome 2+, Firefox 3.6+ die Technik vollständig.

Link-Tipp:

Creating Triangles in CSS

Am Tag 10 geht es um Webstandard-Blog um Multi-Column Layout.