Freaky Friday: CSS3 Checkbox Hack

Endlich mal wieder ein knackiger Freaky Friday Beitrag, in dem ich kurz aktuelle Web Techniken erkläre. Diese Woche soll es um den CSS3 Checkbox Hack gehen. Mit dieser Technik ist es ganz ohne Javascript möglich Inhalte einer Website ein- oder auszublenden. Oftmals wird hierzu einfach Javascript verwendet. Gerade mit jQuery ist es ziemlich einfach schnell einen Slide Effekt zu erzielen. Allerdings ist das gar nicht mehr notwendig mit aktuellen Browsern. Wozu noch eine zusätzliche Javascript Bibliothek laden, wenn man es ohnehin mit CSS machen kann?

Schauen wir uns aber erstmal das HTML Grundgerüst an.

Hi! Mein Name ist Marcel und ich bin 36 Jahre alt. Ich bin selbstständiger Webentwickler / Freelancer und Kopf der Firma MM Newmedia. In meiner Freizeit bin ich Freund der Musik, sammle Schallplatten und quäle mich hin und wieder mit meinem Mountainbike über Stock und Stein.

Soweit macht der HTML Code noch nicht viel her. Es ist hier eine einfache Checkbox notiert. Ihr kennt diese kleinen anklickbaren Boxen aus einfachen Formularen. In unserem Beispiel werden wir später den Zustand der Checkbox kontrollieren, um den Div Container ein- oder auszublenden. Im Zusammenhang mit der Checkbox wurde ein Label notiert. Wenn man drauf klickt, verändert sich eben der Zustand der Checkbox. Über das Label aktivieren oder deaktivieren wir die Checkbox. Also alles so, wie man es auch aus Formularen kennt.

Jetzt zum eigentlichen Trick. Der CSS Code, der für uns die ganze Arbeit erledigt.

div { 
    width: 400px; 
}

/* Klickbares Label gestalten */
div > label { 
    background: #000 none repeat scroll 0 0; 
    display: block; 
    color: #fff; 
    font-weight: bold; 
    max-width: 400px; 
    padding: 10px; 
    text-transform: uppercase; 
    width: 100%; 
}

/* Pfeil nach rechts bei nicht aktivierter Checkbox - Normalzustand */
div > label:before { 
    content: "\25b6"; 
    display: inline-block; 
    width: 20px; 
}

/* Pfeil nach unten bei aktivierter Checkbox */
div > input[type="checkbox"]:checked ~ label:before { 
    content: "\25bc"; 
}

/* Checkbox will hier echt niemand sehen - raus aus dem sichtbaren Bereich */
div > input[type="checkbox"] { 
    left: -9999px; 
    position: absolute; 
    top: -9999px; 
}

div > div { 
    background: #ccc; 
    display: none;
    width: 420px; 
}

/* Div Container darstellen, wenn Checkbox aktiviert wurde */
div > input[type="checkbox"]:checked ~ div {
    display: block;
}

/* Eigenschaften für den Text, so dass sie sich nicht auf den eigentlichen Div Container auswirken */
div > div > p { 
    padding: 10px; 
    margin: 0; 
}					

Über den Zustand der Checkbox, die wir erstmal aus dem sichtbaren Bereich des Bildschirms hinaus geschoben haben, haben wir hier definiert, wann der Text angezeigt wird. Aktiviert man die Checkbox, definieren wir hier über die CSS Pseudoelemente :checked, dass der auf die Checkbox folgende Div Container angezeigt werden soll. Gleichzeitig definieren wir über label:before einen Pfeil, der je nach Zustand der Checkbox angezeigt wird. Schon haben wir den CSS3 Checkbox Effekt erklärt. Alles hängt vom Pseudoelement :checked und den CSS3 Selektoren ~ ab.

snippet-box

Fazit

Die Semantik wird mit dem CSS3 Checkbox Hack ein wenig ad absurdum geführt. Allerdings werden HTML Dokumente richtig validiert und es bleibt schön schnell und performant. Es muss also absolut kein Javascript mehr für derartige Effekte eingesetzt werden. Ein kleines Beispiel inkl. einem CSS3 Slide Effekt habe ich mal hier für Euch hinterlegt. Den Quellcode könnt ihr wie immer frei benutzen.

Bildquelle: markusspiske / CCO Public Domain

1 Gedanke zu „Freaky Friday: CSS3 Checkbox Hack“

Antworten auf Bernhard NikolaAntwort abbrechen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.