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