iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 146 瀏覽

鐵人賽 Modern Web DAY 30

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 30 篇

技術 #64 CSS 捲動提示陰影：使用 CSS 漸層 radial-gradient 與 isolation 製作

今天我們要來製作一個捲動提示陰影效果：在捲動框的最頂端、最尾端沒有陰影，但是在捲動時有淡淡的陰影出現，提示使用者上面、下面還有內容。 DEMO: Scrol...

Eva Chen ‧ 2024-10-14

0 Like 0 留言 298 瀏覽

鐵人賽 Modern Web DAY 29

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 29 篇

技術 #63 CSS 自訂捲軸顏色與樣式：scrollbar-color、scrollbar-width、scrollbar-gutter、::-webkit-scrollbar-*

今天我們要客製化瀏覽器捲軸的樣式，捲軸通常會有「滑桿 thumb」、「軌道 track」與「按鈕」：不過實際上要依據作業系統而定，像是在 Mac 中的捲軸...

Eva Chen ‧ 2024-10-13

0 Like 0 留言 177 瀏覽

鐵人賽 Modern Web DAY 28

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 28 篇

技術 #62 使用 CSS overflow 自訂捲動範圍

當我們在進行網頁設計時，常常要處理當內容超出容器範圍時的情況，這就是使用到 overflow 屬性的時候了！overflow 最常用在自訂捲動範圍，尤其是系統後...

Eva Chen ‧ 2024-10-12

1 Like 0 留言 191 瀏覽

鐵人賽 Modern Web DAY 27

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 27 篇

技術 #61 利用 checkbox/ radio 與 CSS grid，做到純 CSS FAQ 開合選單（Collapse 折疊 / Accordion 手風琴效果）

前幾篇我們有提到 CSS transition 的特性：延伸閱讀：#51 CSS Transition 與一些小技巧：倒帶、影響相鄰的兄弟 transiti...

Eva Chen ‧ 2024-10-11

0 Like 0 留言 244 瀏覽

鐵人賽 Modern Web DAY 26

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 26 篇

技術 #60 利用 checkbox，做到純 CSS 開關網頁選單、收合側邊欄

上篇我們教了大家如何客製化 checkbox 與 radio 樣式，其實運用同樣的原理，我們也可以做到簡單的互相切換（toggle）行為，例如：「點了就開，再點...

Eva Chen ‧ 2024-10-10

0 Like 0 留言 193 瀏覽

鐵人賽 Modern Web DAY 25

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 25 篇

技術 #59 客製化 radio、checkbox 樣式，製作開關按鈕 (Switch Button)

在日常前端開發中，radio 和 checkbox 是非常常用的表單元素，但瀏覽器預設的樣式往往不符合設計需求。因此，學會如何客製化這些元素樣式是每個前端設計師...

Eva Chen ‧ 2024-10-09

0 Like 0 留言 122 瀏覽

鐵人賽 Modern Web DAY 24

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 24 篇

技術 #58 CSS offset-path：沿著軌跡行進動畫

這篇我們會介紹如何使用 CSS 的 offset-path 屬性來創建路徑動畫。這個屬性允許元素沿著指定的路徑跑，配合 offset-distance 可以控制...

Eva Chen ‧ 2024-10-08

0 Like 0 留言 228 瀏覽

鐵人賽 Modern Web DAY 23

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 23 篇

技術 #57 CSS @property：變數的再進化！輕易製作純 CSS 漸層動畫、圓餅圖動畫

CSS 除了變數外，還可以額外新增自訂屬性—— @property，現已全面支援了！ @property 規則是 API 的 CSS Houdini 系列的一部...

Eva Chen ‧ 2024-10-07

0 Like 0 留言 171 瀏覽

鐵人賽 Modern Web DAY 22

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 22 篇

技術 #56 純 CSS 跑馬燈動畫，單趟跑、無限跑、要暫停都可以

在很久以前 HTML 中有跑馬燈元素 <marquee>，很輕易就能做出跑馬燈，所以在以前許多網頁中，常常可以看到它的身影，寫著「歡迎光臨 OOO...

Eva Chen ‧ 2024-10-06

0 Like 0 留言 202 瀏覽

鐵人賽 Modern Web DAY 21

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 21 篇

技術 #55 純 CSS 照片淡入淡出輪播動畫

今天要來教大家如何使用 CSS Animation 製作簡單的純 CSS 照片淡入淡出輪播動畫。 DEMO: Pure CSS images slider...

Eva Chen ‧ 2024-10-05

0 Like 0 留言 242 瀏覽

