Content Slider ohne JavaScript nur CSS3

Content Slider ohne JavaScript nur CSS3 ideal für einen WordPress Blog -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. 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:

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.

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

CSS3 Content Slider

<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>

Hier habe ich dran gebastelt Beispiel

Viel Spaß damit

Über den Autor

Olena Seregina

Was ich soll und schulde, steht im Steuerbescheid.
Was ich nicht darf, steht im Strafgesetzbuch.
Und alles andere kann ich selbst entscheiden.
/ viktor37/

3 Kommentare

Copyright © 2010 - 2017 You-Big-Blog.com