10 CSS-Snippets zum Erstellen einfacher Balkendiagramme

Suchen Sie nach einer Möglichkeit, einfache CSS-Balkendiagramme im Web zu erstellen? Diese Sammlung wird Ihnen sicherlich helfen, da sie voll von kostenlosen Open-Source-Balkendiagrammen ist, die alle in CSS entworfen wurden.

Die meisten dieser Grafiken haben eine starke Schlagkraft mit zusätzlichen CSS-Animationen und Verlaufseffekten. Aber Sie werden einige finden, die sogar die Positionierung, Größe, Form und das Design von Daten neu gestalten. Die perfekte Sammlung für jeden Frontend-Entwickler, der nach einer eleganten Balkendiagramm-Benutzeroberfläche sucht.

1. Datendiagramme

In diesem Set finden Sie einige Diagramme, die wunderschön gestaltet und sehr gut ausgeführt sind. Entwickler Kris Olszewski konzentrierte sich hauptsächlich auf die UX für diese Balkendiagramme, zusammen mit dem oberen Rand jedes Balkens, der Rohdaten teilt (in diesem Fall Platzhalternummern).

Natürlich läuft das Ganze auf CSS, was sicherlich beeindruckend ist. Es enthält Vorlagen für vertikale und horizontale Balken und abgestufte Balken, bei denen Sie die Hintergrundfarbe basierend auf bestimmten Werten ändern können.

Einfach eines meiner Lieblingssets da draußen, weil es Entwicklern so viel Abwechslung zum Aufgreifen und Anpassen bietet.

2. Pokemon-Balkendiagramm

Ich kann nicht sagen, dass dieses Design in einem realen Layout besonders nützlich wäre, aber es ist auf jeden Fall beeindruckend.

Diese Leisten im Pokemon-Stil bieten ein kreatives Grafikdesign für das Web. Jeder Balken basiert auf einem bestimmten Farbschema zusammen mit Vektorelementen für die Augen einzelner Pokémon.

Jeder verfügt über einen Hover-Animationseffekt, sodass Sie diesen sogar neu gestalten können, um ihn an die gewünschten Übergänge anzupassen. Und wenn Sie diese Kreaturen in andere Tiere verwandeln möchten, können Sie derselben Vorlage mit veränderten Farben folgen.

3. Animiertes Diagramm

Balkendiagramme werden verwendet, um visuelle Daten für einen einfachen Verbrauch anzuzeigen. Das bedeutet, dass sowohl visuelle Elemente als auch Rohdaten enthalten sein sollten.

Das ist eine Sache, die ich an diesem Diagramm wirklich mag, bei dem Prozentbeschriftungen am oberen Rand jedes Balkens verwendet werden. Es enthält keine Legende oder X / Y-Beschriftungen, aber diese wären nicht schwer hinzuzufügen.

Ich denke, der beeindruckendste Teil ist, wie das Ganze über CSS läuft. Die Animationen und der prozentuale Text erscheinen beide aufgrund von CSS-Eigenschaften. Verrücktes Zeug!

4. Minimalistisches Diagramm

Einfach und benutzerfreundlich beschreibt am besten den minimalistischen Trend, der das Internet erfasst. Minimalismus ist oft die beste Wahl für reaktionsschnelle Websites oder einfachere Layouts, die keine starken Farbschemata erfordern.

Und mit diesem Balkendiagramm können Sie Daten an jede gewünschte Lichtfarbe anpassen.

Es verwendet willkürliche Hintergrundzeilen, um Messungen anzuzeigen, und Sie können sogar Beschriftungen auf der Y-Achse hinzufügen, um die Daten zu verdeutlichen.

5. Reine CSS-Farbbalken

CSS-Verläufe bereichern das Web erheblich, und dieses Balkendiagramm ist nur ein weiteres Beispiel für Farbverläufe in Aktion.

Jeder Balken verwendet klassische Web 2.0-Verläufe, die sich ein bisschen altmodisch anfühlen können, aber fantastisch aussehen. Das gesamte Design arbeitet mit Sass-Code und verwendet Variablen, um die Animationsverzögerung, die Balkengröße und die Gesamthöhe des Diagramms festzulegen.

