Spoiler Schaltfläche mit CSS3

Einleitung

Aufgrund einer Forenanfrage nach einem Spoiler-Tag, habe ich mal versucht, etwas zusammen zu basteln. Voraussetzung für diese Lösung ist leider das kostenpflichtige Custom Design Upgrade.

Der Knopf unten ist eine Mixtur aus den CSS3 Buttons von Catalin Rosu und dem Beitrag von Panos über Spoiler/hover content.

Da der Text nicht gleich beim Überfahren mit der Maus erscheinen sollte, habe ich den Code etwas umgearbeitet. Statt :hover verwende ich die Pseudoklasse :active. Damit erscheint der Text erst beim Klicken auf die Schaltfläche und verschwindet wieder, wenn die Maustaste losgelassen wird. Deshalb weiß ich leider nicht, ob diese Lösung auch in allen Browsern funktioniert. Im Firefox 24.0 unter Ubunut 12.04 scheint es jedenfalls zu klappen. 🙂

Möglichweise muss der Code auch noch an das jeweilge Theme bei WordPress.com angepasst werden. Das konnte ich nicht testen.

Sofern es funktioniert, sollte bei einem Klick auf die Schaltfläche unten ein Text erscheinen. Falls ja, wäre es nett, wenn ihr die Kombination aus Betriebssystem, Browserhersteller und Version als Kommentar hinterlasst.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

HTML-Code

Der HTML-Code in euerem Beitrag sollte folgendermaßen aussehen:

<div class="spoiler">
  <p>Beispieltext</p>
</div>

CSS-Code

Der CSS-Code ist etwas umfangreicher, und muss im CSS-Editor eingetragen und gespeichert werden.

.spoiler {
	display: inline-block;
	background-color: #ccc;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#eee),to(#ccc));
	background-image: -webkit-linear-gradient(top,#eee,#ccc);
	background-image: -moz-linear-gradient(top,#eee,#ccc);
	background-image: -ms-linear-gradient(top,#eee,#ccc);
	background-image: -o-linear-gradient(top,#eee,#ccc);
	background-image: linear-gradient(top,#eee,#ccc);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee',EndColorStr='#cccccc');
	border: 1px solid #777;
	padding: 0 .5em;
	margin: .5em 0;
	font: bold 1em/2em Arial, Helvetica;
	text-decoration: none;
	color: #333;
	cursor: pointer;
	text-shadow: 0 1px 0 rgba(255,255,255,.8);
	-moz-border-radius: .2em;
	-webkit-border-radius: .2em;
	border-radius: .2em;
	-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
	-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
	box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.spoiler:hover {
	background-color: #ddd;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#fafafa),to(#ddd));
	background-image: -webkit-linear-gradient(top,#fafafa,#ddd);
	background-image: -moz-linear-gradient(top,#fafafa,#ddd);
	background-image: -ms-linear-gradient(top,#fafafa,#ddd);
	background-image: -o-linear-gradient(top,#fafafa,#ddd);
	background-image: linear-gradient(top,#fafafa,#ddd);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa',EndColorStr='#dddddd');
}

.spoiler:active {
	-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
	-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
	box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
	position: relative;
	top: 1px;
}

.spoiler:focus {
	outline: 0;
	background: #fafafa;
}

.spoiler:before {
	content: "\26A0   Spoiler";
	float: left;
	text-align: center;
	font-size: 1.5em;
	padding: 0 .2em;
}

.spoiler p {
	display: none;
}

.spoiler:active p {
	display: block;
	margin: 2.8em 0 .5em;
	font: normal .8em/1.8em Arial, Helvetica;
	border: 1px solid #777;
	background-color: #fff;
	-moz-border-radius: .2em;
	-webkit-border-radius: .2em;
	border-radius: .2em;
	padding: 0 .5em;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#eee));
	background-image: -webkit-linear-gradient(top,#fff,#eee);
	background-image: -moz-linear-gradient(top,#fff,#eee);
	background-image: -ms-linear-gradient(top,#fff,#eee);
	background-image: -o-linear-gradient(top,#fff,#eee);
	background-image: linear-gradient(top,#fff,#eee);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',EndColorStr='#eeeeee');
}