Eva Chen | 網頁設計師下班後

Tag

2Articles1Week

#2articles1week

More content

Read more stories on Hashnode

Articles with this tag

#47 一次搞懂 CSS 各種混合模式：mix-blend-mode/ background-blend-mode

Oct 3, 20242 min read

↓ 今日學習重點 ↓ 了解 CSS 各種混合模式 將混合模式應用在 mix-blend-mode 和 background-blend-mode 上 mix-blend-mode 和 background-blend-mode...

#47 一次搞懂 CSS 各種混合模式：mix-blend-mode/ background-blend-mode

#45 CSS 中的半透明遮罩 mask，實現各種模糊邊緣特效

Sep 26, 20242 min read

↓ 今日學習重點 ↓ 學會 CSS 遮罩 mask 的用法 了解 mask-mode 常用兩種模式下的差異 前幾篇寫到 CSS clip-path 時，可以剪裁任何 HTML 的元素，包含色塊、圖片、影片，但是他只限於精準的剪裁線條，萬一今天要有更複雜而且半透明的剪裁呢？ 例如，我今天想要...

#45 CSS 中的半透明遮罩 mask，實現各種模糊邊緣特效

#44 CSS 邊框 border 與各種花式邊框的小技巧：borde-image、outline、box-shadow

Sep 25, 20243 min read

↓ 今日學習重點 ↓ 學會 CSS 基本邊框 border 的用法 了解 border-image 的原理與用法 了解如何繪製多重邊框：outline / box-shadow 前幾篇我們使用CSS 邊框 border...

#44 CSS 邊框 border 與各種花式邊框的小技巧：borde-image、outline、box-shadow

#43 用 CSS clip-path 剪裁各種形狀的色塊/圖片/影片

Sep 23, 20242 min read

↓ 今日學習重點 ↓ 學會使用 CSS clip-path 繪製各種圖形 在 CSS 中除了使用 border 來繪製形狀，還有一個語法 clip-path 也可以繪製圖形，它可以將東西指定在某個形狀內，例如圓形、多邊形，甚至是使用 SVG 路徑等特殊形狀。 它的概念類似於 Photoshop...

#43 用 CSS clip-path 剪裁各種形狀的色塊/圖片/影片

#41 用 CSS border-radius 畫圓角與圓圓的形狀：圓、圓柱、橢圓、蛋型、鐘型、葉子 (眼睛)、花瓣 (水滴/心形)、牛角 (彎月)

Sep 21, 20242 min read

↓ 今日學習重點 ↓ 學會 border-radius 的基本用法 了解繪製出圓角的原理 在上篇文章中，我們用簡單的圓形加上模糊效果繪製了不規則的漸層，這篇我們來探討如何繪製各種形狀，其實使用 CSS 邊框 (border) 中的「邊框圓角 (border-radius)...

#41 用 CSS border-radius 畫圓角與圓圓的形狀：圓、圓柱、橢圓、蛋型、鐘型、葉子 (眼睛)、花瓣 (水滴/心形)、牛角 (彎月)

#40 使用 CSS filter blur 製作簡易的任意形狀漸層 (流動/暈染背景)

Sep 20, 20242 min read

↓ 今日學習重點 ↓ 學習 CSS filter blur() 特效 使用偽元素 ::before / ::after 製作裝飾元素 使用 box-shadow 製作裝飾元素 在平面設計中，還有一種很常見的漸層，既不是線性漸層，也不屬於圓形/圓錐漸層，是任意形狀漸層漸層，也有人稱之為流動...

#40 使用 CSS filter blur 製作簡易的任意形狀漸層 (流動/暈染背景)