10 個用於創建簡單條形圖的 CSS 片段

已發表: 2021-04-21

正在尋找一種在 Web 上創建簡單 CSS 條形圖的方法？這個集合肯定會有所幫助，因為它充滿了免費的開源條形圖，所有這些條形圖都是用 CSS 設計的。

這些圖表中的大多數都帶有額外的 CSS 動畫和漸變效果。但是你會發現一些甚至重新設計了數據的定位、大小、形狀和設計。任何尋求時尚條形圖 UI 的前端開發人員的完美集合。

1. 數據圖表

在這組中，您會發現一些設計精美且執行得非常好的圖表。開發人員 Kris Olszewski 主要關注這些條形圖的用戶體驗以及每個條形圖的頂部共享原始數據（在本例中為佔位符數字）。

自然，整個事情都在 CSS 上運行，這當然令人印象深刻。它具有垂直和水平條以及分層條的模板，您可以在其中根據某些值更改背景顏色。

很容易成為我最喜歡的套裝之一，因為它為開發人員提供了多種選擇和定制。

不能說這種設計在現實世界的佈局中特別有用，但它確實令人印象深刻。

這些口袋妖怪風格的條形圖為網絡提供了創造性的圖形設計。每個條形圖都依賴於特定的配色方案以及單個口袋妖怪眼睛的矢量元素。

每個都具有懸停動畫效果，因此您甚至可以重新設計它以適應您想要的任何過渡。如果你想把這些生物變成其他動物，你可以按照同樣的模板改變顏色。

條形圖用於顯示可視化數據，方便使用。這意味著應該包括視覺項目和原始數據。

這是我非常喜歡這張圖表的一件事，它在每個條形的頂部使用百分比標籤。它沒有圖例或任何 X/Y 標籤，但添加這些標籤並不難。

我認為最令人印象深刻的部分是整個事情是如何通過 CSS 運行的。由於 CSS 屬性，動畫和百分比文本都會出現。瘋狂的事情！

簡單易用最好地描述了席捲網絡的極簡主義熱潮。極簡主義通常是響應式網站或不需要重配色方案的簡單佈局的最佳選擇。

使用此條形圖，您可以重新設置數據的樣式以適合您想要的任何淺色。

它使用任意背景行來指示測量值，您甚至可以在 Y 軸上添加標籤以澄清數據。

CSS 漸變為 web 添加了很多內容，這個條形圖只是漸變的另一個例子。

每個條都使用經典的 web 2.0 漸變，感覺有點老派，但看起來很棒。整個設計基於 Sass 代碼，並使用變量來設置動畫延遲、條形大小和總圖形高度。

要編輯顏色，您需要使用 Sass/SCSS 或使用 CodePen 編譯成原始 CSS。但這不是一個過於復雜的圖表，所以這應該不會太麻煩。

線性動畫是我的最愛，因為它們能快速吸引註意力。在這支筆中，您將看到一個線性動畫示例，每個條形都一個接一個地加載到視圖中。

它是水平設計的，因此條形圖會在屏幕上加載，並在條形圖內包含標籤。這樣，總“技能水平”測量遵循 X 軸，並為垂直添加更多技能留出了空間。

我見過的更清晰的條形圖之一，它可以在任何基於技能的投資組合網站上出色地工作。

每個現代網站確實應該響應以適應所有設備。但有些元素比其他元素更難應對。

選項卡、大表和圖表都是複雜的示例。這個響應式圖表在處理較小的屏幕時表現出色。它不會重新排列超出條形之間的總大小和空間。

在較小的屏幕上，條形項目會讓人感到局促，幾乎無法閱讀。但在大多數情況下，這種響應式風格非常棒，是靜態圖的完美替代品。

開發人員喜歡通過 Daily CSS 等挑戰來測試他們的技能。這每天都會提取 UI 設計的圖像，並要求開發人員用 HTML/CSS 重新創建它們。

你會在 CodePen 上找到很多這樣的東西，這張圖就是一個原始的例子。

它的設計帶有簡單和乾淨的動畫效果附加到每個欄。更不用說它遵循可以輕鬆適應任何網站的單色配色方案。

另一個很酷的 Daily CSS 示例是使用 CSS 和一些巧妙的 HTML 技能創建的葡萄園庫存圖表。

這是一個非常獨特的想法，更令人印象深刻的是它完全通過 CSS 運行。圖形的實際設計以及它如何在瀏覽器中完美呈現給我留下了最深刻的印象。

當然，這在大多數網站上也不起作用，但它證明了現代 CSS 中的可能性。

你會在網上找到很多衡量技能的條形圖，但 Jed Trow 的這個是一種真正的享受。

它旨在充分響應，並且在任何屏幕上都能完美運行。對於智能手機，您可以將此條形圖的大小調整為 320 像素，並且仍將保持其一致性。

另外，這支筆在演示下方包含一個小型教程部分，您可以在其中查看所有源代碼及其工作原理。當然，您也可以從 CodePen 的 IDE 中復制/粘貼，但很高興看到開發人員分解他們的過程。

所有這些圖表都提供了一些獨特的東西，但它們也有一個共同點：對純 CSS 代碼的驚人使用。

您可能還喜歡： 10 個值得考慮的開源 JavaScript 數據圖表庫。