Webdesign - Accordion-Image-Slider mit CSS3-Transitionen

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Kleines Cottage mit Reetdach
Der Weiler Runch
Druidenaltar in Drombeg
Strand bei Portsalon
Lobiser-Schupfen

Photos © Monika & Klaus Franz

Wie realisiert man einen Accordion-Image-Slider?

16Nov2014

Accordion-Image-Slider mit CSS3-Transitionen.


Der Accordion-Image-Slider ist aus dem optimierten Accordion-Effekt aus dem Artikel Accordion-Effekt mit einer interessanten Optik entstanden, deren ausführliche Beschreibung man am Ende des genannten Artikels findet. Für den Accordion-Image-Slider müssen aber ein paar Dinge angepasst werden.
Zum Beispiel werden die Buttons nicht in hell grau sondern dunkler dargestellt damit die Bilder besser zur Wirkung kommen.

Zur Veranschaulichung habe ich hier noch einmal den vertikalen Text-Slider eingeblendet.

Überschrift des ersten Artikels

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Überschrift des zweiten Artikels

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.

Überschrift des dritten Artikels

Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Überschrift des vierten Artikels

Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Der vertikale Accordion-Image-Slider

Der Aufbau des HTML5 (HyperText Markup Language)-Gerüsts ist identisch dem Text-Slider, nur dass hier das "p-Element" entfällt und dafür das "img-Tag" zum Einsatz kommt. Anstelle des "section-Elements" wird das "figure-Element" eingesetzt, und die h4-Überschrift wird ebenfalls nicht benötigt.

<div class="accordionimagev">
    <figure>
        <input type="radio" id="vais1" name="vais" value="">
        <label for="vais1">Kleines Cottage mit Reetdach</label>
        <div>
            <img src="bilder600/Cottage.jpg" width="600" height="400"
                 alt="Kleines Cottage" title="Kleines Cottage">
        </div>
    </figure>
    .
    .
    .
</div>

Auch das CSS3 (Cascading Style Sheet) unterscheidet sich kaum vom Text-Slider.

  • Beim Hauptcontainer ".accordionimagev" wird eine feste Größe, ein Innenabstand von 10 Pixel, ein 9 Pixel breiter Rand mit einer abgerundeten Ecke, ein strukturierter Hintergrund sowie ein Schatten um den Accordion-Image-Slider gelegt.
  • Das "figure-Element" übernimmt die Aufgabe des "section-Elements".
  • Die Radiobuttons werden wieder ausgeblendet.
  • Die Beschriftung der Button erfolgt in der Farbe "silber", der Textschatten sowie der Rand der Button in "schwarz" und der Button selber erhält den gleichen Farbverlauf wie in unserem Menue.
  • Beim Überfahren mit der Maus dreht sich der Farbverlauf der Buttons um und die Schriftfarbe wechselt nach "weiß".
  • Nach der Auswahl eines Buttons bleibt der Farbverlauf bestehen und die Schriftfarbe wechselt nach "grün".
  • Das Vorzeichen wechselt wie auch beim Text-Slider von "»" nach "-".
  • Die Höhe des "div-Containers" erhält nach Auswahl einen festen Wert und die Bilder erhalten unten eine runde Ecke.
.accordionimagev {
    width: 37.5em;
    height: 38em;
    margin: 1em auto -2em;
    padding: 5px 10px;
    border: 9px solid #464646;
    border-radius: 6px;
    background: url(/bilder/hintergrund_rand.jpg) repeat;
    box-shadow: inset 0 -3px 0 #555,
                inset 3px 0 0 #555,
                inset -3px 0 0 #555,
                0 5px 15px rgba(0, 0, 0, .5),
                0 -2px 15px rgba(0, 0, 0, .5);
}

.accordionimagev figure {
    margin: 0;
    padding: 0;
}

.accordionimagev [type=radio] {
    display: none;
}

