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

1 Like 0 留言 2075 瀏覽

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

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

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

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

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

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

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

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

1 Like 0 留言 1225 瀏覽

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0 Like 1 留言 3930 瀏覽

鐵人賽 Modern Web DAY 29

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

技術 #28 CSS 文字過長、行數過多顯示點點點、文字自動折行、強制換行：white-space、word-break、-webkit-line-clamp 的妙用

在網頁中，許多資料是動態產生的，也就是說我們沒有辦法控制內容的長短，版面可能被文字擠到破版，也可能會該換行的沒有換行。今天我們就要來學習各種 CSS 文字的...

Eva Chen ‧ 2023-10-14

2 Like 0 留言 4994 瀏覽

鐵人賽 Modern Web DAY 28

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

技術 #27 網頁載入字體、Icon Font 與 CSS font-family、font-weight

我們關於版面編排與 RWD 的部分終於告一個段落了，現在大觀念了解後，接下來我們要深入各個樣式的細節，例如文字、圖片、圖形、互動等等。首先，我們將從文字的部分...

Eva Chen ‧ 2023-10-13

2 Like 0 留言 3089 瀏覽

鐵人賽 Modern Web DAY 27

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

技術 #26 CSS Container Queries 容器查詢：讓 CSS 的計算以容器自身為依據

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

Eva Chen ‧ 2023-10-12

0 Like 0 留言 3366 瀏覽

鐵人賽 Modern Web DAY 26

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

技術 #25 CSS 列印的小技巧：@media print、break-before/after/inside、@page

網頁需要列印的情況，通常是一些表單頁面（收據、報告等）。上一篇我們講解了 CSS Media Queries，這篇我們要延伸來討論網頁列印時的情況。 ↓...

Eva Chen ‧ 2023-10-11

0 Like 0 留言 1031 瀏覽

鐵人賽 Modern Web DAY 25

不用庫也能酷 - 玩轉 CSS & Js 特效系列第 25 篇

技術 Day25 有料的 CSS 漢堡選單

我們今天要來做幾份漢堡選單。原理和 Day14 今天我想來點… 純 CSS 的開關一樣，都是用 input 的 checkbox 來儲存狀態好讓其他元素可...

毛哥EM ‧ 2023-10-09

技術 #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

技術 #28 CSS 文字過長、行數過多顯示點點點、文字自動折行、強制換行：white-space、word-break、-webkit-line-clamp 的妙用

技術 #27 網頁載入字體、Icon Font 與 CSS font-family、font-weight

技術 #26 CSS Container Queries 容器查詢：讓 CSS 的計算以容器自身為依據

技術 #25 CSS 列印的小技巧：@media print、break-before/after/inside、@page

技術 Day25 有料的 CSS 漢堡選單

標記使用者