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

梅問題-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樣式產生器

相關文章

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。