Im World Wide Web begegnet man häufig Slidern, beispielsweise auf Referenzseiten. Dort kann man dann zwischen den einzelnen Referenzen mit Hilfe von Navigationspfeilen hin und her wechseln, wobei oft auch noch eine kleine Beschreibung eingeblendet wird. Wenn die CSS3 Klasse :target verwendet wird, ist das auch nur mit CSS3 möglich.
HTML
Hierfür müssen wir uns zuerst die HTML Datei anlegen, die in dem Fall hier drei Bilder und jeweilige Beschreibungen aus Dummy Text enthält. Außerdem wird in jedem Article Tag neben dem Bild und der Beschreibung auch ein Link zu der vorherigen und der nächsten Referenz eingebunden.
<section>
<article id="home">
<img src="images/danielkahnert.de.jpg" width="900" height="643" alt="danielkahnert.de">
<p>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.</p>
<a href="#ipsum"><</a>
<a href="#lorem">></a>
</article>
<article id="lorem">
<img src="images/tsv.jpg" width="900" height="686" alt="tsv-burgdorf-leichtathletik.de">
<p>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.</p>
<a href="#home"><</a>
<a href="#ipsum">></a>
</article>
<article id="ipsum">
<img src="images/webdesign.jpg" width="900" height="700" alt="webdesign-florian-brinkmann.de">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.</p>
<a href="#lorem"><</a>
<a href="#home">></a>
</article>
</section> Code-Sprache: PHP (php)Das ist bereits der komplette HTML Code. Die Article Tags haben jeweils eine id bekommen, die wir gleich für den CSS-Teil benötigen werden.
CSS
Zuerst müssen wir die einzelnen Bilder und dazugehörenden Beschreibungen richtig positionieren, damit sie nachher nicht untereinander erscheinen. Dazu verwenden wir eine absolute Positionierung der einzelnen Slider-Elemente, also der article. Den body müssen wir relativ positionieren, damit sich die article-Tags an ihm ausrichten.
Außerdem geben wir dem body einige grundlegende Eigenschaften, genau wie den Links, die nachher für den Bildwechsel verantwortlich sind:
body{
background:#000;
color:#ff7800;
width:900px;
margin:0 auto;
position:relative;
}
a{
color:#000;
}
article,
article a{
position:absolute;
text-decoration:none;
}Code-Sprache: CSS (css)Das war auch schon die grundlegende Positionierung der einzelnen Elemente, nun können wir die Navigationspfeile sowie die Beschreibung pixelgenau positionieren und der Beschreibung gleich einen Hintergrund sowie Innenabstände zuweisen:
a.prev{
top:300px;
left:20px;
font-size:30px;
visibility:hidden;
opacity:0;
}
a.next{
top:300px;
left:860px;
font-size:30px;
visibility:hidden;
opacity:0;
}
article a,
article p{
-moz-transition:all .5s ease .5s;
-o-transition:all .5s ease .5s;
-webkit-transition:all .5s ease .5s;
transition:all .5s ease .5s;
}
article p{
width:860px;
padding:20px;
position:absolute;
bottom:-1em;
background:rgba(0,0,0,.9);
visibility:hidden;
opacity:0;
}Code-Sprache: CSS (css)Die Pfeile und die Beschreibung habe ich gleich versteckt, damit ich das nachher nicht noch machen muss. Was eingeblendet werden soll, muss schließlich standardmäßig versteckt sein.
In Zeile 15 bis 21 ist festgelegt, dass die Navigationslinks und die Beschreibungsabsätze nicht sofort verschwinden, wenn der Cursor nicht mehr auf dem Bild ist, außerdem werden sie langsam ausgeblendet (in 0,5s mit 0,5s Verzögerung)
Nun können wir damit weitermachen, die Pfeile und Beschreibung beim CSS Zustand :hover sichtbar zu machen. Ich füge gleich die CSS3 Zeilen für ein langsames Einblenden mit ein:
article:hover p,
article:hover a{
visibility:visible;
opacity:1;
-moz-transition:all .4s ease 0s;
-o-transition:all .4s ease 0s;
-webkit-transition:all .4s ease 0s;
transition:all .4s ease 0s;
}Code-Sprache: CSS (css)Nun müssen wir uns noch darum kümmern, dass die Bilder, die gerade nicht angeschaut werden, versteckt sind und nur erscheinen, wenn sie ausgewählt sind. Das erreichen wir mit den CSS Pseudoklassen :not und :target.
Mit :target können wir den Zustand beschreiben, dass eins der Bilder ausgewählt ist und ihm die entsprechenden Eigenschaften zuweisen. Mit :not(:target) ist - logischerweise - das Gegenteil möglich: Den Zustand der nicht ausgewählten Bilder bestimmen. Und das werden wir nun tun:
#lorem:not(:target),
#ipsum:not(:target),
#home:not(:target){
visibility:hidden;
opacity:0;
-moz-transition:all .5s ease 0s;
-o-transition:all .5s ease 0s;
-webkit-transition:all .5s ease 0s;
transition:all .5s ease 0s;
z-index:10;
}
#lorem:target,
#ipsum:target,
#home:target{
visibility:visible;
opacity:1;
-moz-transition:all .5s ease 0s;
-o-transition:all .5s ease 0s;
-webkit-transition:all .5s ease 0s;
transition:all .5s ease 0s;
z-index:20;
}Code-Sprache: CSS (css)Wenn die einzelnen article-Tags durch die Links also nicht "angesteuert" wurden, werden diese mit visibility versteckt. Sind sie als Sprungmarke ausgewählt, erscheinen die article mit den entsprechenden id's.
Der z-index ist wichtig, da es sonst vorkommt, dass die Navigationspfeile von dem untersten Element in dem HTML Dokument (also in unserem Fall #ipsum) auch bei den anderen Bildern erscheint, also eine korrekte Navigation nicht mehr möglich ist. ipsum liegt logisch betrachtet auch zuoberst, da es als letztes in dem Dokument steht.
Hier nochmal der ganze CSS-Code:
body{
background:#000;
color:#ff7800;
width:900px;
margin:0 auto;
position:relative;
}
a{
color:#000;
} article,
article a{
position:absolute;
text-decoration:none;
}
a.prev{
top:300px;
left:20px;
font-size:30px;
visibility:hidden;
opacity:0;
}
a.next{
top:300px;
left:860px;
font-size:30px;
visibility:hidden;
opacity:0;
}
article a,
article p{
-moz-transition:all .5s ease .5s;
-o-transition:all .5s ease .5s;
-webkit-transition:all .5s ease .5s;
transition:all .5s ease .5s;
}
article p{
width:860px;
padding:20px;
position:absolute;
bottom:-1em;
background:rgba(0,0,0,.9);
visibility:hidden;
opacity:0;
}
article:hover p,
article:hover a{
visibility:visible;
opacity:1;
-moz-transition:all .4s ease 0s;
-o-transition:all .4s ease 0s;
-webkit-transition:all .4s ease 0s;
transition:all .4s ease 0s;
}
#lorem:not(:target),
#ipsum:not(:target),
#home:not(:target){
visibility:hidden; opacity:0;
-moz-transition:all .5s ease 0s;
-o-transition:all .5s ease 0s;
-webkit-transition:all .5s ease 0s;
transition:all .5s ease 0s;
z-index:10;
}
#lorem:target,
#ipsum:target,
#home:target{
visibility:visible;
opacity:1;
-moz-transition:all .5s ease 0s;
-o-transition:all .5s ease 0s;
-webkit-transition:all .5s ease 0s;
transition:all .5s ease 0s;
z-index:20;
}Code-Sprache: CSS (css)Achtung
Bei diesem Codebeispiel ist es wichtig, dass an die Links die id des jeweils ersten Bildes angehängt wird, da sonst keins angezeigt wird (wir erinnern uns: mit :not(:target) haben wir die versteckt, deren ids nicht "angewählt" sind).
Es ist auch möglich diesen Fall zu umgehen, indem das erste Bild nicht versteckt wird und die anderen per z-index darübergelegt werden. Dann muss allerdings das erste Bild am niedrigsten sein, da es sonst nicht vollständig verdeckt wird. Außerdem kommt es dann zu keinem sauberen Animationsübergang von einem Bild zu dem nicht versteckten Bild, da dieses nicht per CSS3 eingeblendet werden kann. Es ist ja schon da.
Mit ein wenig Basteln lässt sich das Problem mit dem Animationsübergang vielleicht beheben.
Falls jemand eine bessere Lösung kennt - einfach einen Kommentar schreiben!