Vieles, was bisher nur mit Flash oder JavaScript möglich war, lässt sich mittlerweile mit purem CSS3 realisieren. Heute zeige ich einen schicken Contentslider, der ausschließlich mit HTML und CSS3 umgesetzt ist. Möglich machen dies  CSS3-Animationen und -Transitions.

„The Pure CSS3 Content Slider“

The Pure CSS3 Content Slider ist ein experimentelles Projekt, mit dem sich jeder sehr schnell einen schicken Content-Slider zusammenstellen kann – ganz ohne JavaScript. Die Inhalte, die abwechselnd per Animation erscheinen, lassen sich frei definieren. Bilder, Texte und auch Iframes sind möglich. Für jeden Inhalt kann zudem eine Überschrift nebst Beschreibung vergeben werden.

Herunterladen und loslegen

The Pure CSS3 Content Slider steht in einer Zip-Datei verpackt zum Download bereit. Es gibt eine kommentierte und eine unkommentierte Version der jeweiligen HTML- und CSS-Dateien. Die Inhalte des Sliders werden als Liste angelegt. Für jedes Listenelement lässt sich der Inhalt, die Überschrift und eine Beschreibung definieren. Alles wird von zwei Containerelementen umschlossen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div id="slider">
  <div id="mask">
    <ul>
      <li>
        <img src="bild.png" />
        <span>
          <h2>Überschift</h2>
          <p>Besc hreibung</p>
        </span>
      </li>
      …
    </ul>
  </div>
  <div id="progress"></div>
  <div id="overlay"></div>
  <div id="pause"></div>
<div>

Der HTML-Aufbau des Sliders ist sehr simpel. Die Anzahl der Inhalte kann beliebig erweitert werden. Wer keine Überschriften und Beschreibungen braucht, lässt das SPAN-Element einfach weg.

Zusätzliche Funktionalität

Neben der Liste mit den Inhalten gibt es noch drei zusätzliche DIV-Elemente, die den Content-Slider um einen Fortschrittsbalken, ein Overlay und eine Pause-Grafik erweitern.

Content Slider mit Überschrift und Pause-Grafik (beim Darüberfahren mit der Maus)

Der Fortschrittsbalken zeigt am unteren Rand des Sliders die Anzeigedauer des aktuellen Inhaltes an. Mit dem Overlay-Element lässt sich eine transparente Grafik angeben, die über die Inhalte gelegt wird. Standardmäßig werden die Inhalte mit einem radialen Verlauf versehen.

Wenn man mit der Maus über den Slider fährt, bleibt der dargestellte Inhalte stehen. In diesem Fall erscheint die Pause-Grafik als Hinweis. Jedes der zusätzlichen DIV-Elemente kann entfernt werden, wenn es nicht gewünscht ist.

Die Stylesheet-Datei

Während das HTML-Gerüst sehr übersichtlich daherkommt, ist die zugehörige CSS-Datei wesentlich komplexer. Die Funktionalität des Sliders wird über CSS3-Transitions und Keyframe-Animationen realisiert. In der kommentierten Version gibt es zu jeder Angabe einen entsprechenden Hinweis, so dass das Anpassen der CSS-Datei mit etwas eigenem Know-How schnell gelingt.

Fazit: The Pure CSS3 Content Slider ist eine schöne Sache, die mit aktuellen Webkit- und Mozilla-Browsern, sowie dem Opera funktioniert. Auf die Implementation eines Fallbacks wurde verzichtet. Wer also nicht darauf angewiesen ist, ältere Browser und den Internet Explorer zu unterstützen, wird mit dem Slider sicher seine Freude haben. Für alle anderen bleibt er vorerst ein Experiment, aber ein schönes!

(dpe)

Denis Potschien

Seit 2005 ist er freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

• Web
|
• Facebook
|
• Google+
|
• More Posts (158)