什麼！舊版 PS也能自動產生CSS3原始碼？

自從Photoshop cc問世以來，許多朋友對於Photoshop cc能直接產出CSS原始碼感到非常的訝異與便利，但是沒有升級到cc的朋友也不用難過，只要有CSS Hat你的Photoshop CS6也能直接產出CSS原始碼囉。

CSS Hat 本身支援Photoshop CS4(含)以上版本，並支援圖層樣式的設定轉換成CSS樣式，CSS Hat不僅包含了CSS3樣式，還支援Less、SASS、Stylus在內喔！除此之外，對於各家瀏覽器不得缺少的前綴字當然也都包含在內囉，真的有夠強大的啦～

CSS hat 支援的Photoshop 屬性

CSS Hat目前支援Photoshop的相關圖層屬性及樣式屬性有以下這些

嗯～看英文很累的話，中文翻譯就是下面這些啦。

• 線性漸層＆填滿圖層
• 圖層透明度及填滿項目
• 圖層樣式：
  • 陰影
  • 內陰影
  • 內光暈
  • 外光暈
  • 漸層覆蓋
  • 顏色覆蓋
  • 筆劃
• 文字圖層
  • 文字色彩
  • 文字陰影
• 寬與高
• 圓角

看起來支援度很完整對吧！不多說！馬上來玩看看吧！

CSS Hat 介面

CSS Hat下載下來之後，記得要先進行安裝，目前Amos只有用MAC版本，至於Windows版本的人請自行至官網下載喔。

安裝完之後打開Photoshop就會出現囉，接下來馬上來繪製一個形狀圖層看看，果然馬上就自動出現了CSS樣式碼，且可以看到圓角設定就跟我在Photoshop中設定的一樣，傑克這真是太神奇啦！

接著Amos為這個形狀圖層設定了一個漸層圖層樣式，果不其然的，CSS Hat也是馬上幫我產生出對應的原始碼，連前綴字都幫我加好了，真是太棒了！特別的是你還可以看到背景圖片採用了svg的寫法好讓IE9能支援，夠貼心的吧^^

還記得一開始Amos有說CSS Hat有支援Less、SCSS、SASS…這些工具的原始碼嗎？我們從介面上馬上就能看到這些項目，現在來一一切換看看吧～先來看看Less視窗的畫面，果然是乾淨無比啊！

接著SCSS跟SASS視窗呢？嗯～兩者寫法差不多，所以長得一樣～不意外。

接著是Stylus以及他產出的CSS碼，這也不用說，就只是寫法的差異而已。

複製CSS碼

看完整個介面之後，最後當然就是要把原始碼複製出來囉，你只要點選左下角的「Copy」鈕，CSS Hat就會幫你把原始碼複製到你的記憶體中囉，接著你只要到你的原始編輯器中貼到要放置的位置即可，如下圖：

總結

CSS Hat基本上應該是目前不想花錢升上Adobe CC，卻又想使用CC的圖層轉CSS原始碼功能的人最好的解決方案了，不僅軟體輕量（才13MB左右），還能向下相容到Photoshop CS4版本，雖然CSS Hat本身是一套收費軟體，但是軟體卻很便宜，才30美金不到，換算台幣也才900左右，其實還蠻划算的，這樣可以省下目前寫一堆CSS前綴字的時間，和樂而不用呢？^^

想玩看看的朋友可以到CSS Hat官方網站去看看喔

希望Amos的分享你還喜歡，若有任何錯誤，還請不吝指正，謝謝