Um die Farben zu bearbeiten, müssen Sie sich durch Sass/SCSS arbeiten oder CodePen verwenden, um in rohes CSS zu kompilieren. Aber es ist kein übermäßig komplexes Diagramm, daher sollte dies keine großen Probleme bereiten.

6. Versetzte horizontale Balken

Lineare Animationen gehören zu meinen Favoriten, weil sie schnell Aufmerksamkeit erregen. In diesem Stift sehen Sie ein Beispiel für eine lineare Animation, bei der jeder Balken nacheinander in die Ansicht geladen wird.

Es ist horizontal gestaltet, sodass die Balken über den Bildschirm geladen werden und Beschriftungen innerhalb der Balkengrafik enthalten. Auf diese Weise folgt die Gesamtmessung des „Fähigkeitsniveaus“ der X-Achse und lässt Raum, um vertikal weitere Fähigkeiten hinzuzufügen.

Eines der saubereren Balkendiagramme, die ich gesehen habe, und es kann auf jeder Skill-basierten Portfolio-Website hervorragend funktionieren.

7. Ansprechendes Balkendiagramm

Jede moderne Website sollte wirklich responsive sein, um allen Geräten gerecht zu werden. Aber auf einige Elemente ist schwieriger zu reagieren als auf andere.

Tabs, große Tabellen und Grafiken sind komplexe Beispiele. Dieses reaktionsschnelle Diagramm leistet hervorragende Arbeit bei der Handhabung kleinerer Bildschirme. Es ändert sich nicht viel über die Gesamtgröße und den Abstand zwischen den Balken hinaus.

Auf kleineren Bildschirmen können sich die Elemente der Bar eng und fast unlesbar anfühlen. Aber zum größten Teil ist dieser ansprechende Stil fantastisch und der perfekte Ersatz für statische Diagramme.

8. Tägliches CSS-Diagramm

Entwickler testen ihre Fähigkeiten gerne mit Herausforderungen wie Daily CSS. Dies ruft jeden Tag Bilder von UI-Designs ab und fordert Entwickler auf, sie in HTML/CSS neu zu erstellen.

Auf CodePen finden Sie viele davon, und diese Grafik ist ein makelloses Beispiel.

Es ist mit Einfachheit und sauberen Animationseffekten gestaltet, die an jeder Leiste angebracht sind. Ganz zu schweigen davon, dass es einem monochromen Farbschema folgt, das sich leicht an jede Website anpassen lässt.

9. Inventardiagramm

Ein weiteres cooles tägliches CSS-Beispiel ist diese Weinberg-Inventartabelle, die mit CSS und einigen schlauen HTML-Fähigkeiten erstellt wurde.

Es ist eine ziemlich einzigartige Idee und noch beeindruckender, dass es ausschließlich über CSS läuft. Am meisten beeindruckt mich das tatsächliche Design des Diagramms und wie es im Browser perfekt gerendert wird.

Zugegeben, das würde auf den meisten Websites auch nicht funktionieren, aber es ist ein Beweis dafür, was in modernem CSS möglich ist.

10. Nur CSS-horizontale Fähigkeiten

Sie finden online viele Balkendiagramme zur Messung der Fähigkeiten, aber dieses von Jed Trow ist ein echter Leckerbissen.

Es ist so konzipiert, dass es vollständig reagiert und auf jedem Bildschirm einwandfrei funktioniert. Sie können dieses Balkendiagramm für Smartphones auf 320 Pixel verkleinern, und es behält weiterhin seine Konsistenz.

Außerdem enthält dieser Stift einen kleinen Tutorial-Bereich unter der Demo, in dem Sie den gesamten Quellcode und seine Funktionsweise sehen können. Natürlich können Sie auch einfach aus der IDE von CodePen kopieren/einfügen, aber es ist schön zu sehen, wie ein Entwickler seinen Prozess aufschlüsselt.

Alle diese Grafiken bieten etwas Einzigartiges, aber sie haben auch eines gemeinsam: eine erstaunliche Verwendung von reinem CSS-Code.

Das könnte Ihnen auch gefallen: 10 Open-Source-JavaScript-Datendiagrammbibliotheken, die eine Überlegung wert sind.