CSS教學－仿Photoshop CC圖層樣式CSS3線上產生器

　　前幾天各位應該有發現到，新版的Photoshop CC，也可產生CSS3語法，同時只要利用Photoshop CC中的幾和工具，以及圖層樣式所繪製出來的圖形，就可將它轉成CSS3的語法，真的相當方便，但若沒有安裝Photoshop CC的朋友，那就只好自已純手工打造啦！ 　　最近梅干發現一個超棒的CSS3線上產生器，不但操控面板和Photoshop的圖層樣式極為相似外，同時還可輕易的產生像漸層、內光暈、邊框、圓角....等，因此相當適合網頁設計人員使用，同時可降低製作時間，提升工作效率，因此有這麼好的工具，怎能不好好的利用一下呢?

---

CSS3圖角、漸層、光暈線上產生器：

---

一進到網站後，中間會有一個方塊，以及一個操控面板，跟Photoshop圖層樣式，有沒有像呀!無論UI還是操控都一樣。

---

反藍狀態，表示在該選項下，這時就可透過控制列，來設定CSS的樣式，由於是即見即所得，所以中間的區塊會即時顯示效果。

---

若要更改背景，點一下背景選項後，再點中間的漸層條。

---

是不是跟Photoshop一模模又一樣樣呢?除了可選擇上方內建的漸層樣式外，也可自行設定。

---

都設定好後，點一下畫面的左下角的CSS Code，下方就會秀出剛所設定的CSS3原始碼。

---

接著剛的CSS原始碼，貼到網頁的樣式中。

---

鏘~鏘~成果預覽，是不是快又方便呀!