建站
咨詢
售后
建站咨詢
新聞中心
本文轉(zhuǎn)載自公眾號(hào)“讀芯術(shù)”(ID：AI_Discovery)
作為web開(kāi)發(fā)人員，CSS工具是必須掌握的。但是如果沒(méi)有遵從正確的學(xué)習(xí)流程，你可能很難理解CSS的操作。這也是一些開(kāi)發(fā)者對(duì)其不甚明了的原因。
本文將通過(guò)兩種方式助你學(xué)習(xí)CSS：一是借助專用工具對(duì)CSS進(jìn)行編碼，二是通過(guò)一些交互環(huán)境學(xué)習(xí)CSS。
這些精選工具可一定要收藏好呀!
在線創(chuàng)造工具
1. EnjoyCSS
“EnjoyCSS是一款先進(jìn)的CSS3生成器，用戶使用不受常規(guī)編碼的影響?！?/p>
EnjoyCSS是一款極易操作的工具，也是筆者費(fèi)勁兒學(xué)習(xí)CSS時(shí)的救星。學(xué)習(xí)者可以使用簡(jiǎn)單的UI設(shè)計(jì)元素，并提供相關(guān)的CSS輸出。
EnjoyCSS極大地改變了筆者的工作流程。由于易于使用，在創(chuàng)建復(fù)雜的CSS樣式時(shí)，它能節(jié)省時(shí)間和精力。你無(wú)需太多的專業(yè)知識(shí)就可以完成一個(gè)復(fù)雜的CSS。
2. CSSmatic
這款一體化的工具 包括以下4個(gè)工具：
- 噪聲紋理工具: 創(chuàng)建帶有臟像素和噪點(diǎn)的細(xì)微背景圖案，更改顏色和值，實(shí)時(shí)預(yù)覽結(jié)果
- 漸變生成工具: 使用多種顏色和不透明光圈生成驚艷的漸變
- 邊框圓角工具: 超級(jí)好用又省時(shí)，同時(shí)更改所有選定的邊框，實(shí)現(xiàn)需要的圓角效果
- 盒陰影工具: 無(wú)論是模糊半徑變化、顏色變化還是陰影大小——在單個(gè)位置創(chuàng)建完美陰影效果所需的功能都應(yīng)有盡有
所有這些工具的UI都非常簡(jiǎn)單且直觀，CSSmatic是一款必用的工具。
3. CSS Arrow Please!
此工具可幫你創(chuàng)建并導(dǎo)出自定義框的代碼，并可隨意調(diào)整該自定義框的箭頭方向。
盡管從頭開(kāi)始編寫(xiě)代碼聽(tīng)起來(lái)很復(fù)雜，但它只需單擊幾下即可提供代碼。獲得代碼后，你就可以調(diào)試代碼并做些微調(diào)，例如添加陰影等。
圖源：pinterest
4. Patternizer和Patternify
通過(guò)這兩種工具，你可以在便于操作的界面中使用CSS創(chuàng)建出色的模式。借助這些工具，可以創(chuàng)建出炫酷的操作模式，并輕松用于CSS直接編寫(xiě)的網(wǎng)站上：
- Patternizer
- Patternify
在線學(xué)習(xí)工具
1. Flexplorer
這款簡(jiǎn)單的應(yīng)用程序允許學(xué)習(xí)者使用Flexbox的各種功能，并在屏幕上實(shí)時(shí)查看結(jié)果以及代碼。
學(xué)習(xí)者還可以編輯框中的文本，并查看框內(nèi)布局的響應(yīng)情況。這種有趣的學(xué)習(xí)方式讓學(xué)習(xí)變得輕松又容易。
2. CSS Grid
該網(wǎng)站允許訪問(wèn)者學(xué)習(xí)一門(mén)為時(shí)四個(gè)小時(shí)的微型課程，了解CSS Grid的基礎(chǔ)知識(shí)。課程完全免費(fèi)，創(chuàng)建者是著名的開(kāi)發(fā)人員——韋斯·博斯(Wes Bos)。這門(mén)簡(jiǎn)短的課程由25個(gè)視頻組成，教授CSS Grid的所有基本知識(shí)。
圖源：slideshare
3. Grid Garden
這款互動(dòng)游戲會(huì)敦促學(xué)習(xí)者編寫(xiě)CSS代碼來(lái)種植胡蘿卜園。這種有趣的學(xué)習(xí)方式可確保學(xué)習(xí)者了解CSS Grid的基礎(chǔ)知識(shí)。游戲共有28個(gè)段位，每個(gè)段位都需要編寫(xiě)CSS代碼段才能通關(guān)。
4.Image Effects with CSS
這款酷炫的工具是由Flexplorer的創(chuàng)建人班尼特·費(fèi)利(Bennett Feely)所創(chuàng)建的。它非常實(shí)用，可以讓學(xué)習(xí)者通過(guò)使用CSS的屬性(例如background-blend-mode, mix-blend-mode和filter)來(lái)創(chuàng)建令人驚嘆的圖像。該款工具使用混合和過(guò)濾功能來(lái)處理圖像。
以上介紹的CSS的工具對(duì)新手同樣友好~編碼愉快!
名稱欄目：Web程序員必備！這8種CSS工具快收藏好
文章網(wǎng)址：http://www.5511xx.com/article/cdoohjp.html
