本文轉(zhuǎn)載自公眾號“讀芯術(shù)”(ID：AI_Discovery)

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

本文將通過兩種方式助你學(xué)習(xí)CSS：一是借助專用工具對CSS進(jìn)行編碼，二是通過一些交互環(huán)境學(xué)習(xí)CSS。

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

[[322235]]

在線創(chuàng)造工具

1. EnjoyCSS

“EnjoyCSS是一款先進(jìn)的CSS3生成器，用戶使用不受常規(guī)編碼的影響。”

EnjoyCSS是一款極易操作的工具，也是筆者費(fèi)勁兒學(xué)習(xí)CSS時(shí)的救星。學(xué)習(xí)者可以使用簡單的UI設(shè)計(jì)元素，并提供相關(guān)的CSS輸出。

EnjoyCSS極大地改變了筆者的工作流程。由于易于使用，在創(chuàng)建復(fù)雜的CSS樣式時(shí)，它能節(jié)省時(shí)間和精力。你無需太多的專業(yè)知識就可以完成一個(gè)復(fù)雜的CSS。

2. CSSmatic

這款一體化的工具 包括以下4個(gè)工具：

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

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

3. CSS Arrow Please!

此工具可幫你創(chuàng)建并導(dǎo)出自定義框的代碼，并可隨意調(diào)整該自定義框的箭頭方向。

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

圖源：pinterest

4. Patternizer和Patternify

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

• Patternizer
• Patternify

在線學(xué)習(xí)工具

1. Flexplorer

這款簡單的應(yīng)用程序允許學(xué)習(xí)者使用Flexbox的各種功能，并在屏幕上實(shí)時(shí)查看結(jié)果以及代碼。

學(xué)習(xí)者還可以編輯框中的文本，并查看框內(nèi)布局的響應(yīng)情況。這種有趣的學(xué)習(xí)方式讓學(xué)習(xí)變得輕松又容易。

2. CSS Grid

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

[[322236]]

圖源：slideshare

3. Grid Garden

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

4.Image Effects with CSS

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

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