Mit CSS3 implementierter Gradienten-Folieneffekt

<div Klasse="css-slideshow">
	<Abbildung>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-css3.jpg" alt="class-header-css3" width="495" height="370" class="alignnone size-full wp-image-172" /><figcaption><strong>CSS3:</strong> CSS3 bietet eine breite Palette an Stilisierungen und Effekten und verbessert die Web-App, ohne Ihre semantische Struktur oder Leistung zu beeinträchtigen. Darüber hinaus bietet das Web Open Font Format (WOFF) typografische Flexibilität und Kontrolle, die weit über alles hinausgeht, was das Web bisher zu bieten hatte.</figcaption> 
	</figure>
	<Abbildung>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-semantics.jpg" alt="class-header-semantics" width="495" height="370" class="alignnone size-full wp-image-179" /><figcaption><strong>Semantik:</strong> Semantik steht bei HTML5 im Mittelpunkt, da sie der Struktur Bedeutung verleiht. Ein umfangreicherer Satz von Tags sowie RDFa, Mikrodaten und Mikroformate ermöglichen ein nützlicheres, datengesteuertes Web sowohl für Programme als auch für Ihre Benutzer.</figcaption> 
	</figure>
	<Abbildung>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-offline.jpg" alt="class-header-offline" width="495" height="370" class="alignnone size-large wp-image-178" /><figcaption><strong>Offline & Speicher:</strong> Dank des HTML5-App-Cache sowie der Spezifikationen für lokalen Speicher, indizierte Datenbank und Datei-API können Web-Apps schneller gestartet werden und auch ohne Internetverbindung funktionieren.</figcaption> 
	</figure>
	<Abbildung>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-device.jpg" alt="class-header-device" width="495" height="370" class="alignnone size-full wp-image-177" /><figcaption><strong>Gerätezugriff:</strong> Beginnend mit der Geolocation API können Webanwendungen umfangreiche, geräteabhängige Funktionen und Erfahrungen bieten. Es werden unglaubliche Innovationen für den Gerätezugriff entwickelt und implementiert, vom Audio-/Video-Eingangszugriff auf Mikrofone und Kameras bis hin zu lokalen Daten wie Kontakten und Ereignissen und sogar Neigungsausrichtung.</figcaption> 
	</figure>
<Abbildung>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-connectivity.jpg" alt="class-header-connectivity" width="495" height="370" class="alignnone size-large wp-image-176" /><figcaption><strong>Konnektivität:</strong> Effizientere Konnektivität bedeutet mehr Echtzeit-Chats, schnellere Spiele und bessere Kommunikation. Web Sockets und Server-Sent Events übertragen (Wortspiel beabsichtigt) Daten zwischen Client und Server effizienter als je zuvor.</figcaption> 
	</figure>
	<Abbildung>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-multimedia.jpg" alt="class-header-multimedia" width="495" height="370" class="alignnone size-large wp-image-175" /><figcaption><strong>Multimedia:</strong> Audio und Video sind erstklassige Bürger im HTML5-Web und leben in Harmonie mit Ihren Apps und Websites. Licht, Kamera, Action!</figcaption> 
	</figure>
	<Abbildung>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-3d.jpg" alt="class-header-3d" width="495" height="370" class="alignnone size-large wp-image-174" /><figcaption><strong>3D, Grafiken und Effekte:</strong> Mit den 3D-Funktionen von SVG, Canvas, WebGL und CSS3 werden Sie Ihre Benutzer mit Sicherheit mit atemberaubenden Bildern in Erstaunen versetzen, die nativ im Browser gerendert werden.</figcaption> 
	</figure>
	<Abbildung>
		<img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-performance.jpg" alt="class-header-performance" width="495" height="370" class="alignnone size-large wp-image-173" /><figcaption><strong>Leistung und Integration:</strong> Beschleunigen Sie Ihre Web-Apps und dynamischen Webinhalte mit einer Vielzahl von Techniken und Technologien wie Web Workers und XMLHttpRequest 2. Kein Benutzer sollte jemals auf Sie warten müssen.</figcaption> 
	</figure>
  </div>  
<p class="css-slideshow-attr"><a href="http://www.w3.org/html/logo/" target="_top">Bilder und Bildunterschriften stammen vom W3C</a></p>

Körper{
Schriftfamilie: „HelveticaNeue-Light“, „Helvetica Neue Light“, „Helvetica Neue“, Helvetica, Arial, „Lucida Grande“, serifenlos; 
  Schriftstärke: 300;
}
.css-Diashow{
  Position: relativ;
  maximale Breite: 495px;
  Höhe: 370px;
  Rand: 5em auto .5em auto;
}
.css-slideshow Abbildung{
  Rand: 0;
  maximale Breite: 495px;
  Höhe: 370px;
  Hintergrund: #000;
  Position: absolut;
}
.css-slideshow img{
  Kastenschatten: 0 0 2px #666;
}
.css-slideshow figcaption{
  Position: absolut;
  oben: 0;
  Farbe: #fff;
  Hintergrund: rgba(0,0,0, .3);
  Schriftgröße: .8em;
  Polsterung: 8px 12px;
  Deckkraft: 0;
  Übergang: Deckkraft 0,5 s;
}
.css-slideshow:hover Abbildung figcaption{
  Übergang: Deckkraft 0,5 s;
  Deckkraft: 1;
}
.css-slideshow-attr{
  maximale Breite: 495px;
  Textausrichtung: rechts;
  Schriftgröße: .7em;
  Schriftstil: kursiv;
  Rand: 0 automatisch;
}
.css-slideshow-attr a{
  Farbe: #666;
}
.css-slideshow Abbildung{
  Deckkraft: 0;
}
Abbildung:n-tes-Kind(1) {
  Animation: Xfade 48s 42s unendlich;
}
Abbildung:n-tes-Kind(2) {
  Animation: Xfade 48s 36s unendlich;
}
Abbildung:n-tes-Kind(3) {
  Animation: Xfade 48s 30s unendlich;
}
Abbildung:n-tes-Kind(4) {
  Animation: Xfade 48s 24s unendlich;
}
Abbildung:n-tes-Kind(5) {
  Animation: Xfade 48s 18s unendlich;
}
Abbildung:n-tes-Kind(6) {
  Animation: Xfade 48s 12s unendlich;
}
Abbildung:n-tes-Kind(7) {
  Animation: Xfade 48s 6s unendlich;
}
Abbildung:n-tes-Kind(8) {
  Animation: Xfade 48s 0s unendlich;
}

@keyframes xfade{
  0 %{
    Deckkraft: 1;
  }
  10,5 % {
    Deckkraft: 1;
  }
  12,5 %
    Deckkraft: 0;
  }
  98 % {
    Deckkraft: 0;
  }
  100 % {
    Deckkraft: 1;
  }
}