本文轉載自公眾號“讀芯術”(ID：AI_Discovery)

作為web開發人員，CSS工具是必須掌握的。但是如果沒有遵從正確的學習流程，你可能很難理解CSS的操作。這也是一些開發者對其不甚明了的原因。

本文將通過兩種方式助你學習CSS：一是借助專用工具對CSS進行編碼，二是通過一些交互環境學習CSS。

這些精選工具可一定要收藏好呀!

[[322235]]

在線創造工具

1. EnjoyCSS

“EnjoyCSS是一款先進的CSS3生成器，用戶使用不受常規編碼的影響。”

EnjoyCSS是一款極易操作的工具，也是筆者費勁兒學習CSS時的救星。學習者可以使用簡單的UI設計元素，并提供相關的CSS輸出。

EnjoyCSS極大地改變了筆者的工作流程。由于易于使用，在創建復雜的CSS樣式時，它能節省時間和精力。你無需太多的專業知識就可以完成一個復雜的CSS。

2. CSSmatic

這款一體化的工具 包括以下4個工具：

• 噪聲紋理工具: 創建帶有臟像素和噪點的細微背景圖案，更改顏色和值，實時預覽結果
• 漸變生成工具: 使用多種顏色和不透明光圈生成驚艷的漸變
• 邊框圓角工具: 超級好用又省時，同時更改所有選定的邊框，實現需要的圓角效果
• 盒陰影工具: 無論是模糊半徑變化、顏色變化還是陰影大小——在單個位置創建完美陰影效果所需的功能都應有盡有

所有這些工具的UI都非常簡單且直觀，CSSmatic是一款必用的工具。

3. CSS Arrow Please!

此工具可幫你創建并導出自定義框的代碼，并可隨意調整該自定義框的箭頭方向。

盡管從頭開始編寫代碼聽起來很復雜，但它只需單擊幾下即可提供代碼。獲得代碼后，你就可以調試代碼并做些微調，例如添加陰影等。

圖源：pinterest

4. Patternizer和Patternify

通過這兩種工具，你可以在便于操作的界面中使用CSS創建出色的模式。借助這些工具，可以創建出炫酷的操作模式，并輕松用于CSS直接編寫的網站上：

• Patternizer
• Patternify

在線學習工具

1. Flexplorer

這款簡單的應用程序允許學習者使用Flexbox的各種功能，并在屏幕上實時查看結果以及代碼。

學習者還可以編輯框中的文本，并查看框內布局的響應情況。這種有趣的學習方式讓學習變得輕松又容易。

2. CSS Grid

該網站允許訪問者學習一門為時四個小時的微型課程，了解CSS Grid的基礎知識。課程完全免費，創建者是著名的開發人員——韋斯·博斯(Wes Bos)。這門簡短的課程由25個視頻組成，教授CSS Grid的所有基本知識。

[[322236]]

圖源：slideshare

3. Grid Garden

這款互動游戲會敦促學習者編寫CSS代碼來種植胡蘿卜園。這種有趣的學習方式可確保學習者了解CSS Grid的基礎知識。游戲共有28個段位，每個段位都需要編寫CSS代碼段才能通關。

4.Image Effects with CSS

這款酷炫的工具是由Flexplorer的創建人班尼特·費利(Bennett Feely)所創建的。它非常實用，可以讓學習者通過使用CSS的屬性(例如background-blend-mode, mix-blend-mode和filter)來創建令人驚嘆的圖像。該款工具使用混合和過濾功能來處理圖像。

以上介紹的CSS的工具對新手同樣友好~編碼愉快!