打發時間photoshop cc,illustarter cc Support CSS3 測試

對於使用photoshop與illustrator(後面內容以PS與AI作表示)製作網頁設計最麻煩的地方，因該是做出的按鈕或版面樣式要轉換成CSS時產生一種卡卡的傾向，而我在上一篇文章中介紹CSS3Ps一個PS的外掛，而在最新版的PS CC與AI CC都加入了CSS3的樣式轉換功能，這對在製作網頁時大大改上在點陣與向量繪圖軟中排版網頁後，樣式可以轉換給HTML使用，雖然CSS的發展已久，在台灣的網頁設計上的使用上其實還是算少數，使用table框架與圖片切片的製作方式也是大有人在，話不多說!也差不多要進入主題了。

先來看看PS吧!先說明一下與上一篇所測試結果一樣的部分，點陣圖層上的製作效果無法轉為CSS，如圓角、漸層、顏色，轉為CSS時會以載入背景圖片檔案方式顯示CSS，如下表。

.圖層_1 {
  background-image: url("images/圖層 1.png");
  position: absolute;
  left: 172px;
  top: 460px;
  width: 132px;
  height: 50px;
  z-index: 5;
}

在上CSS所顯示這段background-image: url(“images/圖層 1.png”);可以說明一切。就算是在圖層上做混合選項效果一樣不會以CSS的方式呈現，會需要載入一張圖片檔。

而用矩形工具所做出來的圖層就不一樣了，如下圖與CSS。

.DAFATIME {
  font-size: 24px;
  font-family: "Microsoft JhengHei";
  color: rgb( 0, 0, 0 );
  font-weight: bold;
  position: absolute;
  left: 376.469px;
  top: 203.637px;
  z-index: 4;
}
.box {
  border-style: solid;
  border-width: 1px;
  border-color: rgb( 91, 148, 0 );
  border-radius: 10px;
  background-image: -moz-linear-gradient( 90deg, rgb(125,190,10) 0%, rgb(128,194,24) 51%, rgb(161,213,79) 51%, rgb(162,217,63) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(125,190,10) 0%, rgb(128,194,24) 51%, rgb(161,213,79) 51%, rgb(162,217,63) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(125,190,10) 0%, rgb(128,194,24) 51%, rgb(161,213,79) 51%, rgb(162,217,63) 100%);
  position: absolute;
  left: 360px;
  top: 195px;
  width: 127px;
  height: 44px;
  z-index: 3;
}

清楚的把邊框、高度、寬度、漸層、顏色、圓角的CSS3樣式碼都顯示出來，而就連字型的CSS也標示出來，如字型顏色、粗體、大小、字體。說到這PS要如何輸出CSS呢?其實很簡單，只要滑鼠在圖層上按下滑鼠右鍵跳出選單，按下拷貝CSS即可，在貼到CSS檔或HTML檔裡。

再來就換AI拉!必須先開啟CSS內容面板，才看得到CSS樣式，只要物件有做樣式就會在CSS內容面板顯示CSS，選取物件後CSS內容下面就顯示CSS樣式碼，如下圖。