最省力的 CSS3 原始碼產生器

css3 shadow Generator

最省力的 CSS3 原始碼產生器來了,這畫面只要是視覺設計師就絕對不陌生,還可以說是熟悉到不行,沒錯!這簡直就是Photoshop嘛!可是啥時Photoshop有出這樣的工具了?一直以來, CSS3 增加的各種語法總是讓許多視覺設計師感到暈頭,為什麼沒有一個方便快速的工具可以使用呢?於是熱心的網友就開發了這一個CSS3原始碼產生器,不僅介面採用視覺設計師最熟悉的Photoshop圖層樣式介面外,連設定方式都跟Photoshop雷同,風格相似度高達99%阿!

這一個CSS3產生器不僅可以把我們常用到的CSS3設定都做好,此外還貼心的讓你所見即所得呢!就跟著Amos馬上來看看他的介面有些什麼樣方便的功能吧!

 

CSS3 box-shadow陰影產生器

css3 shadow Generator

第一個畫面是CSS box-shadow下落式陰影產生器,你可以在這裡設定陰影顏色、陰影不透明度、陰影角度以及陰影偏移位置,唯一的缺點是無法產生多重陰影,這是美中不足的一點,但多重陰影的需求應該不是非常多的,所以Amos覺的這也不影響使用的便利性啦^^

 

CSS3 box-shadow內部陰影產生器

css3 shadow Generator

既然提到了CSS3 box-shadow的陰影,那麼當然不能少了內部陰影這項目,由於CSS3 陰影有分內部與外部的差異,讓你可以很方便的製作出像是外光暈或是內光暈的效果,而且兩種CSS 陰影可以同時存在,所以,作為一個CSS產生器當然沒有理由不能設定才對阿!這一個CSS box-shadow產生器連這一點都有幫你想到,著實加分不少!

 

CSS gradient漸層產生器

css3 background Generator

說到CSS3的功能當然不只是做作陰影這麼簡單,CSS3的 漸層是一個超棒的屬性了,有了CSS3 gradient漸層屬性之後,我們製作圖片的時間就可以大大的省下來摸魚喝咖啡做更多的工作了。

css3 Generator gradient edit

而且更棒的是你還可以把你編輯過的CSS3漸層色儲存起來,真的是侯塞雷阿!

 

CSS border邊框線產生器

css3 border Generator

邊框算是CSS中很基本的功能,在LayerStyles這個CSS產生器中,很貼心的把幾個比較常用到的邊框線類型都做出來了,你可以直接選擇你要的邊框類型再設定邊框粗細以及邊框色彩等項目,也是很方便的功能喔。

 

CSS3 圓角產生器

css3 Generator border-radius

總算到了CSS3的另外一個重點功能啦!以往視覺設計師想設計出圓角邊框時,都必須依靠Photoshop製作圓角圖片後,再想辦法將圖片套到網頁之中,如果想要套出彈性的圓角區塊,還可能要套上三四層的div呢!但是自從CSS3有了border-radius圓角屬性之後,一切都改觀啦~你只需要拖拉一下border-radius 圓角產生器就能快速做完啦,此外簡單易懂的操作介面讓你可以直接點擊下方的四個舉行就能輕鬆選擇你要設定的CSS border-radius 圓角是哪一個角落,是不是很方便呢?

但這個產生器的唯一缺點就是沒有把 CSS border-radius的細節做完,CSS border-radius可是可以設定到8個值的說,用這產生器就沒辦法做到了~這真的是美中不足的一點阿。

 

檢視/複製CSS3 原始碼

css3 Generator 檢視原始碼

當你設定完全部的CSS3項目之後,重點就是怎麼看到原始碼了,你可以點選視窗左下角的「CSS Code」文字。

 

css3 Generator 檢視原始碼

接著視窗的下方就會彈出一個原始碼的區塊囉,你可以在彈出的區塊左方看到有「copy」複製字樣,點下去就能直接把 CSS 原始碼都複製好了,接下來就把他貼到你的頁面中吧~是不是很簡單呢!

 

總結

基本上這一款產生器算是很方便的產生器了,不僅介面超直覺外,功能的設定也簡單易用,對於一般的工作需求應該是足夠的,但 Amos 本身不是很喜歡使用產生器,因為產生器用多了會變成笨的,因為你都沒在看原始碼,所以很多時候出了問題你都不會知道問題在哪。此外,對於產生器沒有提供的 CSS 設定項目,使用者也不會知道是否還有其他方便的功能,就像剛剛有提到的 border-radius 圓角最多可以設定到8個值,以及 box-shadow 區塊陰影可以設定多層次陰影一樣,更不用說 gradient 多層次漸層的設定了,Amos建議大家若是想要練功的話,還是乖乖老實的自己手寫CSS吧~手刻才是王道阿^^

 

LayerStyles相關資料

Amos貼心小警告!產生器使用過多,恐導致變笨危機!請審慎使用!