Bullet-Time mit CSS3
Kommentare

Nein, wir spielen nicht auf das vor allem aus blutigen Spielen bekannte Slow-Motion-Element an; vielmehr geht es um HTML-Listen und die vor einiger Zeit veröffentlichte Idee, grafische Buttons aus purem

Nein, wir spielen nicht auf das vor allem aus blutigen Spielen bekannte Slow-Motion-Element an; vielmehr geht es um HTML-Listen und die vor einiger Zeit veröffentlichte Idee, grafische Buttons aus purem HTML und CSS3 zu basteln. Auf Webitect geht man jetzt einen ähnlichen Weg und verschönert Listenpunkte mit kleinen Häkchen – ohne eine einzige Grafik zu verwenden.

Das fertige Ergebnis auf der Seite

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.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -