天天看點

Web 開發中 20 個很有用的 CSS 庫 【已翻譯100%】

在過去的幾年中,css已經成為一大部分開發者和設計者的最愛,因為它提供了一系列功能和特性。每個月都有無數個圍繞css的工具被開發者釋出以簡化web開發。像css 庫,架構,應用這樣的工具能夠為開發者做很多事,而且可以使開發者創造出創新立異的web應用。

在這篇檔案章中我們找到了一系列對開發者有用的css庫,它們能幫助開發者在一定的期限内取得有創造性和創新性的成果。我們希望這個清單能有助于您的開發并為您提供友善。盡情享受吧!

kite

Web 開發中 20 個很有用的 CSS 庫 【已翻譯100%】

kite是一個靈活的布局助手css庫。kite使用<code>inline-block</code>而不是最新的css文法。它注重實際,易于了解且容易使用。kite用法與flexbox相似:justify-content,等等。你可以很輕松地建立複雜的子產品。kite是基于oocss 與 mindbemding,它可以幫助您快速建構自己的元件。kite支援幾乎所有浏覽器,它屬于mit許可。

dyncss

Web 開發中 20 個很有用的 CSS 庫 【已翻譯100%】

dyncss 将您的css解析成-dyn-(attribute)規則。這些規則是模拟浏覽器事件(如滾動和縮放)的javascript表達式。其結果會應用到上面指出的css屬性。你可以将任何css屬性設定為動态--前提是它對于jquery的css()方法是可寫的。你可以通過附加-dyn-字首并指定一個引用的javascript表達式來實作。

progressjs

Web 開發中 20 個很有用的 CSS 庫 【已翻譯100%】

progressjs 是一個 javascript 和css3庫,可以幫助開發者建立和管理頁面上所有元素的進度。你可以設計自己的進度條模闆并且可以輕松自定義它。你也可以用progressjs 來為使用者顯示内容加載(圖檔,視訊等)的進度。它可以用在textbox,textarea 甚至整個body上。

hover.css

Web 開發中 20 個很有用的 CSS 庫 【已翻譯100%】

hover.css 是一個有用的css3懸停效果集合,可用于動作調用,按鈕,商标,特性圖檔等。 自定或直接應用到你自己的元素上都非常的簡單。 hover.css可以用多種方式來使用; 可以複制粘貼你喜歡的效果到你自己的樣式表裡,也可以引用樣式表。然後隻需向你想要的元素需添加對應效果的class名稱即可。如果你隻打算使用一個或幾個效果,最佳實踐是複制粘貼一個效果。

spinkit

Web 開發中 20 個很有用的 CSS 庫 【已翻譯100%】

spin kit是一個酷炫的加載動畫css集合。 spinkit使用css動畫來建立吸引人的易于自定義的動畫。該集合目标不是提供所有浏覽器的解決方案--如果你需要支援哪些還沒實作css動畫屬性(像是ie9及之前的版本)的浏覽器,你需要檢測下這些動畫屬性并實作一個變通方案。

magic css3 animation

Web 開發中 20 個很有用的 CSS 庫 【已翻譯100%】

magic css3 animations 是一個特殊效果的css3動畫庫,你可以免費用于你的web項目。簡單的引用css樣式:magic.css或精簡版magic.min.css即可。

7.bounce.js

Web 開發中 20 個很有用的 CSS 庫 【已翻譯100%】

bounce.js是一個用來生成不錯的css3驅動關鍵幀動畫的工具。用于生成動态動畫的js庫是在該工具中投入使用。簡單地添加一個元件,選擇預設,然後你就會得到一個短url位址或者導出到css。

imacss

Web 開發中 20 個很有用的 CSS 庫 【已翻譯100%】

imacss是用來将圖像檔案轉換為資料位址的庫和應用。該位址可以用來插入到css檔案中作為背景圖檔。本質上來講,它能讓你減少所有你對你設計的圖檔(如圖示等)的http請求,并使之能夠單個調用。

9.buttons

Web 開發中 20 個很有用的 CSS 庫 【已翻譯100%】

buttons是一個可以建立高度自定義、靈活和現代感十足的web按鈕的css庫。該庫由sass+compass建構,支援正方形、圓角矩形或者圓形的按鈕,并且可選是否扁平以及其他自定義的效果(如發光)。所使用到的尺寸、顔色、效果和字型可以通過變量的幫助進行修改,并且可以非常容易的進行擴充。

10.odometer

Web 開發中 20 個很有用的 CSS 庫 【已翻譯100%】

odemeter是一個用來建立一些我們比較熟悉的如“汽車裡程顯示,機場資訊闆或角子機”等效果或者面闆的javascript-css庫。該庫是獨立式+輕量級(3kb)的,使用css為效果進行轉換,是以效率極高(當然也有回退設定)。它簡單地将一個給定的元素轉換到另一個具有單行函數的預定義的值。

single element css spinner

Web 開發中 20 個很有用的 CSS 庫 【已翻譯100%】

single element css spinners是一個css螺旋動畫加載的集合。每個旋轉包含一個使用‘loader’ class的div,其文本内容為‘loading…’。文本是為螢幕閱讀器使用的且可用作老浏覽器的後退的狀态。

ani.js

Web 開發中 20 個很有用的 CSS 庫 【已翻譯100%】

anijs是一個css動畫的聲明處理庫,它能夠使開發更便利且能提高開發速度。它文檔完善且易于上手。

beautons

Web 開發中 20 個很有用的 CSS 庫 【已翻譯100%】

beautons是一個用來建立漂亮、簡潔按鈕的易用庫。你可以應用各種樣式、函數已經其他的更多内容到按鍵上,包括改變它們的大小,設定它們的可用與否以及更多設定。

saffron

Web 開發中 20 個很有用的 CSS 庫 【已翻譯100%】

saffron是一系列sass混合器和助手集,能夠使添加css3的動畫和過渡非常簡單。隻需要包括一個mixin在sass聲明中,然後使用變量和混合參數設定一些配置。使用saffron,你能夠完全控制動畫和過渡的行為。

css shakes

Web 開發中 20 個很有用的 CSS 庫 【已翻譯100%】

這是一個能夠震動和晃動‘dom’的css類集合。

typebase.css

Web 開發中 20 個很有用的 CSS 庫 【已翻譯100%】

typebase.css是個最小化的、可定制的字型樣式表。它有less和sass版本,是以能夠很容易地修改融入現代的web項目。它提供了所有排版所必要的基礎工具且不需添加其他任何設計内容。它被建立用來完成項目發展和成長期時的修改,能和normalize.css很好的工作。

sassline

Web 開發中 20 個很有用的 CSS 庫 【已翻譯100%】

在web上使用sass &amp; rems設定文本到基線網格。sassline可以用在部落格、prototyping以及其他web項目。它有建議的基礎字型樣式和混合比例已達到基線網格的良好配合。為每個斷點選擇一個modular-scale,其運作響應将會更好。

typesettings

Web 開發中 20 個很有用的 CSS 庫 【已翻譯100%】

一個sass工具包,基于modular scale有ems風格,縱向風格,響應比基于headlines。

繼續閱讀