← zurück zum Artikel
CSS3 Demo by Oliver Gast
weitere Demos →

Das Pseudoelement target

Ändern der Schriftfarbe per Button

Schriftfarbe ändern
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.

<div class="target">
<a class="button" href="#box">Schriftfarbe ändern</a>
<div id="box">
Lorem ipsum ...
</div>
</div>

.target {
width: 100%;
padding: 20px;
}

.target a.button {
position: relative;
padding: 10px 20px;
background: rgb(96,108,136);
background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1)));
background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 );
color: #fff;
border-radius: 5px;
margin: 20px auto;
text-decoration: none;
box-shadow: 5px 5px 5px #aaa;
}

. target #box {
background: #fff;
width: 600px;
text-align: left;
margin: 20px auto;
color: #000;
padding: 15px;
}

.target #box:target {
color: orange;
}

Ändern der Hintergrundfarbe per Button

Hintergrundfarbe ändern
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.

<div class="target">
<a class="button" href="#box">Hintergrundfarbe ändern</a>
<div id="box">
Lorem ipsum ...
</div>
</div>

.target {
width: 100%;
padding: 20px;
}

.target a.button {
position: relative;
padding: 10px 20px;
background: rgb(96,108,136);
background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1)));
background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 );
color: #fff;
border-radius: 5px;
margin: 20px auto;
text-decoration: none;
box-shadow: 5px 5px 5px #aaa;
}

. target #box {
background: #fff;
width: 600px;
text-align: left;
margin: 20px auto;
color: #000;
padding: 15px;
}

.target #box:target {
background: orange;
}

Elemente per Button hervorheben

Absatz 1 markieren Absatz 2 markieren Markierung aufheben
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.
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.

<div class="target">
<div id="absatz">
<a class="button" href="#boxa">Absatz 1 markieren</a>
<a class="button" href="#boxb">Absatz 2 markieren</a>
<a class="button" href="#absatz">Markierung aufheben</a>
<div id="boxa">
Lorem ipsum ...
</div>
<div id="boxb">
Lorem ipsum ...
</div>
</div>

.target {
width: 100%;
padding: 20px;
}

.target a.button {
position: relative;
padding: 10px 20px;
background: rgb(96,108,136);
background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1)));
background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 );
color: #fff;
border-radius: 5px;
margin: 20px auto;
text-decoration: none;
box-shadow: 5px 5px 5px #aaa;
}

.target #absatz {
position: relative;
margin: 20px auto;
width: 600px;
}

.target #boxa,
.target #boxb {
float: left;
text-align: left;
width: 260px;
margin: 30px 5px 30px 0;
color: #000;
background: #fff;
padding: 15px;
border-radius: 5px;
opacity: .2;
}

.target #boxa:target,
.target #boxb:target {
opacity: 1;
border: 2px solid orange;
}

Sichtbarkeit eines Elements per Button verändern

Halbe Sichtbarkeit

<div class="target">
<a class="button" href="#box">Halbe Sichtbarkeit</a>
<div id="box">
</div>
</div>

.target {
width: 100%;
padding: 20px;
}

.target a.button {
position: relative;
padding: 10px 20px;
background: rgb(96,108,136);
background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1)));
background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 );
color: #fff;
border-radius: 5px;
margin: 20px auto;
text-decoration: none;
box-shadow: 5px 5px 5px #aaa;
}

. target #box {
position: relative;
width: 150px;
height: 175px;
margin: 40px auto;
background: url(.sackboy.png) no-repeat center;
}

.target #box:target {
opacity: .5;
}

Element per Schließen-Button ausblenden

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. X

<div class="target">
<div id="box">
Lorem ipsum ...
<a class="close" href="#box">X</a>
</div>
</div>

.target {
width: 100%;
padding: 20px;
}

. target #box {
position: relative;
background: #333;
border-radius: 5px;
box-shadow: 0 0 5px #333;
color: #fff;
font-size: 12px;
padding: 15px;
width: 150px;
margin: 20px auto;
text-align: left;
}

.target #box:target {
display: none;
}

.target #box4 a.close {
position: absolute;
top: -5px;
right: -5px;
padding: 2px;
border-radius: 20px;
box-shadow: 0 0 5px #333;
background: #333;
font-weight: bold;
width: 18px;
height: 18px;
text-align: center;
text-decoration: none;
color: #fff;
}

Element auf Knopfdruck drehen

Um 360 Grad drehen

<div class="target">
<a class="button" href="#box">Um 360 Grad drehen</a>
<div id="box">
</div>
</div>

.target {
width: 100%;
padding: 20px;
}

.target a.button {
position: relative;
padding: 10px 20px;
background: rgb(96,108,136);
background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1)));
background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 );
color: #fff;
border-radius: 5px;
margin: 20px auto;
text-decoration: none;
box-shadow: 5px 5px 5px #aaa;
}

. target #box {
position: relative;
background: url(wp_logo.png) no-repeat;
width: 128px;
height: 128px;
margin: 20px auto;
-webkit-transition: all 5s linear;
-moz-transition: all 5s linear;
-o-transition: all 5s linear;
-ms-transition: all 5s linear;
transition: all 5s linear;
}

.target #box:target {
-webkit-transform: rotate(1turn);
-moz-transform: rotate(1turn);
-o-transform: rotate(1turn);
-ms-transform: rotate(1turn);
transform: rotate(1turn);
}

Fluss eines Elements auf Knopfdruck verändern

Float nach rechts Float nach links

<div class="target">
<a class="button" href="#box">Float nach rechts</a>
<a class="button" href="#float">Float nach links</a>
<div id="float">
<div id="box">
</div>
</div>
</div>

.target {
width: 100%;
padding: 20px;
}

.target a.button {
position: relative;
padding: 10px 20px;
background: rgb(96,108,136);
background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1)));
background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 );
color: #fff;
border-radius: 5px;
margin: 20px auto;
text-decoration: none;
box-shadow: 5px 5px 5px #aaa;
}

. target #float {
width: 700px;
margin: 20px auto;
}

. target #float #box {
float: left;
width: 500px;
height: 150px;
background: #333;
margin: 20px auto;
}

.target #float #box:target {
float: right;
}

Bildergalerie

Bild 1 Bild 2 Bild 3 Bild 4 Schließen

<div class="target">
<a class="button" href="#img1">Bild 1</a>
<a class="button" href="#img2">Bild 2</a>
<a class="button" href="#img3">Bild 3</a>
<a class="button" href="#img4">Bild 4</a>
<a class="button" href="#galerie">Schließen</a>
<div id="galerie">
<img id="img1" src="bild1.jpg">
<img id="img2" src="bild2.jpg">
<img id="img3" src="bild3.jpg">
<img id="img4" src="bild4.jpg">
</div>
</div>

.target {
width: 100%;
padding: 20px;
}

.target a.button {
position: relative;
padding: 10px 20px;
background: rgb(96,108,136);
background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1)));
background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
background: linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 );
color: #fff;
border-radius: 5px;
margin: 20px auto;
text-decoration: none;
box-shadow: 5px 5px 5px #aaa;
}

.target #galerie {
position: relative;
height: 600px;
width: 900px;
}

.target #galerie img {
position: relative;
width: 150px;
height: 100px;
margin: 50px 15px 20px 0;
box-shadow: 0 0 10px #333;
}

.target #galerie #img1:target,
.target #galerie #img2:target,
.target #galerie #img3:target,
.target #galerie #img4:target {
position: absolute;
top: 150px;
left: 150px;
width: 600px;
height: 400px;
}

↑ Seitenanfang