10 Cuplikan CSS untuk Membuat Grafik Batang Sederhana

Mencari cara untuk membuat grafik batang CSS sederhana di web? Koleksi ini pasti akan membantu karena penuh dengan diagram batang sumber terbuka gratis yang semuanya dirancang dalam CSS.

Sebagian besar grafik ini memberikan pukulan yang kuat dengan animasi CSS ekstra dan efek gradien. Tetapi Anda akan menemukan beberapa yang bahkan mengubah posisi, ukuran, bentuk, dan desain data juga. Koleksi sempurna untuk setiap pengembang frontend yang mencari UI grafik batang yang ramping.

1. Bagan Data

Dalam set ini Anda akan menemukan beberapa grafik yang dirancang dengan indah dan dieksekusi dengan sangat baik. Pengembang Kris Olszewski sebagian besar berfokus pada UX untuk grafik batang ini bersama dengan bagian atas setiap batang yang membagikan data mentah (nomor placeholder dalam kasus ini).

Secara alami, semuanya berjalan pada CSS, yang tentu saja mengesankan. Ini fitur template untuk bar vertikal dan horizontal dan bar berjenjang di mana Anda dapat mengubah warna latar belakang berdasarkan nilai-nilai tertentu.

Mudah salah satu set favorit saya di luar sana karena menawarkan begitu banyak variasi bagi pengembang untuk mengambil dan menyesuaikan.

2. Grafik Batang Pokemon

Tidak dapat dikatakan bahwa desain ini akan sangat berguna dalam tata letak dunia nyata, tetapi itu benar-benar mengesankan.

Batang bergaya Pokemon ini menawarkan desain grafik kreatif untuk web. Setiap bilah bergantung pada skema warna tertentu bersama dengan elemen vektor untuk mata Pokemon individu.

Masing-masing menampilkan efek animasi melayang, sehingga Anda bahkan dapat menata ulang ini agar sesuai dengan transisi apa pun yang Anda inginkan. Dan jika Anda ingin mengubah makhluk ini menjadi hewan lain, Anda dapat mengikuti template yang sama ini dengan warna yang diubah.

3. Grafik Animasi

Grafik batang digunakan untuk menampilkan data visual agar mudah dikonsumsi. Ini berarti item visual dan data mentah harus disertakan.

Itu satu hal yang sangat saya sukai dari grafik ini menggunakan label persentase di sepanjang bagian atas setiap batang. Itu tidak menampilkan legenda atau label X/Y apa pun, tetapi ini tidak akan sulit untuk ditambahkan.

Saya pikir bagian yang paling mengesankan adalah bagaimana semuanya berjalan melalui CSS. Animasi dan teks persentase keduanya muncul karena properti CSS. Hal gila!

4. Grafik Minimalis

Sederhana dan mudah digunakan paling menggambarkan kegemaran minimalis yang melanda web. Minimalisme sering kali merupakan pilihan terbaik untuk situs web responsif atau tata letak sederhana yang tidak memerlukan skema warna yang berat.

Dan dengan diagram batang ini, Anda dapat menata ulang data agar sesuai dengan warna terang apa pun yang Anda inginkan.

Ini menggunakan baris latar belakang arbitrer untuk menunjukkan pengukuran, dan Anda bahkan dapat menambahkan label pada sumbu Y untuk memperjelas data.

5. Bar Warna CSS Murni

Gradien CSS menambahkan banyak hal ke web dan grafik batang ini hanyalah salah satu contoh gradien yang sedang beraksi.

Setiap bilah menggunakan gradien web 2.0 klasik yang bisa terasa agak kuno namun terlihat fantastis. Seluruh desain bekerja pada kode Sass dan menggunakan variabel untuk mengatur penundaan animasi, ukuran batang, dan tinggi grafik total.

