6 款能為獨(dú)立網(wǎng)頁(yè)開(kāi)發(fā)者提效的免費(fèi)工具

1. Type Scale^[1]

你是否經(jīng)常為了如何設(shè)定頁(yè)面元素的字體大小而倍感糾結(jié)？如果你有這種煩惱，這款軟件絕對(duì)能幫到你。

只需在網(wǎng)頁(yè)中輸入你的基準(zhǔn)字體大小，它就會(huì)展示出不同的元素（H1、H2、H3 等等）的字體尺寸。
此外，你還可以從谷歌字體庫(kù)中挑選不同的字體，并嘗試不同的字體大小。

這款工具最棒的點(diǎn)在于，在選擇你想要的效果后，它會(huì)自動(dòng)生成對(duì)應(yīng)的 CSS 樣式代碼，你可以直接把它拷貝到 CSS 文件中。同時(shí)，它還會(huì)自動(dòng)導(dǎo)入你所選擇的字體庫(kù)并為 html 設(shè)置好 font-family 屬性，這樣你就不用花時(shí)間在不同的文件中定義字體大小了！

2. Happy Hues^[2]

如果你不知道怎樣為你的網(wǎng)站進(jìn)行配色設(shè)計(jì)的話，這款工具會(huì)是你學(xué)習(xí)的起點(diǎn)。

它不僅展示了多種絢麗的配色方案，還為不同的配色設(shè)計(jì)了真實(shí)的范例，教你如何把不同的顏色運(yùn)用到你的項(xiàng)目設(shè)計(jì)中。

這款工具告訴大家應(yīng)該如何為不同的元素選擇對(duì)應(yīng)的顏色，同時(shí)還展示了如何為網(wǎng)頁(yè)插圖選擇配色方案，讓插圖和網(wǎng)頁(yè)整體的風(fēng)格更加匹配。

3. Fontjoy^[3]

這款工具可以快速生成對(duì)應(yīng)不同元素的一套字體，供你在網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用。你可以選擇你想要的對(duì)比度，單擊生成就可以得到想要的那套字體了。

4. CSS Peeper^[4]

CSS Peeper 是一款 Chrome 拓展程序，有著優(yōu)秀的用戶體驗(yàn)。它能幫助你快速檢查不同網(wǎng)頁(yè)的樣式信息，展示網(wǎng)站所使用的顏色和字體。此外，如果你對(duì)網(wǎng)站上的某一個(gè)特定元素感興趣，它能夠幫助你快速檢查出創(chuàng)建對(duì)應(yīng)元素所需的所有 CSS 樣式。

5. avataaars generator^[5]

這款工具可以幫助你生成有趣的擬人化頭像。有非常多不同的樣式和風(fēng)格可供你選擇，在完成設(shè)計(jì)后，你還可以快速地將頭像素材以多種格式導(dǎo)出。工具現(xiàn)在支持 PNG 與 SVG，還支持直接生成 React 代碼或者圖片鏈接。最重要的是，這款工具是完全免費(fèi)的！

6. brumm.af^[6]

通過(guò)使用這款工具，你可以創(chuàng)造出驚人的 box-shadow 陰影效果。你可以添加多個(gè)層級(jí)的陰影，并且對(duì)每個(gè)圖層進(jìn)行調(diào)整，從而創(chuàng)造出最自然、最擬真的陰影效果。

原文地址：https://dev.to/devggaurav/6-amazing-free-tools-that-will-save-you-some-time-when-u-are-building-websites-especially-for-non-designer-developers-2930

參考資料