Design

Weder Grafik, noch Font: Icons aus reinem CSS3 mit One-Div.com

8. Januar 2013
von

Icons werden auf vielen Websites eingesetzt – machen sie doch gerade bei Links ohne (viel) Text schnell deutlich, was gemeint ist. In Zeiten hochauflösender Displays werden pixelbasierte Icons mehr und mehr durch Vektor-Icons abgelöst. Denn gerade die filigran gestalteten Icons wirken auf kleinen Displays entweder zu klein oder (bei Vergrößerung) sehr schwammig. Neben dem Einsatz von Icon-Webfonts gibt es Icons aber auch als reine CSS3-Inkarnation.


Icongalerie von one-dev.com

Auf der Seite one-div.com gibt es eine Galerie, die Icons ausstellt, die allesamt ausschließlich mit CSS3 realisiert sind. Es handelt sich dabei um teils typische Icons für Bedienelemente, soziale Netzwerke und zur Visualisierung unterschiedlicher Medien. Die Icons sind – auch bedingt durch CSS3 – schlicht gehalten und einfarbig.

Icons mit Quelltext und Hinweisen

Jedes Icon ist mit drei Buttons ausgestattet, über den der HTML- und CSS-Quelltext angezeigt und automatisch in die Zwischenablage kopiert wird. Außerdem gibt es die Möglichkeit, eine fertige HTML- und CSS-Datei mit dem Icon als ZIP-Datei herunterzuladen.

Darüber hinaus wird für jedes Icon ein Hinweis eingeblendet, der Auskunft darüber erteilt, welcher Browser das CSS3-Icon problemlos darstellen kann, wo es Probleme gibt und wo es gar nicht klappt. Der Hinweis wird für Chrome, Firefox, Safari, Opera und den Internet Explorer eingeblendet. Die Betreiber sind bestrebt, die Icons zumindest für Chrome, Safari und Firefox kompatibel zu machen.

Derzeit befinden sich gut 80 CSS3-Icons in der Galerie. Zusätzlich kann jeder selbst Icons einreichen, sodass die Anzahl bei entsprechendem Interesse an dem Projekt sicher noch steigen wird.

Animierte Icons möglich

Der große Vorteil von CSS3-Icons im Vergleich zu Webfont- oder SVG-Icons ist der, dass sie animierbar gemacht werden können – entweder als Hover-Effekt mit der „transition“-Eigenschaft oder als durchgängige Keyframe-Animation per „animation“-Eigenschaft.

Einige wenige bewegte Icons sind in der Galerie enthalten. Bewegung lässt sich aber auch selbst in die Icons bringen. Wer sich mit den Pseudoelementen „before“ und „after“ sowie den CSS3-Transitions auskennt, wird schnell aus einem statischen Icon ein animiertes erstellen können.

Fazit: One-dev.com bietet einige nützliche Icons und viele Anregungen, um selbst Icons per CSS3 gestalten und bei Bedarf animieren zu können.

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Tags: ,

10 Kommentare zu „Weder Grafik, noch Font: Icons aus reinem CSS3 mit One-Div.com
  1. szczeoan am 8. Januar 2013 um 16:15

    leider ist die seite durch die starke css3 verwendung sehr langsam in der performance (Xp, chrome 21,3Ghz,2gb Ram)

    • ati am 8. Januar 2013 um 16:54

      Hier läuft’s auf Hardware mit ähnlicher Leistung eigentlich ganz erträglich, aber mit Xubuntu 12.10 und Opera oder Chrome. Krasse Icon-Technik, aber z.Zt. wohl nur eine nette Spielerei.

  2. basti1350 am 8. Januar 2013 um 16:55

    An sich, toll was mit CSS3 so alles geht.
    Ich finde es aber alles andere als gut einen leeren div-container als dekoratives Element zu verwenden, im Hinblick auf Semantik…
    Ich hab aber auch schon damit rumgespielt, und man kann die Stile auf jedes Element anwenden.
    Man kann zB einen Link verwenden und den Text dann später mit text-indent verstecken , dann können auch sehgeschädigte was damit anfangen.

    Ähnliche Probleme hat man ja schon bei CSS-Animationen.

    Nicholas Gallagher hat vor ewigen Zeiten schonmal mit CSS-Icons experimentiert,
    auch sehr interessant
    http://nicolasgallagher.com/pure-css-gui-icons/

  3. Jens am 8. Januar 2013 um 20:16

    Aha. “Es geht” und “Es ist sinnvoll” ist nicht immer das gleiche wie man bei diesen “icons” sieht. Statt ein paar Bytes für die Pixel einer Grafik einen Haufen CSS laden?
    Wenn es Vektoren sein sollen: SVG und das wird von allen aktuellen Browsern performant dargestellt. Das wäre vernünftiger – ist schließlich auch nur Text (xml).

    • basti1350 am 9. Januar 2013 um 01:27

      Ich bin auch eher ein Fan von SVG, allerdings sind diese auch nicht komplett browsersicher. Einen Fallback braucht man so oder so.

  4. Miksi am 10. Januar 2013 um 08:23

    Ich finde es schon leicht absurd, daß der himmelschreiende Nachteil dieser “tollen” Technik – nämlich die gigantische Verprassung von Systemressourcen – nicht mal in einem Nebensatz erwähnt wird. Selbst auf meinem Arbeitsrechner lässt sich diese Seite mit ihren lumpigen Symbolen nicht flüssig Scrollen, wie sieht das dann erst bei Otto Normalverbraucher oder auf Kleingeräten aus? Etwas mehr Skepsis wäre bei diesen ständigen Jubelarien über vermeintlich “Neues aus dem Netz” angebracht.

    • Dieter Petereit am 10. Januar 2013 um 09:12

      Worin genau besteht nochmal die Jubelarie in diesem Beitrag? Und wo genau siehst du die “ständig” realisiert?

    • Florian am 15. Januar 2013 um 16:00

      Also auf meinem 1-Kern Android-Smartphone (Nexus S) lässt sich die Seite im Chrome wie jede andere Seite scrollen. Die größten performance-einbußen hat man wohl durch die beiden animierten Icons.

  5. ^^ am 14. Januar 2013 um 22:30

    Die Webseite auf one-div.com wurde als attackierende Seite gemeldet und auf Grund Ihrer Sicherheitseinstellungen blockiert.

    Oo

  6. Lucas am 2. April 2013 um 11:02

    Sind die “Icons” lizenzfrei?

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!