Ziel des Tutorials ist es, Checkmark-Icons zu kreieren, wie sie auf dem nebenstehenden Bild zu sehen sind. Natürlich ohne eine einzige Grafik zu verwenden; und ohne auf unnötige HTML-Elemente zurückgreifen zu müssen. Als Inspiration diente Nick Parsons dabei Nicolas Gallaghers Experiment mit den Pure CSS social media icons, die eigentlich eine eigene Meldung verdient hätten.

Also machte sich Nick daran, ein paar grundsätzliche Dinge zu bedenken. I just feel with all the buzz about CSS3 that it’s very important to use it in a mature and responsible way. Was ihn dazu brachte, die Pseudoklassen :before und :after für die Bewältigung der an sich selbst gestellten Aufgabe zu verwenden. Außerdem nutzt er den :nth-of-type-Selektor, um sicherzustellen, dass nur CSS3-kompatible Browser versuchen, die Icons darzustellen. Er dient quasi als Lebensretter – ältere Brwoser erhalten somit einen Fallback und zeigen die Standard-Bulletpoints an.

Das Ergebnis kann sich durchaus sehen lassen, auch wenn man von einem flächendeckenden Praxiseinsatz noch absehen sollte. Nicht alle Browser, die den :nth-of-type-Selektor verstehen, beherrschen alle verwendeten Techniken wie Runde Ecken oder die Rotation. Wer aber auf den Geschmack gekommen ist, sollte einen Blick in den Artikel Creating Fancy Checkmark Icons with Pure CSS3 riskieren.