PS特效轉(zhuǎn)換為 CSS3 代碼(CSS3PS)

HTML5、CSS3已經(jīng)越來越成熟，特別是在排版繪圖等方面有了很大的改進(jìn)雖然現(xiàn)在各家的瀏覽器引擎解析出來的還并不算專業(yè)，但是一些像內(nèi)陰影、內(nèi)發(fā)光、陰影、外發(fā)光、圖片圓角等效果都支持的非常不錯(cuò)。而寫程序的碼農(nóng)們則歡呼了，再也不需要用PS去處理圖片直接使用css進(jìn)行各種繪圖。

CSS3PS是一個(gè)免費(fèi)的基于云端的 Photoshop 插件，用來將 PhotoShop 的圖層轉(zhuǎn)成用 CSS3 實(shí)現(xiàn)的方式，外觀完全一致。

您可以選擇多個(gè)圖層和圖層組，一鍵轉(zhuǎn)換。行程轉(zhuǎn)換為CSS邊框?qū)傩�。�?nèi)陰影，內(nèi)發(fā)光，陰影，外發(fā)光轉(zhuǎn)換成CSS的box- shadow屬性。

CSS3PS怎么用？

CSS3Ps支持Photoshop CS3-cs6這四個(gè)版本，它的使用方法非常的簡單，在CS3與CS4中選中你要轉(zhuǎn)換的圖層，通過菜單“文件”>“腳本”>“瀏覽”選中下載好的CSS3Ps插件即可完成轉(zhuǎn)換，在CS5與CS6中使用CSS3Ps要首先在”Adobe 擴(kuò)展管理“里安裝插件，最后在Photoshop的“窗口“>”擴(kuò)展“中選中”CSS3Ps“，以下是通過CSS3Ps轉(zhuǎn)換出來的代碼效果圖。

安裝詳細(xì)教程：

針對(duì)Photoshop CS5和CS6版本的安裝過程（來至官方教程）：

1.如果Adobe Photoshop的運(yùn)行，將其關(guān)閉。

2.下載“CSS3Ps.zpx”文件。

3.在Adobe Extension Manager中點(diǎn)擊“Accept”按鈕。

4.當(dāng)安裝程序完成后，你會(huì)看到以下的畫面�，F(xiàn)在你可以運(yùn)行Adobe Photoshop。

5.在Adobe Photoshop中選中“窗口”- >“擴(kuò)展” - >“ CSS3Ps”菜單項(xiàng)。

6.恭喜！現(xiàn)在，您可以選擇您的層并轉(zhuǎn)換他們CSS了。

在Photoshop CS3和CS4中使用腳本

1.選擇你要轉(zhuǎn)換的層

2.選擇“文件” - >“腳本” - >“瀏覽...” 菜單項(xiàng)

3.選擇“CSS3Ps.jsx”文件

4.該腳本將運(yùn)行并打開一個(gè)瀏覽器窗口的轉(zhuǎn)換結(jié)果