繼上編 [網頁介紹]讓您快速的編寫CSS3 的網站 介紹了便利程式碼產生器,方便用於網頁程式碼的編寫,今日再介紹一個網站,也是相同的方式來寫程式,也可以使用這個網站來寫網頁!

 

推薦網頁:http://www.css3.me/

 

     

先來看看網站的首頁吧!

 

     

這個網站,較上次介紹的簡單,主要用於邊框的變化,依序分別為邊框的圓角(border-radius),邊框的陰影(box-shadow),邊框的背景的漸層變化(background gradient),最後是邊框的透明度(opacity)

首先,我們在上圖中的選項1(edit the basics),可出現以下畫面。

 

   

第1項為邊框粗細,第2項為邊框顏色,第3項項為背景顏色

 

     

再來,我們將邊框粗細調成5px,邊框顏色設定為紅色

 

     

將底色設定成灰色

 

     

在右側的Preview (預覽區),就可以直接看到你的剛剛設定的結果了!

 

再來開始設定第2項圓角的部份

 

     

我們將之設置成30px的圓角

 

   

 

就上出現圓角的產生了!

 

再來設置第3項陰影的部份

 

     

將之設定為17px!

 

     

陰影就出現了!

 

再來我們設置第4項的背景漸層功能

 

   

 

   

我們將之設定為黃色開始色,白色為結束色

 

       

就可以產品以上的效果!

 

最後,調整透明度,有時我們想有點透明度的效果,可以使內容加點層次或效果,,就可使用該功能

 

   

我們將透明100調成49,100為不透明,49為半透明,0就為全透明了

 

     

修改完後,就可以看到以上的結果了!

 

再就是如何將設定好的邊框效果套用在網頁上了!

 

    

點上面的 GET THE CODE! 的選項

 

     

就會跳出以上的對話框,此時就可以出現程式碼了,還可以選用各式瀏覽的的相容選項,一般而言,我都不會去取消,網頁是要給各式各樣的人看的,而瀏覽器就要有相容性,還是全選比較好,再來就將這些程式碼複制貼上到你的CSS標籤內,再預覽,就可以看到剛剛設定的效果了。

 

這個網頁,可以方便各位在編寫css 碼時,還要自己邊想邊試,他由預視的功能就可以先看到結果,這可結省不少時間,再者,為了符合各式瀏覽器的相容性,你又要相同的文字一直輸入,此網頁可直接輸出,更可減少輸出的錯誤。

 

     

在每個選項後面都有 + 的接鈕,是用於細部修改用的,各位有興趣式或有需要,也可以玩看看喔!

 

文章標籤
全站熱搜
創作者介紹
創作者 雲橙雨林 的頭像
雲橙雨林

雲橙雨林

雲橙雨林 發表在 痞客邦 留言(0) 人氣(238)