鐵人賽 Modern Web DAY 20

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 20 篇

技術 #54 網頁渲染動畫的建議 & will-change 的使用時機

在現代網頁設計中，動畫是提升使用者體驗的一大關鍵。然而，過度或不恰當的動畫設計不但會影響效能，還可能帶來不理想的使用體驗。因此，在設計網頁動畫時，我們必須謹慎考...

Eva Chen ‧ 2024-10-04

0 Like 0 留言 209 瀏覽

鐵人賽 Modern Web DAY 19

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 19 篇

技術 #53 CSS Animation

在網頁設計中，CSS 動畫可以讓你的網站更具互動性和吸引力。過去，我們可能需要透過 JavaScript 才能實現動畫效果，但隨著 CSS3 的發展，現在只需...

Eva Chen ‧ 2024-10-03

0 Like 0 留言 150 瀏覽

鐵人賽 Modern Web DAY 18

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 18 篇

技術 #52 詳細了解 CSS 各種偽類：hover、focus、active、focus-within、focus-visible、target

CSS 偽類提供了一種方法，讓我們可以根據元素的不同狀態來變更其樣式。例如，當使用者將滑鼠移到元素上或點擊元素時，偽類會根據這些狀態套用特定的樣式（突然覺得這應...

Eva Chen ‧ 2024-10-02

0 Like 0 留言 138 瀏覽

鐵人賽 Modern Web DAY 17

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 17 篇

技術 #51 CSS Transition 與一些小技巧：倒帶、影響相鄰的兄弟

CSS 的 transition 是是兩個狀態之間的動畫過渡效果。但在實際應用中，常常會遇到一些容易忽略的細節與技巧。今天我們就來聊聊那些你可能還不知道的 tr...

Eva Chen ‧ 2024-10-01

0 Like 0 留言 124 瀏覽

鐵人賽 Modern Web DAY 16

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 16 篇

技術 #50 CSS 3D Transform

CSS 的 3D transform 讓我們可以在網頁上建立 3D 立體效果，讓元素看起來像是在一個 3D 空間中移動或旋轉。要使用 3D transform...

Eva Chen ‧ 2024-09-30

0 Like 0 留言 230 瀏覽

鐵人賽 Modern Web DAY 15

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 15 篇

技術 #49 CSS 2D Transform：變大、變小、旋轉、傾斜，CSS 絕對定位置中方法、平行四邊形

CSS 的 transform 屬性是一個功能強大的工具，它允許我們以簡單的方式對元素進行平移、縮放、旋轉和傾斜等 2D transform 效果，而不需要使用...

Eva Chen ‧ 2024-09-29

0 Like 0 留言 128 瀏覽

鐵人賽 Modern Web DAY 14

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 14 篇

技術 #48 CSS 噪點漸層 (Grainy Gradients) 的製作方法

所謂的噪點漸層 (Grainy Gradients)，在顏色漸變時不是使用平滑過渡色彩，而是使用顆粒由多至少漸變，這樣的方式能夠製造出磨砂的質感，例如 Arc...

Eva Chen ‧ 2024-09-28

0 Like 0 留言 259 瀏覽

鐵人賽 Modern Web DAY 13

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 13 篇

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解 C...

Eva Chen ‧ 2024-09-27

0 Like 0 留言 203 瀏覽

鐵人賽 Modern Web DAY 12

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 12 篇

技術 #46 CSS 濾鏡 filter/ backdrop-filter：模糊、透明圖陰影、調色與毛玻璃效果

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 學會 C...

Eva Chen ‧ 2024-09-26

1 Like 0 留言 349 瀏覽

鐵人賽 Modern Web DAY 11

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 11 篇

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 學會 C...

Eva Chen ‧ 2024-09-25

0 Like 0 留言 269 瀏覽

鐵人賽 Modern Web DAY 10

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 10 篇

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 學會 C...

Eva Chen ‧ 2024-09-24

0 Like 0 留言 258 瀏覽

鐵人賽 Modern Web DAY 9

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 9 篇

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 學會使用...

Eva Chen ‧ 2024-09-23

0 Like 0 留言 189 瀏覽

鐵人賽 Modern Web DAY 8

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 8 篇

技術 #42 用 CSS border 繪製三角形箭頭 (等腰/直角三角形)

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 學會用 b...

Eva Chen ‧ 2024-09-22

0 Like 0 留言 210 瀏覽

鐵人賽 Modern Web DAY 7

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 7 篇

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 學會 b...

Eva Chen ‧ 2024-09-21

0 Like 0 留言 296 瀏覽

