CodePenclick for visit!顧名思意，code+pen, 即“代碼筆”，其寓意類(lèi)似中國古代故事“神筆馬良”中的那個(gè)“神筆”，不過(guò)，這里的“筆”是寫(xiě)代碼的“神筆”。貌似說(shuō)得有些玄乎了，說(shuō)穿了，CodePen就是用來(lái)制作測試頁(yè)面的網(wǎng)站。
我們可能熟悉或者至少見(jiàn)過(guò)類(lèi)似的網(wǎng)站項目，如jsfiddle. 例如下面這個(gè)很簡(jiǎn)單的例子，依然是千年不變的張小姐：
如果jsfiddle被墻掉了，無(wú)法查看效果的可以委曲求全查看下面的截圖：
不可否認，CodePen確實(shí)借鑒了jsFiddle的部分靈感，但是，CodePen本身的創(chuàng )新以及冒險可以讓這部分借鑒忽略不計。
CodePen與jsFiddle
jsFiddle基本上就是純碎的demo展示與分享，其強調實(shí)現，因此有更多可供選擇的JS框架（包括各個(gè)版本），如下截圖：
而CodePen只提供最新版本的jQuery, MooTools, Prototype框架，且默認不使用任何庫：
jsFiddle寫(xiě)代碼的效果要手動(dòng)點(diǎn)擊Run才能看到，CodePen所見(jiàn)即所得。
jsFiddle的賬戶(hù)系統（登錄注冊等）屬于自己，CodePen似乎需要的是GitHub賬號。
CodePen所做的另外的工作是優(yōu)秀前端demo的展示。我們進(jìn)入其首頁(yè)就可以看到很多精湛的前端demo效果，默認是編輯人工選擇置頂推薦的。我打開(kāi)首頁(yè)的這個(gè)時(shí)候，第一個(gè)demo是動(dòng)感轉圈圈的炫酷效果demo。
站點(diǎn)現有上百個(gè)精選效果，上千個(gè)各類(lèi)前端demo效果。您可以從中獲得很多前端交互的靈感，當然，其中的技術(shù)實(shí)現也可以一并學(xué)習！這就是我介紹CodePen項目最主要原因——you can get, not only share!
下面簡(jiǎn)單介紹如何使用CodePen這個(gè)平臺制作可分享的demo頁(yè)面。
首頁(yè)，左上角，還算比較明顯的，創(chuàng )建新Pen的按鈕，點(diǎn)擊之，即進(jìn)入創(chuàng )建頁(yè)面。
相比jsFiddle, CodePen的界面更簡(jiǎn)潔，目的更明確。上面依次HTML, CSS, JS三個(gè)模塊，下面白色區域為效果區，效果所見(jiàn)即所得。比方說(shuō)，我們鍵入一行圖片的HTML代碼（自動(dòng)高亮），然后，張小姐的圖片就顯示出來(lái)了，如下截圖縮略圖：
點(diǎn)擊右下角的keyboard按鈕可以查看快捷鍵：
中文整理如下：
彈框（指這個(gè)快捷鍵彈框）：
Ctrl+9 打開(kāi)
ESC 關(guān)閉
編輯指令：
Ctrl+1 擴展HTML面板（即水平100%顯示，而非默認的1/3顯示）
Ctrl+2 擴展CSS面板
Ctrl+3 擴展JS面板
Ctrl+4 啟用JS Hint檢查
ESC 上面所有撤銷(xiāo)
Pen指令：
Ctrl+S 保存
Ctrl+F 子進(jìn)程
Ctrl+U 更新
Ctrl+Y 詳情
Ctrl+P 新的Pen
分享指令：
Ctrl+G 保存為GitHub Gist
Ctrl+O 打開(kāi)全屏結果
以上快捷鍵可能會(huì )與瀏覽器的快捷鍵沖突。比如說(shuō)第一個(gè)Ctrl+9, 我按下后時(shí)打開(kāi)最后一個(gè)瀏覽器選項卡，而不是打開(kāi)快捷鍵彈框。
每個(gè)面板右上角的齒輪圖標對于本面板相關(guān)的一些設置，所應用的往往是當下比較流行的技術(shù)，項目等。如HTML面板，就是下圖所示：
其中：Haml是一種用來(lái)描述任何XHTML web document的標記語(yǔ)言，是一個(gè)xhtml的抽象描述，內部使用一些code來(lái)生成動(dòng)態(tài)內容。Haml 是一種簡(jiǎn)潔優(yōu)美的模板語(yǔ)言，可以應用于Ruby on Rails、 PHP等Web開(kāi)發(fā)平臺，可以大大縮減模板代碼，減少冗余，提高可讀性。
Markdown是一種輕量級的標記語(yǔ)言，由John Gruber和Aaron Swartz創(chuàng )建，使其成為可讀性最大并可再發(fā)行的可輸入輸出的格式。這種語(yǔ)言創(chuàng )建靈感來(lái)自于已經(jīng)存在的帶標記的電子郵件文本。Markdown允許 HTML語(yǔ)法, 所以使用者如果需要可以直接用 HTML來(lái)表示是可以的。
slim是為Ruby創(chuàng )建的快速的輕量級的模板引擎。
CSS面板如下：
LESS, SASS等久不多說(shuō)了，大家都比較熟悉。上圖還有數個(gè)單選多選項大家可以留意下。
Normalize實(shí)際之normalize.css, 不同于過(guò)時(shí)的CSS reset, 這里的一些設置更理性，例如，h1~6標簽的粗體保留，默認margin保留，所做的僅僅只瀏覽器兼容性統一。
Prefix free我之前好像提到過(guò)，顧名思意，寫(xiě)CSS3不需要私有前綴們了。
JS面板如下：
其中——
CoffeeScript有數年的歷史了，CoffeeScript將JavaScript硬綁的C/Java語(yǔ)法拋棄了；改為采用類(lèi)似Ruby/Python的語(yǔ)法。類(lèi)似下面書(shū)寫(xiě)：
Modernizr是一個(gè)檢測瀏覽器對HTML5和CSS3特性支持的JS庫。很早的時(shí)候就被莫名其妙墻掉了！
我們下面演示如何利用CodePen實(shí)現文字環(huán)繞效果。
首先HTML，沒(méi)什么好說(shuō)的：
<div class='zhanghanyun'> <img src='mm1.jpg' /> <p>無(wú)版權年輕時(shí)候</p></div>
JS部分，文字環(huán)繞這種激進(jìn)的排版效果，顯然需要借助一些小插件對文字進(jìn)行處理。lettering.js據說(shuō)是2010年10佳jQuery插件，輔助實(shí)現CSS文字排版，其代碼（非壓縮）也小于2K, 很小。其做的工作很簡(jiǎn)單，所有文字外面套一個(gè)序列化的標簽（類(lèi)名規律為char1, char2, char3, ……），方便CSS進(jìn)行控制。
因此，我們需要打開(kāi)JS的面板，選擇jQuery插件，同時(shí)調用lettering.js文件：
下面只要對CSS進(jìn)行處理就可以了，對于char1, char2, char3, ……具有循環(huán)性質(zhì)的類(lèi)名進(jìn)行樣式控制，SASS等優(yōu)勢的書(shū)寫(xiě)優(yōu)勢就似乎體現出來(lái)了。因此，我們打開(kāi)CSS面板，選擇SASS，如下圖所示：
CSS編輯框中，最最核心也是難點(diǎn)的代碼如下：
$i為邊框，#{}表示數值，+transform前面的加號+表前綴兼容。
于是，就有我們所要的效果了。您可以點(diǎn)擊這里查看。
或者，直接下面的效果：
關(guān)于圖片環(huán)繞實(shí)現以及原理，我這里的實(shí)現并不是很正統。您要是對相關(guān)效果有興趣，可以查看這篇文章：Set Text on a Circle, 其中有詳細的原理示意。
我這里效果實(shí)現某些靈感就參考自上文。
最后的最后，我們就可以或鏈接，或直接效果的形式進(jìn)行分享傳播了！
CodePen的意義在何處？
我想到了這么幾點(diǎn)：
1. 他人奇思妙想的效果，提供了交互靈感源泉
2. 他人精湛效果實(shí)現，為自己的學(xué)習提供參考
3. 支持流行技術(shù)，如SASS, 我們可以無(wú)需自建平臺，利用CodePen進(jìn)行快速學(xué)習
4. 想他人請教問(wèn)題，利用CodePen制作問(wèn)題demo，有助于問(wèn)題快速解決
5. 培養樂(lè )于分享，開(kāi)源等積極的傳播精神
6. 有助于整體前端技術(shù)的發(fā)展與進(jìn)步
等……
君若有需，當取自需；君若無(wú)需，亦知其需！
聯(lián)系客服
