5202

ein Blog über technische Fragen zu Blogger

HTML5 Fader ohne Javascript Teil 2

von
Weiter geht's mit dem HTML5 Fader - im ersten Teil habe wir das HTML und den 'vorwärts/rückwärts' Schalter angeschaut, heute folgt der Rest.

Bilder mittig zentrieren

Schaut euch den Fader noch mal an - vielleicht fällt euch auf, dass ich kleinere und größere Bilder genommen habe und alle sind mittig zentriert.

Dazu geben wir dem figure Tag eine Höhe und Breite die [logischerweise] größer sein muss als das größte Bild und zentrieren es über die Eigenschaft table-cell und vertical-align: middle:
figure {
display: table-cell;
position: relative;
vertical-align: middle;
font-size: 20px;
width: 770px;
height: 590px;
opacity: 0;
z-index: 20;
}
Fertig! So einfach geht's, ohne komplizierte Rechnerei sind damit alle Bilder in dem figure Tag zentriert.

Bilder einblenden
Im Ausgangszustand sind alle Bilder mit opacity: 0 ausgeblendet, die 'Durchsichtigkeit' ist also Null. Zum einblenden geben wir dem jeweiligen Bild die volle Deckkraft - damit das smoooth passiert, legen wir noch eine Transition drauf:
#box1:checked ~ .holder label:nth-of-type(1) figure,
#box2:checked ~ .holder label:nth-of-type(2) figure,
#box3:checked ~ .holder label:nth-of-type(3) figure,
#box4:checked ~ .holder label:nth-of-type(4) figure,
#box5:checked ~ .holder label:nth-of-type(5) figure,
#box6:checked ~ .holder label:nth-of-type(6) figure,
#box7:checked ~ .holder label:nth-of-type(7) figure,
#box8:checked ~ .holder label:nth-of-type(8) figure,
#box9:checked ~ .holder label:nth-of-type(9) figure {
opacity: 1;
-webkit-transition: .8s;
   -moz-transition: .8s;
    -ms-transition: .8s;
     -o-transition: .8s;
        transition: .8s
}
Beachtet, dass die Transition nur für das Einblenden gültig ist, nicht für das Ausblenden, das geschieht auf einem Schlag - ich finde den Effekt so klarer.

Das wären erst einmal alle wichtigen Funktionen vom Fader - was noch fehlt sind die 'Goodies', also die kleine Navigation und die Untertitel.

Navigation

Unter den Bilder wollen wir einen kleinen Anzeiger haben, wo das jeweilige Bild in der Reihe steht. Dazu benützen wir ein weiteres HTML5 Tag, nämlich nav. Wir positionieren das Tag nzunächst:
nav {
 position: relative;
 text-align: center;
 padding: 6px 0 6px 0;
 border-bottom: 1px dashed rgba(0,0,0,0.1);
    background: #f8f8f8
}
Dann bauen wir aus den span Container kleine runde Buttons:
nav span {
 display: inline-block;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background: #f0f0f0;
 margin: 3px;
 cursor: pointer;
 box-shadow: 
  inset 0 1px 1px rgba(0,0,0,0.2), 
  0 2px 1px rgba(255,255,255,0.9);
}
Und geben dem 'markierten' Button einen grünen Hintergrund:
#box1:checked ~ .holder label nav span:nth-of-type(1),
#box2:checked ~ .holder label nav span:nth-of-type(2),
#box3:checked ~ .holder label nav span:nth-of-type(3),
#box4:checked ~ .holder label nav span:nth-of-type(4),
#box5:checked ~ .holder label nav span:nth-of-type(5),
#box6:checked ~ .holder label nav span:nth-of-type(6),
#box7:checked ~ .holder label nav span:nth-of-type(7),
#box8:checked ~ .holder label nav span:nth-of-type(8),
#box9:checked ~ .holder label nav span:nth-of-type(9)  {
background: #bdd70d
}
Fertig ist die Navigation - keine Bilderchen machen, keine Grafiken einbinden, alles mit purer CSS gemacht.

Untertitel

Als letztes wollen wir noch die Untertitel zum jeweiligen Bild haben - auch das ist mit einem HTML5 Tag gebaut, nämlich dem figcaption Tag.

Wie ich schon im ersten Teil gesagt habe, muss der figcaption Tag unbedingt ganz unten im figure Tag liegen, sonst zeigen manche Browser ein chaotisches Verhalten.

Ich wollte die Untertitel über den Bildern haben, also habe ich den Tag absolute positioniert und ganz nach oben gelegt:
figcaption {
  position: absolute;
  padding: 6px 0 6px 0;
  width: 100%;
  top:0;
  font-size: 30px;
  display: block;
  background: rgba(0, 0, 0, .5);
  color: #f0f0f0
}
Wenn man die Untertitel unter den Bildern haben will, positioniert man sie mit bottom: 0 ganz unten ... wenn ... ja wenn es den Firefox nicht gäbe, der meiner Ansicht nach ein ganz klaren Bug hat und bei position: absolute die Höhe der Untertitel nicht aus der Gesamthöhe rausrechnet.

Das ist zwar nur ein kleiner Fehler und stört nicht sehr, aber damit sind die Bilder im Firefox nicht mehr ganz mittig zentriert - eine Lösung dafür habe ich leider nicht gefunden :=(. Seltsamerweise funktioniert's, wenn die Untertitel oben stehn, warum-auch-immer.

Abschließende Gedanken

Dank HTML5 und CSS3 braucht ihr selbst bei komplexeren Funktionen inzwischen kein Javascript mehr. Javascript ist nichts an sich schlechtes, aber es macht Seiten immer a bisserl langsamer und 'zäher' als es sein müssten. Wenn ihr es nicht wirklich braucht, dann benützt es auch nicht.

Aber das funktioniert im Internet Explorer 7 nicht?

Richtig! Aber selbst Google unterstützt nur noch die letzten beiden Versionen der jeweiligen großen Browser - ab dem 16. Oktober ist das beim Browser vom Weltmarktführer etwa der Internet Explorer 9 und 10.

Ich höre oft: Bei meiner besten Freundin mit IE7 wird dieses oder jenes nicht richtig angezeigt ... okay, ist das _euer_ Problem? Es gibt funktionierende Browser für alle Systeme die selbst der totale Computer DAU mit einem Klick installieren kann. Wenn jemand drauf besteht, einen _nicht_ funktionierenden Browser zu benützen, würde ich persönlich für solche Asbach Uralt Browser nicht anfangen wild drauf los zu optimieren ... aber das muss natürlich jeder selber für sich entscheiden.

Puh ist das kompliziert ...

Ja das stimmt. CSS und HTML sind formale Sprachen die ihr erlernen müsst, so wie ihr lesen und schreiben gelernt habt. Wollt ihr das nicht, dann werdet ihr im Internet immer in der Rolle eines 'funktionalen' Analphabeten bleiben, d.h. ihr könnt zwar irgendwie mit der Materie umgehen, aber ihr versteht nicht was ihr da tut :=)!

Anmerkungen, Fragen ...

... aber gerne! Wenn was unklar ist, ihr Fehler findet oder sonst etwas: Dafür sind die Kommentare gedacht.