有趣且實用的 CSS 框架、組件

前端的同學們對 CSS 肯定不會陌生,這部分內容控制著網頁的外觀樣式。本系列整理了一些有趣的 CSS 組件,這些組件能增強網頁的排版、讓網頁實現多種風格,甚至可以檢查頁面的 Bug 。

加載中

css.gg 開源 CSS、SVG 和 Figma UI 圖標

css.gg 是一個開源的 CSS、SVG 和 Figma UI 圖標庫,可用于 SVG Sprite、樣式組件、NPM 和 API。 css.gg 擁有 700 + 不同格式的、美觀而現代的圖標,使用 css.gg 可讓整個頁面處于一組統一而美觀的 UI 風格中。
更新于 2023/06/20 13:54

Bulma 基于 Flexbox 的現代 CSS 框架

Bulma 是一個基于 Flexbox 的現代 CSS 框架,對移動端及其友好的響應式排版、模塊化支持導入部分內容、且外觀非?,F代化。 Bulma 提供了現成的響應式前端組件,使用這些組件可以輕松創建一個 100% 響應式的頁面,它的 Magic tiles 組件能根據端口大小自適應排版,對審美不佳的排版小白來說尤為好用。
更新于 2023/01/06 23:20
Bulma 基于 Flexbox 的現代 CSS 框架

Pure.css 小型響應式 CSS 框架

Pure 是一個小型響應式 CSS 框架,它包含一組響應式 CSS 模塊,為原生 HTML 元素以及最常見的 UI 組件提供響應式布局和樣式。 Pure 基于 Normalize.css ,它支持 Firefox、Chrome、Safari、iOS 和 IE 10+ ,因此不存在瀏覽器兼容性問題。此外,Pure 包含各種常見的表格樣式且自帶表單對齊功能、包含垂直和水平菜單樣式和對下拉菜單的支持。 通過 Pure 可以使用?Grids、Menus 等組件快速構建網頁的基礎布局??—— PC/移動雙端、所有屏幕大小都適配的自適應布局。
更新于 2023/04/25 18:50

Charts.css 數據可視化 CSS 框架

Charts.css 是一個將 HTML 元素樣式轉化為可視化圖表的開源 CSS 框架,用簡單的 CSS 類即可將數據轉換為漂亮的圖表和圖形。 Charts.css 使用語義 HTML 標記進行結構化,并使用 CSS 類設置樣式,通過類名的更改可將表單等元素顯示為可視化圖形。它支持使用媒體查詢進行自適應縮放、支持多種圖表類型、無 JS 代碼帶來的額外性能開銷。
更新于 2022/12/16 18:01
Charts.css 數據可視化 CSS 框架

PSone.css PS1 風格 CSS 框架

Psone.css 是一個 PS1 游戲機風格的 CSS 框架,使用它可以實現復古 PS1 風格的網頁元素。它的靈感來自前面的 Nes.css ,使用方法也相差無幾。 Psone.css 的主頁(該頁面的樣式均來自 Psone.css): https://micah5.github.io/PSone.css/
更新于 2022/12/05 18:53

NES.css 紅白機像素風 CSS 框架

NES.css 是一款 NES 紅白機風格的 CSS 框架,可以使用它實現紅白機風格的按鈕,字體,對話框。NES.css 只含 CSS ,不依賴任何 JavaScript,對性能影響極小。另外,NES.css 只提供組件,頁面布局需要自己定義。 需要注意的是:NES.css 的默認字體 Press Start 2P 只支持英文字符,如果需要把這個框架與非英語的語言一起使用,則需要使用其他字體,比如配合中文需要使用 Zpix (最像素)字體。
更新于 2022/11/28 01:12
NES.css 紅白機像素風 CSS 框架

Animate.css 跨瀏覽器的 css3 動畫庫

Animate.css 是一個有趣的,跨瀏覽器的 css3 動畫庫,內置了很多典型的 css3 動畫,讓網頁變得更加靈動。 安裝 Animate.css 后,將 animate__animated 類與動畫名稱一起添加到元素,即可為元素附加對應的動畫。 Animate.css 還可以與 Javascript 結合使用,制作一些更有趣的循環動畫效果。
更新于 2022/11/17 15:01

bttn.css 精美 CSS 按鈕樣式

bttn.css 是一個 CSS 按鈕樣式庫,包含一系列精美的按鈕樣式。引入?bttn.css 文件后,在按鈕元素中添加對應 css 類即可為按鈕加入對應樣式。 bttn.css 的按鈕分四種尺寸:大、中、小、超小,同時有方形邊框、橢圓邊框、圓形邊框、單線框等多種邊框樣式,能適應多種使用場景。
更新于 2022/11/11 15:30

css-checker

css-checker 可用于檢查 css 樣式是否有重復,并在幾秒鐘內找到具有高度相似的 css classes 之間的差異,從而避免文件之間出現冗余或相似的 css 樣式。 css-checker 還支持顏色檢查、長腳本以及未使用的 CSS classes 的警告功能。 該工具同時適用于本地開發和 CI 等自動化流程。
更新于 2022/11/06 17:19

Pixel Art to CSS 基于 React 的像素繪畫應用

Pixel Art to CSS 是一個基于 React 的在線像素繪畫編輯器,你可以用這個編輯器繪制像素版的圖片或者 GIF 動圖,繪制完畢后可以一鍵獲取對應像素圖的 CSS 代碼,隨后可通過復制的 CSS 代碼將對應的像素圖嵌入到網頁中。
更新于 2022/10/30 22:22
Pixel Art to CSS 基于 React 的像素繪畫應用

赫蹏 中文排版樣式增強

赫蹏(hètí)是專為中文內容展示設計的排版樣式增強,只需在頁面的標簽中引入 heti.css 文件,在要作用的容器元素上增加 class="heti" 的類名即可使用。 赫蹏基于通行的中文排版規范而來,預置古文、詩詞樣式,提供移動端支持,且兼容 normalize.css、CSS Reset 等常見樣式重置;可以為網站的讀者帶來更好的文章閱讀體驗。
更新于 2022/10/20 18:14

沒有更多內容

加載失敗,請刷新頁面

沒有更多內容

返回頂部
頂部
一本久久综合亚洲鲁鲁五月天,无翼乌口工全彩无遮挡H全彩,英语老师解开裙子坐我腿中间