個(gè)人認(rèn)為網(wǎng)上有很多漂亮的網(wǎng)站，而漂亮而又非常符合我的審美的，我認(rèn)為它們通常是目標(biāo)明確的專業(yè)網(wǎng)站，也就是說它們專注與做某領(lǐng)域某專業(yè)，不會(huì)像國內(nèi)一些企業(yè)一樣，什么都想做。今天要說的是對(duì)網(wǎng)頁設(shè)計(jì)師來說十分有幫助的三個(gè)網(wǎng)站。

首先我們會(huì)說說Colllor，然后我們會(huì)說說Warp CSS，最后聊聊Bear CSS的好處。

Colllor

簡而言之，它能根據(jù)你給出的色號(hào)給你列出一系列類似的顏色。有點(diǎn)像Color Scheme Designer 3。

使用這個(gè)app，你只需要選取一個(gè)你喜歡的顏色，然后點(diǎn)擊"Pick Color"按鈕就行了。你甚至可以填入該顏色的色相抑或它的名字。

然后它就會(huì)令人稍微有點(diǎn)震撼的呈現(xiàn)給你下面的這張圖了。你會(huì)得到四條水平的色欄，分別為：色調(diào)，色溫，混合和類似。你最初填入的顏色將在色欄中被區(qū)別開來。

會(huì)有超過50種顏色值會(huì)呈現(xiàn)給你，當(dāng)你鼠標(biāo)懸停在某個(gè)顏色上，它會(huì)有個(gè)贊贊的3D效果，你點(diǎn)擊之后該顏色的數(shù)值就自動(dòng)復(fù)制到了你的剪切板上了。

我雖然不是色盲，但是對(duì)于色彩理論我就是個(gè)白癡，但是這玩意兒很輕松的就把我給吸引了。它設(shè)計(jì)精美而且交互十分出色。風(fēng)格接近了Photoshop CS6有木有。

CSS Warp

CSS Warp超級(jí)變態(tài)的，為什么？因?yàn)樗尤豢梢詭湍愀鶕?jù)復(fù)雜的路徑生產(chǎn)路徑文字的css。使用它就像使用Illustrator一樣簡單。
我們來看看具體的操作。在Text欄填入你要呈現(xiàn)的文字內(nèi)容，要知道，生產(chǎn)的代碼將是一場繁復(fù)的。所以我建議你在輸入的時(shí)候不要寫太多，不要希望把一篇散文生成出來，你會(huì)崩潰的。寫完之后點(diǎn)擊"Warp It"。

下一步就是讓你來自定義你的曲線了，畢竟你的文字內(nèi)容是跟著你畫的線路走的。其選項(xiàng)也就像AI一樣，你懂的。

接著就像在AI一樣了，設(shè)計(jì)師們再熟悉不過了。

還可以選擇字體樣式

最后選擇獲得代碼"Generate HTML"

老實(shí)說，我從未見到過這么一款工具，把設(shè)計(jì)和coding的距離拉得這么近。在以往，都是要手工作圖的，現(xiàn)在居然可以如此簡單的就實(shí)現(xiàn)了代碼化，非常感謝這些創(chuàng)造力無限的開發(fā)商。
CSS和HTML實(shí)際上是很難能夠沿著路徑來展現(xiàn)文字的，在這里用到了很多很無可思議的內(nèi)容和技術(shù)，當(dāng)然包括HTML5和CSS3。所以能兼容它的只有Webkit內(nèi)核的Chrome/Safari和Opera、Firefox、IE9.

Bear CSS

這貨是干嘛的下面這張圖應(yīng)該是清晰呈現(xiàn)的了。

你只要上傳了你的HTML文檔，然后在點(diǎn)擊"下載CSS"按鈕，一個(gè)大概的CSS框架就已經(jīng)為你鋪好了！奶奶個(gè)熊，要不要這么省時(shí)省工啊！

這樣的話，寫CSS輕松了。。。。50%有木有！

幫助

原文地址：designshack
翻譯：http://ooo.ruxie.org/