Untuk mengedit warna, Anda harus bekerja melalui Sass/SCSS atau menggunakan CodePen untuk mengompilasi ke dalam CSS mentah. Tapi ini bukan grafik yang terlalu rumit, jadi ini seharusnya tidak terlalu merepotkan.

6. Batang Horisontal Terhuyung-huyung

Animasi linier adalah beberapa favorit saya karena mereka menarik perhatian dengan cepat. Dalam pena ini Anda akan melihat contoh animasi linier dengan setiap bilah dimuat ke tampilan satu demi satu.

Ini dirancang secara horizontal, sehingga bilah dimuat di layar dan menyertakan label di dalam grafik batang. Dengan cara ini, pengukuran "tingkat keterampilan" total mengikuti sumbu X dan menyisakan ruang untuk menambahkan lebih banyak keterampilan secara vertikal.

Salah satu grafik batang yang lebih bersih yang pernah saya lihat dan dapat bekerja dengan baik di situs web portofolio berbasis keterampilan apa pun.

7. Grafik Batang Responsif

Setiap situs web modern benar-benar harus responsif untuk mengakomodasi semua perangkat. Tetapi beberapa elemen lebih sulit untuk ditanggapi daripada yang lain.

Tab, tabel besar, dan grafik adalah contoh kompleks. Grafik responsif ini melakukan pekerjaan yang sangat baik dalam menangani layar yang lebih kecil. Itu tidak mengatur ulang jauh di luar ukuran total dan ruang di antara jeruji.

Pada layar yang lebih kecil, item bilah bisa terasa sempit dan hampir mustahil untuk dibaca. Tetapi sebagian besar, gaya responsif ini fantastis dan merupakan pengganti sempurna untuk grafik statis.

8. Grafik CSS Harian

Pengembang suka menguji keterampilan mereka dengan tantangan seperti CSS Harian. Ini menarik gambar desain UI setiap hari dan meminta pengembang untuk membuatnya kembali dalam HTML/CSS.

Anda akan menemukan banyak hal ini di CodePen, dan grafik ini adalah salah satu contohnya.

Ini dirancang dengan kesederhanaan dan efek animasi bersih yang melekat pada setiap bilah. Belum lagi ia mengikuti skema warna monokrom yang dapat dengan mudah beradaptasi dengan situs web mana pun.

9. Bagan Persediaan V

Contoh CSS Harian keren lainnya adalah bagan inventaris kebun anggur ini yang dibuat menggunakan CSS dan beberapa keterampilan HTML yang licik.

Ini adalah ide yang cukup unik dan bahkan lebih mengesankan karena hanya dijalankan melalui CSS. Saya sangat terkesan dengan desain grafik yang sebenarnya dan bagaimana grafik itu ditampilkan dengan sempurna di browser.

Memang, ini juga tidak akan berfungsi di sebagian besar situs web, tetapi ini adalah bukti dari apa yang mungkin dilakukan di CSS modern.

10. Keterampilan Horizontal Khusus CSS

Anda akan menemukan banyak grafik batang pengukur keterampilan online, tetapi yang ini oleh Jed Trow benar-benar menyenangkan.

Ini dirancang untuk sepenuhnya responsif, dan berfungsi dengan sempurna di layar apa pun. Anda dapat mengubah ukuran grafik batang ini menjadi 320px untuk ponsel cerdas, dan tetap mempertahankan konsistensinya.

Plus, pena ini menyertakan bagian tutorial kecil di bawah demo tempat Anda dapat melihat semua kode sumber dan cara kerjanya. Tentu saja, Anda juga dapat menyalin/menempel dari IDE CodePen, tetapi senang melihat pengembang memecah proses mereka.

Semua grafik ini menawarkan sesuatu yang unik tetapi juga memiliki satu kesamaan: penggunaan kode CSS murni yang luar biasa.

Anda mungkin juga menyukai: 10 Pustaka Bagan Data JavaScript Sumber Terbuka yang Layak Dipertimbangkan.