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

0 Like 0 留言 195 瀏覽

鐵人賽 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 留言 937 瀏覽

鐵人賽 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 留言 793 瀏覽

鐵人賽 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

0 Like 0 留言 291 瀏覽

鐵人賽 Modern Web DAY 14

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 14 篇

技術 Day 14 - CSS Challenge #9：Rainy Night - Weather UI (上)

題目 CSS Challenge Day9 題目是一個看起來像是 Weather Widget 的介面，配上下雨的動畫，並且在初次 loading 時，月亮會有...

hitomiyang ‧ 2024-09-28

0 Like 1 留言 359 瀏覽

鐵人賽 Modern Web DAY 13

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 13 篇

技術 Day 13 - CSS Challenge #8：Metaballs use CSS filter for animation

題目 CSS Challenge Day8 上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodePen，也有附上給我們解題用的templ...

hitomiyang ‧ 2024-09-27

1 Like 0 留言 1159 瀏覽

鐵人賽 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 留言 667 瀏覽

鐵人賽 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 留言 571 瀏覽

鐵人賽 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 留言 352 瀏覽

鐵人賽 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 留言 222 瀏覽

鐵人賽 Modern Web DAY 12

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 12 篇

技術 Day 12 - CSS Challenge #7：Notification、Menu、Search(下)

題目 CSS Challenge Day7 Notification Card 題目除了基本 Notification Card介面樣式以外，還有兩個重要...

hitomiyang ‧ 2024-09-26

0 Like 0 留言 311 瀏覽

鐵人賽 Modern Web DAY 11

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 11 篇

技術 Day 11 - CSS Challenge #7：Notification、Menu、Search(中)

題目 CSS Challenge Day7 Notification Card 題目除了基本 Notification Card介面樣式以外，還有兩個重要...

hitomiyang ‧ 2024-09-25

0 Like 0 留言 264 瀏覽

鐵人賽 Modern Web DAY 10

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 10 篇

技術 Day 10 - CSS Challenge #7：Notification、Menu、Search(上)

題目 CSS Challenge Day7 Notification Card 題目除了基本 Notification Card 介面樣式以外，還有兩個重...

hitomiyang ‧ 2024-09-24

0 Like 0 留言 350 瀏覽

鐵人賽 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 留言 738 瀏覽

鐵人賽 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 留言 652 瀏覽

鐵人賽 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

0 Like 0 留言 284 瀏覽

鐵人賽 Modern Web DAY 9

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 9 篇

技術 Day 9 - CSS Challenge #6：Profile卡片介面(下)

題目 CSS Challenge Day6 上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodePen，也有附上給我們解題用的templ...

hitomiyang ‧ 2024-09-23

0 Like 0 留言 325 瀏覽

鐵人賽 Modern Web DAY 8

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 8 篇

技術 Day 8 - CSS Challenge #6：Profile卡片介面(上)

題目 CSS Challenge Day6 上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodePen，也有附上給我們解題用的templ...

hitomiyang ‧ 2024-09-22

1 Like 0 留言 233 瀏覽

鐵人賽 Modern Web DAY 7

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 7 篇

技術 Day 7 - CSS Challenge #5：Weekly Report 介面(下)

題目 CSS Challenge Day5 上面的圖是題目，而我們要做出幾乎一樣的樣子我做好的此題CSS Challeage解答前情提要上一集由於篇幅太長，...

hitomiyang ‧ 2024-09-21

0 Like 1 留言 212 瀏覽

鐵人賽 Modern Web DAY 6

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 6 篇

技術 Day 6 - CSS Challenge #5：Weekly Report 介面(上)

題目 CSS Challenge Day5 上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodePen，也有附上給我們解題用的templ...

hitomiyang ‧ 2024-09-20

1 Like 0 留言 450 瀏覽

鐵人賽 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 留言 244 瀏覽

鐵人賽 Modern Web DAY 21

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 21 篇

技術 Day 21 - CSS Challenge #12：翻譯插件模擬畫面(上)

題目 CSS Challenge Day12 上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodePen，也有附上給我們解題用的temp...

hitomiyang ‧ 2024-10-05

