英文 | https://blog.devgenius.io/9-awesome-css-tools-that-you-should-use-in-2022-2155eed03c4c

翻譯 | 楊小愛

作為 Web 開發(fā)人員，編寫 CSS 代碼始終是您每天要做的主要任務(wù)之一。但是 CSS 是一種很棒的樣式表語言，它允許我們設(shè)計網(wǎng)頁樣式并使它們在所有用戶設(shè)備上都具有交互性。

想象一個沒有 CSS 代碼的網(wǎng)頁。我們可以用這種驚人的樣式表語言做很多事情。

然而，有時從頭開始編寫好的 CSS 代碼可能需要很多時間，尤其是在您處理大型項目時。但幸運的是，網(wǎng)絡(luò)上有很多免費的 CSS 工具。

這些工具對于節(jié)省一些時間并提高我們作為開發(fā)人員的編碼效率非常有幫助。

這就是為什么在本文中，我將向您列出一些您可以在 2022 年使用的有用 CSS 工具。讓我們開始吧。

1、Neumorphism

地址：https://neumorphism.io

Neumorphism 設(shè)計現(xiàn)在很流行，很多用戶喜歡它，因為它是一種最小類型的設(shè)計。

Neumorphism 是一個很棒的工具，它允許您為您的設(shè)計生成 UI CSS 代碼。這對于創(chuàng)建 Neumorphism 設(shè)計非常有用。您可以選擇顏色、編輯大小、半徑、距離等等。

試一試，你會喜歡的。

2、CSS 剪輯路徑制作工具

地址：https://bennettfeely.com/clippy/

該工具是基于 CSS 屬性 clip-path，它允許您創(chuàng)建復雜的形狀（多邊形、圓形、橢圓形等）。如果您不熟悉這個 CSS 屬性，那沒什么大不了的，因為剪輯路徑制作工具就在這里。

CSS 剪輯路徑制作工具讓您可以輕松創(chuàng)建精美的形狀，然后自動為您生成 CSS 代碼。

3、Animista

地址：https://animista.net/

Animista 是CSS動畫的中最佳的工具之一。它為您提供了一組可以在 CSS 中使用的預制動畫。您可以選擇您喜歡的任何類型的動畫并根據(jù)需要進行編輯。完成后，您可以為動畫生成 CSS 代碼并將其用于您的項目代碼。

4、PurgeCSS

地址：https://purgecss.com/

PurgeCSS 是另一個有用的工具，可以刪除 CSS 中未使用的代碼。這個工具非常有用，尤其是當你使用 CSS 框架時。因為大多數(shù)時候框架都帶有很多我們并不真正需要的代碼。

刪除未使用的代碼可以幫助您減小 CSS 文件的大小并因此提高性能。

5、平滑陰影

地址：https://shadows.brumm.af/

這是一個很棒的工具，可讓您使用 CSS 輕松創(chuàng)建涼爽且平滑的陰影。您只需定義一些陰影選項，它就會自動為您生成效果代碼。

如果您想在短時間內(nèi)創(chuàng)建陰影，請使用此工具。

6、CSS 漸變

地址：https://cssgradient.io/

CSS Gradient 是一個了不起的工具，您可以用它來創(chuàng)建漸變背景。您可以選擇不同類型的顏色和選項。因此，它會自動為您的漸變背景生成 CSS 代碼。這是一個非常有用的工具，我將它用于我的所有項目。

7、CSS Scan

地址：https://getcssscan.com/

CSS Scan 是一種高級工具，可讓您查看懸停在網(wǎng)頁上的任何元素的 CSS 代碼。它還允許您復制您正在查看的所有代碼。

8、CSS 網(wǎng)格生成器

地址：https://cssgrid-generator.netlify.app/

如今，CSS 網(wǎng)格是在網(wǎng)頁上創(chuàng)建響應(yīng)式網(wǎng)格布局的好方法。您可以使用許多 CSS 網(wǎng)格屬性和函數(shù)。

要了解更多 CSS 網(wǎng)格并讓自己更輕松，您可以使用 CSS Grid Gneror，這是一個很棒的工具，可以為您生成 CSS 網(wǎng)格代碼。您只需要設(shè)置列、行和單位。因此，如果需要，您可以獲得 CSS 甚至 HTML 代碼。

9、獲取波浪

地址：https://getwaves.io/

Get Waves 是另一個了不起的工具，它允許您使用 CSS 為您的項目創(chuàng)建 SVG 波形。它使它變得更容易，您只需選擇選項，然后該工具就會為您的 wave 設(shè)計生成正確的 CSS 代碼。

如果這是您想要的，您還可以下載您創(chuàng)建的 SVG 波形。

結(jié)論

正如您在上面的列表中看到的那樣。如果您想節(jié)省時間并提高 CSS 編碼效率，這些工具會非常有用。它們允許您在短時間內(nèi)創(chuàng)建很棒的東西，而無需為此編寫 CSS 代碼。

最后，感謝您閱讀這篇文章，如果您覺得有用，請記得分享給您身邊做開發(fā)的朋友，也許能夠幫助到他們。

9 個很棒的 CSS 工具，在2022 年你應(yīng)該學會使用它們

學習更多技能
請點擊下方公眾號

9 個很棒的 CSS 工具，在2022 年你應(yīng)該學會使用它們

學習更多技能請點擊下方公眾號

9 個很棒的 CSS 工具，在2022 年你應(yīng)該學會使用它們

學習更多技能
請點擊下方公眾號