Nachdem ich mal wieder ein wenig Zeit gefunden habe, gibt es hier nun wie versprochen eine optisch aufgepeppte Variante meiner Lightbox-Bildergalerie. Folgende Ergänzungen gibt es im Vergleich zur ursprünglichen Version:
:before und :after) sowieUnd so sieht’s aus:
Hier findest du eine Live-Demo der Bildergalerie:
und hier die Galerie als Download zu deiner freien Verfügung:
Viel Spass damit.
Einen Text innerhalb eines Elements horizontal und vertikal zu zentrieren ist nicht immer ganz einfach; besonders wenn das Element eine vorgegebene Größe hat.
Der Klassiker ist natürlich dieser:
.box {
padding: 5px;
}
Durch den Innenabstand ist der Text zentriert, da der Abstand zu den Rändern jeweils 5 Pixel beträgt. Das klappt natürlich nur, wenn man in der Wahl der Größe des Elements nicht beschränkt ist.
Wenn wir nun aber Text in einem Element mit vorgegebener Größe zentrieren wollen, wird es schon schwieriger.
Schon mal etwas vom Checkbox Hack gehört? Der Checkbox-Hack ist ziemlich simpel: eine Checkbox (zu deutsch ein Kontrollkästchen) wird zweckentfremdet und über dessen Status (angehakt oder nicht angehakt) ein Element unterschiedlich definiert.
Damit lassen sich viele tolle Sachen machen. Wie wäre es zum Beispiel mit einem Bereich, der erst dann eingeblendet wird, wenn ihr auf einen Button klickt? Das lässt sich prima für Frage-/Antwort-Bereiche nutzen. Im Standard (Kontrollkästchen ist nicht angehakt) ist nur die Frage zu sehen und der Antwort-Bereich ausgeblendet. Wird das Kontrollkästchen aktiv (Kontrollkästchen wird angehakt) wird der Antwortbereich eingeblendet. Wenn das Kontrollkästchen wieder inaktiv wird, blendet sich der Bereich wieder aus.
Interessante Sache, oder?
Wer jetzt an das hier denkt:
sollte sich vom Aussehen eines Kontrollkästchens verabschieden, da wir das eigentliche Kästchen nicht brauchen und ausblenden werden. Wir benötigen lediglich das Label und, wie bereits beschrieben, den Status der Checkbox.
Um das Ergebnis dieses Tutorials gleich vorwegzunehmen: wir werden dies hier erstellen:
Und los geht’s.
Nehmen wir mal folgendes an: wir haben im Quelltext unserer Webseite ein Element definiert, welches unter gewissen Bedingungen nicht angezeigt werden soll. Warum auch immer.
Als Grund fällt mir ein:
transition animiert werdenUm ein Element auszublenden oder zu verstecken, gibt es mehrere Wege. Ich stelle in diesem Beitrag die Möglichkeiten vor, die mir so eingefallen sind.
Die Stammbesucher werden es schon gemerkt haben: irgendwas sieht hier anders aus.
Nach etwas mehr als einem Jahr mit meinem Theme “ZWEI” war auch bei mir mal wieder ein Tapetenwechsel fällig. Das neue Design basiert auf dem kommenden Theme “FUENFZEHN”.
Das Theme ist allerdings noch nicht final; es wird ganz sicher noch die ein oder andere Änderungen geben.
Und da bin ich auch auf deine Mithilfe angewiesen: sollten dir Fehler auffallen bzw. die Darstellung in bestimmten Browsern nicht optimal sein, wäre ich für einen Hinweis dankbar. Schreib einfach einen Kommentar zu diesem Beitrag und verrate mir, welchen Browser in welcher Version du einsetzt. Danke sehr.
Und gefällt dir das Design?
In dieser Rubrik werde ich künftig das ein oder andere Tutorial zu Themen veröffentlichen, welche öfter mal nachgefragt werden. Im ersten CSS-Basics-Tutorial zeige ich, wie ihr drei gleichgroße Elemente nebeneinander mit einer Breite von 100% anordnet.
Um den Schwierigkeitsgrad noch etwas zu steigern, zeige ich auch Möglichkeiten auf, wie dies mit Elementen, für welche ein Außenabstand definiert ist, funktioniert.
Vor einiger Zeit habe ich in in diesem Artikel eine Bildergalerie vorgestellt, die Bilder bei Mouseover vergrößert. Was mit Desktopbrowsern prima funktioniert, ist auf mobilen Browsern eher suboptimal und verlangt nach einer besseren Lösung.
Da könnte ich folgendes anbieten: mittels des Checkbox-Hacks werden Bilder per Mauskilck vergrößert und bei erneutem Mausklick wieder verkleinert. Perfekt zum “touchen” aber auch für Desktop-Browser eine tolle Sache. Und das alles per minimalistischem CSS-Code.
Und neugierig geworden? So wird unsere fertige Galerie später aussehen:
Um auch optisch zu überzeugen, garnieren wir das Ganze noch mit einigen CSS3-Spielereien. Ihr wisst ja, dafür bin ich immer zu haben.
Dann legen wir mal los.
In diesem Tutorial zeige ich, wie ein Element horizontal oder vertikal (oder beides) zentriert wird. Das soll unser Ergebnis sein:
Angenommen wir haben ein Element
<div class="box">Blablablub</div>
wie folgt definiert
.box {
width: 200px;
height: 200px;
padding: 20px;
background: #fff;
box-sizing: border-box;
}
dann schaut das im Browser etwa so aus:
Anmerkung: das box-sizing habe ich eingefügt, damit padding (Innenabstand) das Element nicht vergrößert. Ohne box-sizing hätten wir ansonsten ein Element mit einer realen Größe von 240 x 240 Pixeln.