文章彙整

Clippy – 輕鬆利用 CSS 實踐多邊形設計

Astral WebBy Astral Web 4 years agoNo Comments
首頁  /  網站技術與設計  /  Clippy – 輕鬆利用 CSS 實踐多邊形設計

Clipper CSS 多邊形設計工具

介紹CSS3 中的 clip-path 屬性

前端開發最主要的工作之一即是實現設計師所設計的 UI 介面,而在現在的 UI 設計中隨處可見各種不規則的形狀元素,在以前,會使用各種技巧,例如:利用 CSS 中的 border 屬性加上偽元素模擬類似效果,甚至也有直接切圖實現。

而現在將介紹 CSS3 中的 clip-path 屬性, 就可以輕鬆使用幾行程式碼實踐各種不同的形狀。簡單來說  clip-path 原本就存於 SVG 裡,利用遮罩 ( 剪裁 ) 的方法,連接座標繪製遮罩區域,制作多邊形的裁切圖案。隨著瀏覽器對於 CSS3 的支援度大幅提升,自然而然的就能使用它來做些與眾不同的變化。

 

clippy 前端多邊形設計工具 01

 

在這裡提供一個網站感受一下利用 clip-path 所設計出厲害的 Polygon 動物系列!

http://species-in-pieces.com/

Clipper CSS 多邊形前端網頁設計工具

但若要使用 clip-path 制作多邊形圖案,需要計算坐標位置,如:
.element { clip-path: polygon(x1 y1, x2 y2, x3 y3, …); },從這個程式碼可以看出,計算坐標是相當麻煩的。

Clippy 這個網站則幫我們解決這些問題! Clippy 是專門用來生成各種形狀的繪製工具,並且直接產生 clip-path 的座標,可以直接在網站上任意拖拉修改,非常方便。

 

如何使用Clippy

使用方式很簡單, Clippy 右側已提供多種形狀供選擇,選擇類似的形狀後,拖拉節點(節點的顏色及對應座標位置的顏色)讓形狀更符合需求,等確定形狀後,再複製下方 clip-path 程式碼放入專案中的 .css 即可!

clippy css 多邊形前端設計工具

當然也可以完全客製化圖案,節點數由自己決定,只要選擇 “Custom Polygon” 即可開始製作。

以上為提供給大家方便製圖的小工具,讓實現多邊形不再是難事!看更多電商相關知識,別忘別忘訂閱歐斯瑞電子報,或追蹤我們的粉絲專頁,不錯過最新文章喔!

 

延伸閱讀:

快速查詢CSS/HTML與各瀏覽器的支援-Can I Use

強大的前端框架工具Bootstrap 3介紹

 000

歐斯瑞

歐斯瑞 - 一個對網路世界充滿熱情的團隊

歐斯瑞提供免費電商知識,並協助各大類型之企業 電商諮詢建置MagentoShopify 相關的電商專案。

立即聯繫我們

推薦文章

Category:
  網站技術與設計

留下回應

你的電子郵件地址不會被公開.