Filter Functionality with CSS3

Mary Lou zeigt wie man einen interaktiven Filter mit der Pseudo Klasse :checked bauen kann.

Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.

Nett. Und die Demo läuft schön flüssig.

 

CSS3 Accordion Menü

Das Webstandard-Blog stellt ein Accordion Menü nur mit CSS3 vor. Das klappt in allen modernen Browser, also alles != IE und > IE 8.

Die CSS3 Pseudoklasse :target und die Negationspseudoklasse :not(), zusammen mit dem CSS3-Modul Transition, ermöglichen ein solches “Bewegungsmuster”. Nur eben ganz ohne JavaScript! Das heißt, dass die durchaus beliebten “Akkordeon- oder auch Toggle-Effekte” ausschließlich via CSS umgesetzt werden können! Das heißt auf der anderen Seite dann natürlich auch das Requests für JavaScript eingespart werden könnten.

 

Checkboxen und Radioboxen gestalten

Sven Wolfermann stellt eine Idee für individuelle Checkboxen & Radio Inputs vor.

Einige Formular-Elemente lassen sich (…) nur schwerlich, bis gar nicht cross-browser-konform stylen, z.B. das input[type=”file”]. Für Checkboxen und Radio-Buttons möchte ich heute eine Möglichkeit zeigen, die zudem auch die neuen CSS3 Pseudo-Klasse :checked beinhaltet.

Die Idee ist die Input-Felder über background-clip zu verstecken und das Label Element für die Styles zu nutzen.