1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. CSS教學-仿Photoshop CC圖層樣式CSS3線上產生器

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

2013/06/28

梅問題-CSS3工具-仿Photoshop圖層樣式CSS3樣式產生器

  前幾天各位應該有發現到,新版的Photoshop CC,也可產生CSS3語法,同時只要利用Photoshop CC中的幾和工具,以及圖層樣式所繪製出來的圖形,就可將它轉成CSS3的語法,真的相當方便,但若沒有安裝Photoshop CC的朋友,那就只好自已純手工打造啦!


  最近梅干發現一個超棒的CSS3線上產生器,不但操控面板和Photoshop的圖層樣式極為相似外,同時還可輕易的產生像漸層、內光暈、邊框、圓角….等,因此相當適合網頁設計人員使用,同時可降低製作時間,提升工作效率,因此有這麼好的工具,怎能不好好的利用一下呢?


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

網站名稱:Layer Styles
網站網址:http://www.layerstyles.org/builder.html

一進到網站後,中間會有一個方塊,以及一個操控面板,跟Photoshop圖層樣式,有沒有像呀!無論UI還是操控都一樣。
梅問題-CSS3工具-仿Photoshop圖層樣式CSS3樣式產生器


反藍狀態,表示在該選項下,這時就可透過控制列,來設定CSS的樣式,由於是即見即所得,所以中間的區塊會即時顯示效果。
梅問題-CSS3工具-仿Photoshop圖層樣式CSS3樣式產生器


若要更改背景,點一下背景選項後,再點中間的漸層條。
梅問題-CSS3工具-仿Photoshop圖層樣式CSS3樣式產生器


是不是跟Photoshop一模模又一樣樣呢?除了可選擇上方內建的漸層樣式外,也可自行設定。
梅問題-CSS3工具-仿Photoshop圖層樣式CSS3樣式產生器


都設定好後,點一下畫面的左下角的CSS Code,下方就會秀出剛所設定的CSS3原始碼。
梅問題-CSS3工具-仿Photoshop圖層樣式CSS3樣式產生器


接著剛的CSS原始碼,貼到網頁的樣式中。
梅問題-CSS3工具-仿Photoshop圖層樣式CSS3樣式產生器


鏘~鏘~成果預覽,是不是快又方便呀!
梅問題-CSS3工具-仿Photoshop圖層樣式CSS3樣式產生器