.accordionimagev label {
    color: #c0c0c0;
    font-weight: bold;
    text-shadow: 1px 1px 1px #000;
    border: 1px solid #000;
    border-bottom: 0;
    border-radius: 5px;
    display: block;
    margin: 3px 0 0;
    padding: 10px;
    background: linear-gradient(#5e5e5e,#282828);
    box-shadow: 0 1px 1px #000;
    transition: all 1s ease-in;
}

.accordionimagev label:hover {
    background: linear-gradient(#282828,#5e5e5e);
    color: #fff;
}

.accordionimagev [type=radio]:checked ~ label {
    background: linear-gradient(#282828,#5e5e5e);
    color: #5aff00;
    text-shadow: 1px 1px 0 #555;
}

.accordionimagev label:before {
    content: '»';
    padding: 0 12px 0 5px;
}

.accordionimagev [type=radio]:checked ~ label:before {
    content: '-';
    padding: 0 14px 0 7px;
}

.accordionimagev div {
    height: 0;
    overflow: hidden;
    transition: all 1s ease-in;
}

.accordionimagev [type=radio]:checked ~ label + div {
    height: 25em;
    border-radius: 5px;
}

Und damit hat der "vertikale Accordion-Image-Slider" das folgende Aussehen:

Kleines Cottage
Weiler Runch
Gerfalke
Wollkopfgeier
Lobiser-Schupfen



Das sieht schon richtig klasse aus und funktioniert tadellos!
Aber idealerweise sollte so ein Accordion-Image-Slider horizontal aufgebaut werden.


Der horizontale Accordion-Image-Slider

Der Aufbau des HTML5 (HyperText Markup Language)-Gerüsts ist identisch zum vertikalen Accordion-Image-Slider, nur dass ich für den um 90 Grad gedrehten Text ein zusätzliches "span-Element" benötige und die Buttons werden durchnummeriert.

<div class="accordionimageh">
    <figure>
        <input type="radio" id="hais1" name="hais" value="">
        <label for="hais1">1
            <span>Kleines Cottage mit Reetdach</span>
        </label>
        <div>
            <img src="bilder600/Cottage.jpg" width="600" height="400"
                 alt="Kleines Cottage" title="Kleines Cottage in Irland">
        </div>
    </figure>
    .
    .
    .
</div>

Auch das CSS3 (Cascading Style Sheet) unterscheidet sich kaum vom vertikalen Accordion-Image-Slider. In der unten aufgeführten Auflistung habe ich die Unterschiede aufgeschrieben.

  • Beim Hauptcontainer ".accordionimageh" ändern sich natürlich die Größeneinstellungen und der ganze Slider wird aus Platzgründen weiter nach links versetzt.
  • Die Buttons erhalten eine feste Größe und einen helleren Rand. Die Nummerierung erfolgt in einer dunklen Farbe und aus dem Grund auch mit einem helleren Schatten.
  • Durch die Nummerierung entfällt das Vorzeichen.
  • Die Breite des "div-Containers" muss im geschlossenen Zustand den Wert "0" erhalten und als "inline-Block" gekennzeichnet werden.
  • Das "span-Element" ist für die Beschriftung der Buttons zuständig und mit "transform: rotate(-90deg)" wird der Text um 90 Grad gedreht.
.accordionimageh {
    width: 53.2em;
    height: 26em;
    margin: 1em 0 -2em -100px;
    padding: 10px;
    border: 9px solid #464646;
    border-radius: 6px;
    background: url(/bilder/hintergrund_rand.jpg) repeat;
    box-shadow: inset 0 -3px 0 #555,
                inset 3px 0 0 #555,
                inset -3px 0 0 #555,
                0 5px 15px rgba(0, 0, 0, .5),
                0 -2px 15px rgba(0, 0, 0, .5);
}

.accordionimageh figure {
    float: left;
    margin: 0;
    padding: 0;

.accordionimageh [type=radio] {
    display: none;
}

.accordionimageh label {
    float: left;
    height: 12.8em;
    width: 1.3em;
    color: #191919;
    font-weight: bold;
    font-size: 1.875em;
    text-shadow: -1px 1px 0 #555;
    text-align: center;
    border: 1px solid #555;
    border-radius: 5px;
    display: block;
    margin: 3px 0 0;
    padding: 10px 2px;
    background: linear-gradient(#282828,#555);
    box-shadow: 0 1px 1px #000;
    transition: all 1s ease-in;
}

.accordionimageh label:hover {
    background: linear-gradient(#555,#282828);
    color: #fff;
}

.accordionimageh [type=radio]:checked ~ label {
    background: linear-gradient(#555,#282828);
    color: #5aff00;
    text-shadow: 1px 1px 0 #555;
}

.accordionimageh div {
    width: 0;
    height: 25em;
    overflow: hidden;
    padding: 5px 5px 0 0;
    display: inline-block;
    visibility: hidden;
    transition: all 1s ease-in;
}

.accordionimageh [type=radio]:checked ~ label + div {
    width: 37.5em;
    height: 25em;
    visibility: visible;
}

.accordionimageh span {
    position: absolute;
    width: 25em;
    margin: 160px 0 0 -195px;
    color: #c0c0c0;
    font-size: .5em;
    text-shadow: 1px 1px 1px #000;
    text-align: left;
    transform: rotate(-90deg);
}

Und damit hat der "horizontale Accordion-Image-Slider" das folgende Aussehen:

Kleines Cottage
Weiler Runch
Gerfalke
Wollkopfgeier
Lobiser-Schupfen



Perfekt!


Der horizontale Accordion-Image-Slider ohne Buttons

Da ich bei diesem Slider wieder eine Bildunterschrift einblenden möchte, benutze ich das "figcaption-Element" und das "label-Element" bleibt leer. Außerdem werden die Bilder direkt im CSS3 (Cascading Style Sheet) eingebunden und damit sieht der Aufbau des HTML5 (HyperText Markup Language)-Gerüsts wie folgt aus.

<div class="accordionimagehb">
    <figure>
        <input type="radio" id="haisb1" name="haisb" value="" checked>
        <label id="ha1" for="haisb1"> </label>
        <figcaption>
            Kleines Cottage mit Reetdach
        </figcaption>
    </figure>
    .
    .
    .
</div>

Auch das CSS3 (Cascading Style Sheet) unterscheidet sich kaum vom ersten horizontalen Accordion-Image-Slider. In der unten aufgeführten Auflistung habe ich wieder die Unterschiede aufgeschrieben.

  • Beim Hauptcontainer ".accordionimagehb" ändern sich nur die Größeneinstellungen.
  • Die Bilder werden mit einem eindeutigen Namen versehen und als Hintergrund dem "label-Tag" zugewiesen.
  • Die Buttons entfallen im "label-Tag" und die Breite wird auf 4 em festgelegt, damit ein Teil der Bilder zu sehen ist. Das Aufblenden erfolgt dann mit einem leichten Überschwingen.
  • Das aktive Bild erhält die komplette Breite.
  • Die Beschriftung des aktiven Bildes ist dem ersten Beispiel der dreidimensionalen Slider entnommen. Hier ist allerdings zuerst nur eine kleine Schrift ausgewählt und die Breite auf 0 eingestellt.
  • Erst bei einem aktiven Bild wird die Schrift größer und erhält eine ausreichende Breite.
.accordionimagehb {
    width: 53.2em;
    height: 25em;
    margin: 2em auto 0;
    padding: 0;
}

.accordionimagehb figure {
    float: left;
    margin: 0;
    padding: 0;
}

.accordionimagehb [type=radio] {
    display: none;
}

#ha1 {
    background: url(../bilder600/Cottage.jpg) no-repeat;
}

#ha2 {
    background: url(../bilder600/Runch.jpg) no-repeat;
}

#ha3 {
    background: url(../bilder600/reisen_irland200623.jpg) no-repeat;
}

#ha4 {
    background: url(../bilder600/Strand_bei_Portsalon.jpg) no-repeat;
}

#ha5 {
    background: url(../bilder600/Lobiser-Schupfen.jpg) no-repeat;
}

.accordionimagehb label {
    float: left;
    height: 25em;
    width: 4em;
    display: block;
    margin: 0;
    padding: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .5),
                0 -2px 5px rgba(0, 0, 0, .5),
                -3px 0 20px 2px rgba(0, 0, 0, .7);
    transition: all 1s cubic-bezier(.5, .5, .2, 1.1);
}

.accordionimagehb [type=radio]:checked ~ label {
    width: 37em;
}

.accordionimagehb figcaption {
    position: relative;
    overflow: hidden;
    color: #fff;
    font: .2em/2.5 Verdana;
    letter-spacing: .1em;
    text-align: center;
    width: 0;
    margin: 0 auto;
    bottom: 45px;
    opacity: 0;
    visibility: hidden;
    transition: 1s;
}

.accordionimagehb figcaption:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: .1em;
    background: #fff;
    content: '';
    visibility: hidden;
    transition: transform .5s;
    transform: translate3d(-100%,0,0);
}

.accordionimagehb [type=radio]:checked ~ label + figcaption {
    font: 1.2em/2.5 Verdana;
    width: 24em;
}

.accordionimagehb:hover figcaption,
.accordionimagehb:hover figcaption:after {
    opacity: 1;
    transform: translate3d(0,0,0);
    visibility: visible;
}

Den horizontalen Accordion-Image-Slider ohne Button sehen Sie ganz oben am Anfang der Seite.

Zum Seitenanfang springen Λ