文/圖:菜鳥編  
 

       CSS3提供了許多實用的屬性,不僅可以繪圖,也可以製作動畫。相對以前的作業方式省時了許多。只是在繪製元素的操作似乎就不那麼親民。需要透過定位與宣告參數的方式來製作,有點像是AutoCAD的繪圖原理。

       這邊就推薦大家一個平台CSS clip-path maker,可以輕鬆的繪製出幾何圖形來,並將編碼直接套用。

      進到網頁,馬上就可以看到示意圖示,相信常要製作則遮色片的設計者一定很有感吧。


      在網頁右上角提供了許多內建的幾何圖示,可直接套用,效果也是立刻就呈現出來。如果沒有符合的,也可先選擇一個較為相似的,再自行調整喔。如下圖,鳥編先選擇一個六邊形。

 

       可以拖曳圖示上的圓點來做調整,在下方的編碼也會立即更新。

 

       當然,如果想要的樣式較為特別,也可點選「Custom Polygon」自行設計遮色片。如果剛好你公司LOGO是簡單的幾何圖示,也可自己製作出來。
 


 

   

      當樣式調整好後,點選編碼右方的圖示,來進行下一步作業。

 

       接著跳出來的視窗就是一個線上編輯器,可以看到所需要的CSS編碼都已經產出來了。


 

 

可以將編碼直接應用在你的網頁上,相當快速又方便。

 

官方網站:http://www.lccnet.com.tw
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w

 

延伸閱讀

聯成電腦菜鳥救星:網頁設計-社群分享按鈕簡單做

聯成電腦菜鳥救星:一個步驟將點陣圖轉換為向量圖

聯成電腦菜鳥救星:格式化無法刪除磁區的隨身碟

聯成電腦分享:素人變達人,讓你具備創業好能力 

arrow
arrow

    聯成電腦 發表在 痞客邦 留言(0) 人氣()