10 frammenti CSS per la creazione di semplici grafici a barre

Cerchi un modo per creare semplici grafici a barre CSS sul web? Questa raccolta aiuterà sicuramente poiché è piena di grafici a barre open source gratuiti, tutti progettati in CSS.

La maggior parte di questi grafici offre un forte impatto con animazioni CSS extra ed effetti sfumati. Ma ne troverai alcuni che riproducono anche il posizionamento, le dimensioni, la forma e il design dei dati. La raccolta perfetta per qualsiasi sviluppatore frontend alla ricerca di un'interfaccia utente con grafico a barre elegante.

1. Grafici di dati

In questo set troverai alcuni grafici che sono ben progettati e molto ben eseguiti. Lo sviluppatore Kris Olszewski si è concentrato principalmente sull'UX per questi grafici a barre insieme alla parte superiore di ogni barra condividendo dati grezzi (numeri segnaposto in questo caso).

Naturalmente, il tutto gira su CSS, il che è sicuramente impressionante. È dotato di modelli per barre verticali e orizzontali e barre a più livelli in cui è possibile modificare il colore di sfondo in base a determinati valori.

Facilmente uno dei miei set preferiti là fuori perché offre così tanta varietà per gli sviluppatori da raccogliere e personalizzare.

2. Grafico a barre Pokemon

Non posso dire che questo design sarebbe particolarmente utile in un layout del mondo reale, ma è sicuramente impressionante.

Queste barre in stile Pokemon offrono un design grafico creativo per il web. Ogni barra si basa su una determinata combinazione di colori insieme a elementi vettoriali per gli occhi dei singoli Pokemon.

Ognuno presenta un effetto di animazione al passaggio del mouse, quindi puoi persino modificarlo per adattarlo alle transizioni che desideri. E se vuoi trasformare queste creature in altri animali, puoi seguire questo stesso modello con colori alterati.

3. Grafico animato

I grafici a barre vengono utilizzati per visualizzare dati visivi per un facile consumo. Ciò significa che devono essere inclusi sia gli elementi visivi che i dati grezzi.

Questa è una cosa che mi piace molto di questo grafico che utilizza etichette di percentuale nella parte superiore di ogni barra. Non presenta una legenda o etichette X/Y, ma non sarebbe difficile aggiungerle.

Penso che la parte più impressionante sia il modo in cui l'intera cosa scorre attraverso i CSS. Le animazioni e il testo percentuale vengono entrambi visualizzati a causa delle proprietà CSS. Roba da matti!

4. Grafico minimalista

Semplice e facile da usare descrive al meglio la mania minimalista che sta dilagando nel web. Il minimalismo è spesso la scelta migliore per siti Web reattivi o layout più semplici che non richiedono combinazioni di colori pesanti.

E con questo grafico a barre, puoi modificare lo stile dei dati per adattarli a qualsiasi colore di luce desideri.

Utilizza righe di sfondo arbitrarie per indicare le misurazioni e puoi persino aggiungere etichette sull'asse Y per chiarire i dati.

5. Barre di colore CSS pure

I gradienti CSS aggiungono molto al Web e questo grafico a barre è solo un altro esempio di gradienti in azione.

Ogni barra utilizza i classici gradienti web 2.0 che possono sembrare un po' vecchio stile ma hanno un aspetto fantastico. L'intero progetto funziona su codice Sass e utilizza variabili per impostare il ritardo dell'animazione, le dimensioni della barra e l'altezza totale del grafico.

Per modificare i colori, dovrai utilizzare Sass/SCSS o utilizzare CodePen per compilare in CSS non elaborati. Ma non è un grafico eccessivamente complesso, quindi questo non dovrebbe essere un problema.

6. Barre orizzontali sfalsate

Le animazioni lineari sono tra le mie preferite perché catturano rapidamente l'attenzione. In questa penna vedrai un esempio di animazione lineare con ciascuna barra che viene caricata nella vista una dopo l'altra.

È progettato orizzontalmente, quindi le barre vengono caricate sullo schermo e includono etichette all'interno della grafica a barre. In questo modo, la misurazione del "livello di abilità" totale segue l'asse X e lascia spazio per aggiungere più abilità verticalmente.

Uno dei grafici a barre più puliti che ho visto e può funzionare magnificamente su qualsiasi sito Web di portfolio basato sulle abilità.

7. Grafico a barre reattivo

Ogni sito Web moderno dovrebbe davvero essere reattivo per adattarsi a tutti i dispositivi. Ma alcuni elementi sono più difficili da rispondere rispetto ad altri.

Schede, tabelle di grandi dimensioni e grafici sono tutti esempi complessi. Questo grafico reattivo fa un ottimo lavoro gestendo schermi più piccoli. Non si riorganizza molto oltre la dimensione totale e lo spazio tra le barre.

Su schermi più piccoli, gli elementi della barra possono sembrare angusti e quasi impossibili da leggere. Ma per la maggior parte, questo stile reattivo è fantastico e il sostituto perfetto per i grafici statici.

8. Grafico CSS giornaliero

Agli sviluppatori piace mettere alla prova le proprie abilità con sfide come Daily CSS. Questo estrae ogni giorno le immagini dei progetti dell'interfaccia utente e chiede agli sviluppatori di ricrearle in HTML/CSS.

Troverai molti di questi su CodePen e questo grafico è un esempio incontaminato.

È progettato con semplicità ed effetti di animazione puliti allegati a ciascuna barra. Per non parlare del fatto che segue una combinazione di colori monocromatica che può adattarsi facilmente a qualsiasi sito web.

9. Grafico dell'inventario

Un altro fantastico esempio di Daily CSS è questo grafico dell'inventario dei vigneti creato utilizzando CSS e alcune abilità HTML furbe.

È un'idea piuttosto unica e ancora più impressionante che funziona esclusivamente tramite CSS. Sono molto colpito dal design effettivo del grafico e dal modo in cui viene visualizzato perfettamente nel browser.

Certo, anche questo non funzionerebbe sulla maggior parte dei siti Web, ma è una testimonianza di ciò che è possibile fare nei moderni CSS.

10. Abilità orizzontali solo CSS

Troverai molti grafici a barre per la misurazione delle abilità online, ma questo di Jed Trow è una vera delizia.

È progettato per essere completamente reattivo e funziona perfettamente su qualsiasi schermo. Puoi ridimensionare questo grafico a barre fino a 320px per smartphone e manterrà la sua coerenza.

Inoltre, questa penna include una piccola sezione tutorial sotto la demo in cui puoi vedere tutto il codice sorgente e come funziona. Naturalmente, puoi anche copiare/incollare dall'IDE di CodePen, ma è bello vedere uno sviluppatore che interrompe il proprio processo.

Tutti questi grafici offrono qualcosa di unico, ma condividono anche una cosa in comune: un uso straordinario del puro codice CSS.

Potrebbe piacerti anche: 10 librerie di grafici di dati JavaScript open source che vale la pena considerare.