<noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>

    <noframes id="jjr3b"><span id="jjr3b"><span id="jjr3b"></span></span>

    <noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>
    <form id="jjr3b"></form>

    <noframes id="jjr3b">
      Menu

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

      <返回列表

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

      這些圖表中的大多數都帶有額外的CSS動畫和漸變效果。但是,您會發現一些數據的定位、大小、形狀和設計都有不同的地方。完美的收藏任何前端開發人員尋找一個光滑的條形圖用戶界面。

      1.數據圖表

      在這一組,你會發現一些圖表是美麗的設計和非常好的執行。開發人員KrisOlszewski主要關注這些條形圖的UX,以及每個條形圖的頂部共享原始數據(在本例中為占位符編號)。

      當然,整個事情運行在CSS 3上,這無疑是令人印象深刻的。它具有垂直和水平條形圖的模板以及分層條形圖,您可以在其中根據特定的值更改背景色。

      我最喜歡的產品之一很容易就出現了,因為它為開發人員提供了很多不同的選擇和定制。

      2.口袋妖怪條圖

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

      這些口袋妖怪風格的酒吧為網絡提供了一個創造性的圖形設計。每個條依賴于一個特定的顏色方案和向量元素,為個人的眼睛口袋妖怪。

      每一個都有一個懸停動畫效果,所以你甚至可以重新樣式,以適應任何你想要的過渡。如果你想把這些生物變成其他動物,你可以用改變的顏色遵循同樣的模板。

      3.動畫圖

      條形圖用于顯示可視化數據,以便于使用。這意味著兩個可視項目應包括原始數據。

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

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

      4.極簡圖

      簡單易用最好地描述極簡主義狂熱打掃網絡。對于響應性強的網站或不需要大量色彩方案的簡單布局來說,極簡主義往往是最好的選擇。

      使用這個條形圖,你可以重新調整數據的樣式,以適應任何你想要的淺色。

      它使用任意背景行來指示度量,甚至可以在Y軸上添加標簽以澄清數據。

      5.純CSS色條

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

      每個酒吧都使用經典的Web2.0梯度感覺有點老了,但看上去很棒。整個設計工作在Sass代碼上,并使用變量設置動畫延遲、條形圖大小和總圖形高度。

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

      6.交錯水平桿

      線性動畫是我的最愛,因為它們能迅速吸引注意力。在這支筆中,你將看到一個線性動畫的例子,每個條形圖一個接一個地加載到視圖中。

      它是水平設計的,因此條形圖在屏幕上加載,并在條形圖中包含標簽。這樣,總“技能水平”測量遵循X軸,并留出空間,以增加更多的技能垂直。

      我所見過的更干凈的條形圖之一,它可以很好地工作在任何基于技能的圖表上。投資組合網站.

      7.響應條形圖

      每個現代網站都應該有反應來容納所有的設備。但有些因素比其他因素更難應對。

      制表符、大表和圖表都是復雜的例子。這個響應性圖表處理較小屏幕的工作非常出色。它不會重新排列超過總大小和空間之間的酒吧。

      在極小的屏幕上,條形物品可能會感到擁擠,幾乎無法閱讀。但在大多數情況下,這種反應的風格是奇妙的和完美的替代靜態圖形。

      8.每日CSS圖

      開發人員喜歡用像DailyCSS這樣的挑戰來測試他們的技能。它每天都會提取UI設計的圖像,并要求開發人員在HTML/CSS中重新創建它們。

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

      它的設計簡單和干凈的動畫效果附加在每個酒吧。更不用說它遵循的單色方案,可以很容易地適應任何網站。

      9.庫存圖

      另一個很酷的每日CSS例子是使用CSS和一些巧妙的HTML技巧創建的葡萄園庫存圖。

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

      當然,這也不適用于大多數網站,但這證明了在現代CSS中所能做到的事情。

      10.CSS-僅限于橫向技能

      你會在網上找到大量的技能測量條形圖,但是JedTrow的這張是一個真正的享受。

      它被設計成完全響應,它在任何屏幕上都是完美無瑕的工作。您可以將此條形圖調整到320 px用于智能手機,而且它仍將保持其一致性。

      此外,這支筆包括一個小的教程部分下面的演示,你可以看到所有的源代碼和它的工作方式。當然,您也可以從CodePen的IDE復制/粘貼,但是很高興看到開發人員分解了他們的過程。

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


      最新網站設計資訊
      企業網站建設

      企業網站建設優化一條龍,多年品牌網站設計,營銷網站開發,手機網站制作,響應式網站設計

      聯系我們

      電話:18868949445QQ:1611387063 郵箱:[email protected]

      聯系云軒總監微信

      微信
      网赚团队