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

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');
}
Advertisements

15 Gedanken zu “Spoiler Schaltfläche mit CSS3

    • Würde ich wirklich gerne. Leider ist so eine Umsetzung auf kostenlosen Blogs nicht so ohne weiteres möglich. Panos beschreibt zwar in seinem Beitrag die Möglichkeit, sich vorhandene CSS-Klassen im eigenen Theme zu Nutze zu machen, aber das wäre aufgrund der vielen unterschiedlichen Themes auf WordPress.com eine Sisyphusarbeit. Daraus lässt ich leider keine allgemein gültige Lösung für alle WordPress.com Benutzer ableiten.

      Gefällt mir

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s