10 fragmente CSS pentru crearea de grafice cu bare simple

Căutați o modalitate de a crea grafice cu bare CSS simple pe web? Această colecție vă va ajuta cu siguranță, deoarece este plină de diagrame cu bare gratuite, open source, toate concepute în CSS.

Cele mai multe dintre aceste grafice au un impact puternic, cu animații CSS suplimentare și efecte de gradient. Dar veți găsi câteva care chiar modifică poziționarea, dimensiunea, forma și designul datelor. Colecția perfectă pentru orice dezvoltator de front-end care caută o interfață de utilizare elegantă cu grafic cu bare.

1. Diagrame de date

În acest set veți găsi câteva diagrame care sunt frumos proiectate și foarte bine executate. Dezvoltatorul Kris Olszewski s-a concentrat mai ales pe UX pentru aceste grafice cu bare, împreună cu partea de sus a fiecărei bare care partajează date brute (numerele substituenților în acest caz).

Desigur, totul rulează pe CSS, ceea ce este cu siguranță impresionant. Dispune de șabloane pentru bare verticale și orizontale și bare pe niveluri, unde puteți schimba culoarea de fundal în funcție de anumite valori.

Cu ușurință, unul dintre seturile mele preferate, deoarece oferă atât de multă varietate pentru ca dezvoltatorii să le preia și să le personalizeze.

2. Pokemon Bar Graph

Nu pot spune că acest design ar fi deosebit de util într-un aspect din lumea reală, dar cu siguranță este impresionant.

Aceste bare în stil Pokemon oferă un design grafic creativ pentru web. Fiecare bară se bazează pe o anumită schemă de culori împreună cu elemente vectoriale pentru ochii Pokemonului individual.

Fiecare dintre ele are un efect de animație de tip hover, așa că poți chiar să-l remodezi pentru a se potrivi cu orice tranziții doriți. Și dacă doriți să schimbați aceste creaturi în alte animale, puteți urma același șablon cu culori modificate.

3. Grafic animat

Graficele cu bare sunt folosite pentru a afișa date vizuale pentru un consum ușor. Aceasta înseamnă că trebuie incluse atât elementele vizuale, cât și datele brute.

Acesta este un lucru care îmi place foarte mult la acest grafic folosind etichete procentuale în partea de sus a fiecărei bare. Nu conține o legendă sau etichete X/Y, dar acestea nu ar fi greu de adăugat.

Cred că partea cea mai impresionantă este modul în care totul trece prin CSS. Ambele animații și textul procentual apar din cauza proprietăților CSS. Chestii traznite!

4. Diagramă minimalistă

Simplu și ușor de utilizat descrie cel mai bine nebunia minimalistă care mătura web-ul. Minimalismul este adesea cea mai bună alegere pentru site-uri web responsive sau layout-uri mai simple care nu necesită scheme de culori grele.

Și cu această diagramă cu bare, puteți modifica datele pentru a se potrivi cu orice culoare deschisă doriți.

Folosește rânduri de fundal arbitrare pentru a indica măsurători și puteți chiar adăuga etichete pe axa Y pentru a clarifica datele.

5. Bare de culoare CSS pure

Gradienții CSS adaugă mult pe web, iar acest grafic cu bare este doar un alt exemplu de gradienți în acțiune.

Fiecare bară folosește gradienți web 2.0 clasici, care se pot simți puțin vechi, dar arată fantastic. Întregul design funcționează pe codul Sass și folosește variabile pentru a seta întârzierea animației, dimensiunile barelor și înălțimea totală a graficului.

Pentru a edita culorile, va trebui să lucrați prin Sass/SCSS sau să utilizați CodePen pentru a compila în CSS brut. Dar nu este un grafic prea complex, așa că nu ar trebui să fie prea multe probleme.

6. Bare orizontale eșalonate

Animațiile liniare sunt unele dintre preferatele mele, deoarece captează rapid atenția. În acest stilou, veți vedea un exemplu de animație liniară cu fiecare bară care se încarcă în vizualizare una după alta.

Este proiectat orizontal, astfel încât barele se încarcă pe ecran și includ etichete în interiorul graficului cu bare. În acest fel, măsurarea totală a „nivelului de calificare” urmează axa X și lasă loc pentru a adăuga mai multe abilități pe verticală.

Unul dintre graficele cu bare mai curate pe care le-am văzut și poate funcționa splendid pe orice site web de portofoliu bazat pe abilități.

7. Grafic cu bare receptiv

Fiecare site web modern ar trebui într-adevăr să fie receptiv pentru a găzdui toate dispozitivele. Dar unele elemente sunt mai greu de răspuns decât altele.

Filele, tabelele mari și graficele sunt toate exemple complexe. Acest grafic receptiv face o treabă excelentă în manipularea ecranelor mai mici. Nu rearanjează mult dincolo de dimensiunea totală și spațiul dintre bare.

Pe ecranele mai mici, articolele din bar se pot simți înghesuite și aproape imposibil de citit. Dar, în cea mai mare parte, acest stil receptiv este fantastic și înlocuitorul perfect pentru graficele statice.

8. Graficul CSS zilnic

Dezvoltatorilor le place să-și testeze abilitățile cu provocări precum Daily CSS. Acest lucru atrage imagini ale design-urilor UI în fiecare zi și le cere dezvoltatorilor să le recreeze în HTML/CSS.

Veți găsi multe dintre acestea pe CodePen, iar acest grafic este un exemplu impecabil.

Este proiectat cu simplitate și efecte de animație curate atașate fiecărei bare. Ca să nu mai vorbim că urmează o schemă de culori monocromă care se poate adapta cu ușurință oricărui site web.

9. Diagrama de inventar

Un alt exemplu cool Daily CSS este această diagramă de inventar al podgoriilor creată folosind CSS și niște abilități de HTML viclene.

Este o idee destul de unică și chiar mai impresionantă că rulează exclusiv prin CSS. Cel mai mult sunt impresionat de designul real al graficului și de modul în care acesta se redă perfect în browser.

Desigur, acest lucru nu ar funcționa nici pe majoritatea site-urilor web, dar este o dovadă a ceea ce este posibil în CSS modern.

10. Abilități orizontale numai pentru CSS

Veți găsi online o mulțime de grafice cu bare pentru măsurarea aptitudinilor, dar acesta de la Jed Trow este un adevărat răsfăț.

Este conceput pentru a răspunde pe deplin și funcționează impecabil pe orice ecran. Puteți redimensiona acest grafic cu bare până la 320 px pentru smartphone-uri și își va păstra în continuare consistența.

În plus, acest stilou include o mică secțiune de tutorial sub demo, unde puteți vedea tot codul sursă și cum funcționează. Desigur, puteți, de asemenea, să copiați/lipiți din IDE-ul CodePen, dar este plăcut să vedeți un dezvoltator care își descompune procesul.

Toate aceste grafice oferă ceva unic, dar au și un lucru în comun: o utilizare uimitoare a codului CSS pur.

S-ar putea să vă placă și: 10 biblioteci de diagrame de date JavaScript open-source care merită luate în considerare.