Spoiler per :focus

⚠ Spoiler✖ Ausblenden

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

<div style="margin-bottom:1em;">
  <a href="#none_url" class="sp_simple_show">⚠ Spoiler</a><a href="#none_url" class="sp_simple_hide">✖ Ausblenden</a>
  <div class="sp_simple_text">Beispieltext</div>
</div>

CSS-Code

.sp_simple_hide + p:empty {
	display: none;
}

.sp_simple_text {
	display: none;
	background-color: #eee;
	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');
	border: 1px solid #777;
	padding: 0 .5em;
	margin: .5em 0;
	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);
}

.sp_simple_show,
.sp_simple_hide {
	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: .3em .5em;
	margin: .5em 0;
	text-decoration: none;
	color: #333 !important;
	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);
}

.sp_simple_show:hover,
.sp_simple_hide: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');
}

.sp_simple_hide {
	display: none;
}

.sp_simple_show:focus + .sp_simple_hide {
	display: inline;
}

.sp_simple_show:focus {
	display: none;
}

.sp_simple_show:focus ~ .sp_simple_text {
	display: block;
}

@media print {
	.sp_simple_hide, .sp_simple_show {
		display: none;
	}
}
Advertisements
Dieser Beitrag wurde unter Experiment veröffentlicht. Setze ein Lesezeichen auf den Permalink.

2 Gedanken zu “Spoiler per :focus

    • Ich habe oben mal den HTML und CSS Code nachgetragen. Dazu muss ich allerdings sagen, dass der Code in Mobilbrowsern nicht funktioniert.

      Torsten war so nett, dass auf seinem iPhone zu testen. Es sieht so aus, als hätte iOS oder Safari Probleme mit dem :focus Pseudoelement.

      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