鐵人賽 Modern Web DAY 6

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 6 篇

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 學習 C...

Eva Chen ‧ 2024-09-20

1 Like 0 留言 249 瀏覽

鐵人賽 Modern Web DAY 5

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 5 篇

技術 #39 CSS 幾何背景：條紋、格子、點點、棋盤格子背景 (CSS background)

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 學會繪製...

Eva Chen ‧ 2024-09-19

1 Like 0 留言 220 瀏覽

鐵人賽 Modern Web DAY 4

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 4 篇

技術 #38 CSS background 組合技：多重背景、背景位置、簡易視差滾動 (iOS 不支援)

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 學會 C...

Eva Chen ‧ 2024-09-18

0 Like 0 留言 338 瀏覽

鐵人賽 Modern Web DAY 3

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 3 篇

技術 #37 CSS 基本漸層：線性/放射/圓錐漸層 (CSS linear-gradient, radial-gradient, conic-gradient)

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 學會使用...

Eva Chen ‧ 2024-09-17

0 Like 0 留言 131 瀏覽

鐵人賽佛心分享-我的私藏工具箱 DAY 2

SUPER EASY CSS 前端切版百寶箱系列第 2 篇

技術 #01 前端支援度查詢：Can I Use / StatCounter / Can I email...

因為網頁的使用者可能使用各種裝置、各種瀏覽器瀏覽網頁，所以在開發前端時，要盡量讓網頁在所有情況下表現效果都一致。今天就分享很常見的查詢支援度的小工具，雖然應該...

Eva Chen ‧ 2024-09-16

0 Like 0 留言 190 瀏覽

鐵人賽 Modern Web DAY 1

Super Easy CSS，極度簡單 PART 2！寫出漂亮的 CSS 系列第 1 篇

技術 #00 文章目錄 / 參賽前言 | Super Easy CSS - Part 2

參賽前言去年的鐵人賽雖然成功完賽了（Super Easy CSS，極度簡單），但是整個系列卻沒有完整，原來要讓人學會 CSS，30 天是不夠的呀！因為沒有預...

Eva Chen ‧ 2024-09-15

技術 #64 CSS 捲動提示陰影：使用 CSS 漸層 radial-gradient 與 isolation 製作

技術 #63 CSS 自訂捲軸顏色與樣式：scrollbar-color、scrollbar-width、scrollbar-gutter、::-webkit-scrollbar-*

技術 #62 使用 CSS overflow 自訂捲動範圍

技術 #61 利用 checkbox/ radio 與 CSS grid，做到純 CSS FAQ 開合選單（Collapse 折疊 / Accordion 手風琴效果）

技術 #60 利用 checkbox，做到純 CSS 開關網頁選單、收合側邊欄

技術 #59 客製化 radio、checkbox 樣式，製作開關按鈕 (Switch Button)

技術 #58 CSS offset-path：沿著軌跡行進動畫

技術 #57 CSS @property：變數的再進化！輕易製作純 CSS 漸層動畫、圓餅圖動畫

技術 #56 純 CSS 跑馬燈動畫，單趟跑、無限跑、要暫停都可以

技術 #55 純 CSS 照片淡入淡出輪播動畫

技術 #54 網頁渲染動畫的建議 & will-change 的使用時機

技術 #53 CSS Animation

技術 #52 詳細了解 CSS 各種偽類：hover、focus、active、focus-within、focus-visible、target

技術 #51 CSS Transition 與一些小技巧：倒帶、影響相鄰的兄弟

技術 #50 CSS 3D Transform

技術 #49 CSS 2D Transform：變大、變小、旋轉、傾斜，CSS 絕對定位置中方法、平行四邊形

技術 #48 CSS 噪點漸層 (Grainy Gradients) 的製作方法

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

技術 #46 CSS 濾鏡 filter/ backdrop-filter：模糊、透明圖陰影、調色與毛玻璃效果

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

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

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

技術 #42 用 CSS border 繪製三角形箭頭 (等腰/直角三角形)

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

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

技術 #39 CSS 幾何背景：條紋、格子、點點、棋盤格子背景 (CSS background)

技術 #38 CSS background 組合技：多重背景、背景位置、簡易視差滾動 (iOS 不支援)

技術 #37 CSS 基本漸層：線性/放射/圓錐漸層 (CSS linear-gradient, radial-gradient, conic-gradient)

技術 #01 前端支援度查詢：Can I Use / StatCounter / Can I email...

技術 #00 文章目錄 / 參賽前言 | Super Easy CSS - Part 2

標記使用者