使用Ps來做Web設計製作的人因該不少吧!先以Ps作圖排版再將做好的版面切圖給html使用,而有些特效可以用CSS來成現就不用切圖啦!雖然Ps在製作網頁排版上已經很方便,麻煩是在Ps上所做的一些特效要在Web上使用CSS來成現,必須不斷測試調整數值就有點麻煩,舉凡來說如陰影、漸層、圓角……等等,現在好用CSS3Ps擴充就可以解決麻煩的CSS碼,只要選取好已有加入圖層特效的圖層,再按下CSS3Ps工作面板,就會起動瀏覽器顯示選取圖層的CSS碼,只要複製貼上Web就有相同效果。

擴充檔可到CSS3Ps官網下載
由於這擴充工具已有人寫過介紹了使用方法就不在這詳細說明,這篇將以此擴充工具能轉換CSS條件為測試。
1.形狀圖層與點陣圖層樣式轉CSS

形狀圖層與文字圖層

css3ps01css3ps01a

形狀圖層與文字圖層的樣式可以使用CSS3完全在網頁上顯示。

點陣圖層與點陣文字圖層

css3ps02css3ps02a

點陣圖層與點陣文字圖層只有圖層樣式被CSS3在網頁上顯示,點陣圖層文字與圓角點陣圖層CSS3無法顯示。可見得點陣形狀無法使用這個擴充工具,只限曲線形狀、圖從樣式、文字圖層才可。

2.曲線形狀能做何種程度

用下面四種形狀圖層來做測試,測式如下:

css3ps03css3ps04css3ps05

CSS3Ps擴充工具功能還是有限,只有正常顯示出橢圓形而已,CSS3有支援旋轉、三角形、五角形、菱形…等等的Code,而CSS3Ps擴充工具卻無法顯示出來,可能是因為在PS上的形狀圖層在辨識定義上,對這類形狀沒有支援或是難以辨識,在輸出CSS3時會出現上面那種結果。上面測試僅供參考,CSS3Ps還是一個不錯用的工具,在製作按鈕或基本的CSS效果還是不錯用,就看使用者怎麼使用啦!
補充資訊:除了上述的PS擴充外也有另一擴充也更上述的功能一樣的功能,CSS Hat

最後修改日期: 2019 年 2 月 21 日

作者