0 Like 1 留言 152 瀏覽

鐵人賽 Modern Web DAY 5

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 5 篇

技術 Day 5 - CSS Challenge #4：三層圓形的漸變動畫

題目 CSS Challenge Day4 上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodePen，也有附上給我們解題用的templ...

hitomiyang ‧ 2024-09-19

0 Like 0 留言 252 瀏覽

鐵人賽 Modern Web DAY 4

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 4 篇

技術 Day 4 - CSS Challenge #3：金字塔的日出日落

題目 CSS Challenge Day3 上面的圖是題目，題目本身是一個動態的由各種動畫組成的樣子，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的Cod...

hitomiyang ‧ 2024-09-18

0 Like 0 留言 578 瀏覽

鐵人賽 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 留言 352 瀏覽

鐵人賽 Modern Web DAY 3

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 3 篇

技術 Day 3 - CSS Challenge #2：MenuIcon動畫的實現與解題分析

題目 CSS Challenge Day2 上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodePen，也有附上給我們解題用的templ...

hitomiyang ‧ 2024-09-17

0 Like 0 留言 431 瀏覽

鐵人賽 Modern Web DAY 2

Dive into CSS Challenge：從問題到解決方案的實踐之旅系列第 2 篇

技術 Day 2 - CSS Challenge #1：數字 100 與文字佈局

題目 CSS Challenge Day1 上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodePen，也有附上給我們解題用的templ...

hitomiyang ‧ 2024-09-16

0 Like 0 留言 301 瀏覽

鐵人賽 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

0 Like 1 留言 1834 瀏覽

鐵人賽 Modern Web

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 35 篇

技術 #33 CSS 切換淺色/深色模式：Media Queries 的 prefers-color-scheme 搭配 CSS 變數

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

Eva Chen ‧ 2023-12-01

1 Like 0 留言 2236 瀏覽

鐵人賽 Modern Web

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 34 篇

技術 #32 CSS 顏色變數 currentcolor、checkbox/radio 顏色、input placeholder、閃動的光標顏色、文字反白的顏色，混色的 color-mix()

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

Eva Chen ‧ 2023-11-10

1 Like 1 留言 5671 瀏覽

鐵人賽 Modern Web DAY 30

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 31 篇

技術 #29 CSS 立體字、霓虹字、外框字、漸層字：text-shadow、-webkit-text-stroke、-webkit-background-clip

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

Eva Chen ‧ 2023-10-15

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

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

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

技術 Day 14 - CSS Challenge #9：Rainy Night - Weather UI (上)

技術 Day 13 - CSS Challenge #8：Metaballs use CSS filter for animation

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

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

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

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

技術 Day 12 - CSS Challenge #7：Notification、Menu、Search(下)

技術 Day 11 - CSS Challenge #7：Notification、Menu、Search(中)

技術 Day 10 - CSS Challenge #7：Notification、Menu、Search(上)

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

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

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

技術 Day 9 - CSS Challenge #6：Profile卡片介面(下)

技術 Day 8 - CSS Challenge #6：Profile卡片介面(上)

技術 Day 7 - CSS Challenge #5：Weekly Report 介面(下)

技術 Day 6 - CSS Challenge #5：Weekly Report 介面(上)

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

技術 Day 21 - CSS Challenge #12：翻譯插件模擬畫面(上)

技術 Day 5 - CSS Challenge #4：三層圓形的漸變動畫

技術 Day 4 - CSS Challenge #3：金字塔的日出日落

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

技術 Day 3 - CSS Challenge #2：MenuIcon動畫的實現與解題分析

技術 Day 2 - CSS Challenge #1：數字 100 與文字佈局

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

技術 #33 CSS 切換淺色/深色模式：Media Queries 的 prefers-color-scheme 搭配 CSS 變數

技術 #32 CSS 顏色變數 currentcolor、checkbox/radio 顏色、input placeholder、閃動的光標顏色、文字反白的顏色，混色的 color-mix()

技術 #29 CSS 立體字、霓虹字、外框字、漸層字：text-shadow、-webkit-text-stroke、-webkit-background-clip

標記使用者