Paul Li

CSS > clip-path
CSS > clip-path

Introduction

clip-path 是我最喜愛的 CSS property 之一,透過它的渲染,可以讓元件的呈現不再呆板、乏味。它就如同 Adobe — Photoshop 的 alpha channel 一樣,為元件上了遮罩,可以隨意的捏成我們所喜愛的樣子。

敝司的每位 designer 都有自己的個性,恰巧最近合作的這個小女生酷愛菱格紋,非常喜愛用菱格紋來做裝飾。很貼心的切了張菱格紋 PNG 給 front-end engineers 使用。

在感激之餘,為了應對 designers 日後的善變,我還是毅然決然決定用 CSS 來完成,透過 CSS 的渲染,方能靈活的進行各種調適。善用 clip-path > polygon 便能在彈指之間完成菱格紋的呈現,範例影片中的符號更是透過 clip-path > path 來套用 SVG 中複雜路徑的圖形呈現,是不是有趣非常?!

有興趣的朋友,可以點擊 reference 裡的網址,或是感受一下 clip-path 的魅力、或是掀掀裙子看看怎麼撰寫。

CSS > clip-path

以上,提供給大家參考,希望有所助益~

Reference

--

--

CSS > clip-path
CSS Typed Object Model

Introduction

打從 2018 開始,Chrome 便展開了 CSS Houdini 的各種支援,其中一項便是 CSS Typed OM,讓 element / CSS rule 的設定與取值可以更加的人性化,由於單位與數值有效分離,自然更利於進行各種運算亦不用擔心不同瀏覽器取出來的差異化處理。

為了符合各種使用情境,所以 Chrome 針對 window.CSS 做了非常多的擴展,透過支援來避免一些人為上的錯誤發生,從對照圖看來,我們可以看到有各種有趣的 method︰CSS.px、CSS.vw、CSS.percent…etc。透過這些 method 的支援,developers 甚至可以應用在不同單位的換算上。使用上可以說是非常寬廣且多元~

然…三年過去了,Safari 依舊非常有個性的走自己所堅持的道路,也因為這樣,因此如果想要導入 CSS Typed OM 的朋友還是得審慎思量。

--

--

Paul Li

Paul Li

Paul is the lead programmer of the AMP project at Yahoo Taiwan and is always eager for modern web technologies. He is also focusing on UX for vivid user flow.