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

1 Like 0 留言 559 瀏覽

鐵人賽 Modern Web DAY 7

關於那些有趣的 CSS 效果系列第 7 篇

技術 ( Day 7 ) 純 CSS 漸層色製作圖案背景

某天看著圍牆上重複且整齊劃一的幾何圖案，突然靈光乍現，這些圖案能不能運用 CSS 來完成呢？多番思量想家鄉，腦中靈光忽閃亮，漸層色彩鋪成景，花樣背景美非常。 (...

oxxo ‧ 2025-08-07

3 Like 1 留言 541 瀏覽

鐵人賽佛心分享-跟著我的影片學 IT DAY 6

A CSS Video a Day, Keeps Web Confusion Away!! 系列第 6 篇

技術 ( Day 6 ) CSS 選擇器的優先順序 ( 權重 )

如果當 CSS 選擇器選取元素時，發生「多個選擇器選擇到同一個元素」的狀況，就會根據「權重 Specificity」來判斷這個元素套用樣式的「優先順序」，這篇教...

oxxo ‧ 2025-08-06

2 Like 1 留言 801 瀏覽

鐵人賽 Modern Web DAY 6

關於那些有趣的 CSS 效果系列第 6 篇

技術 ( Day 6 ) 純 CSS 漸層色邊框

最近南部陰雨綿綿，期盼一切都好，望著窗外的雨將外牆染成了漸層的灰色，我想不如就來用 CSS 做個漸層色邊框吧 ( 一點關係也沒有 )，其實主要是接觸漸層色之後，...

oxxo ‧ 2025-08-06

0 Like 0 留言 484 瀏覽

鐵人賽佛心分享-跟著我的影片學 IT DAY 5

A CSS Video a Day, Keeps Web Confusion Away!! 系列第 5 篇

技術 ( Day 5 ) 認識 CSS 選擇器

CSS 選擇器 ( Selector ) 是 CSS 的核心功能，也是使用或學習 CSS 時最重要的技巧，透過特定的選擇器的規則，就能快速地找出某些元素，並針元...

oxxo ‧ 2025-08-05

1 Like 0 留言 370 瀏覽

鐵人賽 Modern Web DAY 5

關於那些有趣的 CSS 效果系列第 5 篇

技術 ( Day 5 ) 純 CSS 電子時鐘數字 ( 七段顯示器數字 )

記得當時在玩物聯網時，第一眼看到「七段顯示器」，就想要用 CSS 手刻這個效果，後來還真的用虛擬元素把它做了出來，隨著年齡增長，再次看到這個效果時，又手癢把它拿...

oxxo ‧ 2025-08-05

0 Like 0 留言 362 瀏覽

鐵人賽佛心分享-跟著我的影片學 IT DAY 4

A CSS Video a Day, Keeps Web Confusion Away!! 系列第 4 篇

技術 ( Day 4 ) CSS 命名原則

因為 CSS 太容易上手，使用者在 ID 和 Class ( 類別 ) 的命名上，時常發生名稱不一致或隨便取名的狀況，這種沒有系統性的命名，往往造成後續不容易理...

oxxo ‧ 2025-08-04

2 Like 0 留言 562 瀏覽

鐵人賽 Modern Web DAY 4

關於那些有趣的 CSS 效果系列第 4 篇

技術 ( Day 4 ) 純 CSS 製作跑馬燈效果

還記得第一次看到網頁的「跑馬燈」效果，是我大學時期的計算機概論課，使用 front page 內建的效果功能，當時因為瀏覽器不像現在進步 ( Netscape、...

oxxo ‧ 2025-08-04

1 Like 0 留言 362 瀏覽

鐵人賽佛心分享-跟著我的影片學 IT DAY 3

A CSS Video a Day, Keeps Web Confusion Away!! 系列第 3 篇

技術 ( Day 3 ) CSS 語法規則與結構

CSS 雖然不能真正算是程式語言，但也是一種「樣式語言」，因此也會有撰寫的語法規則和結構，這個單元會介紹 CSS 的語法規則和結構，只要掌握基本要領，就能寫出容...

oxxo ‧ 2025-08-03

1 Like 0 留言 584 瀏覽

鐵人賽 Modern Web DAY 3

關於那些有趣的 CSS 效果系列第 3 篇

技術 ( Day 3 ) 純 CSS 製作 Google 載入動畫

好幾年前第一次看到 Google 圓形翻頁載入動畫時，就讓我下定決心，一定要用純 CSS 把它給做出來！所以當時就使用了 CSS 動畫和變形，真的用純 CSS...

oxxo ‧ 2025-08-03

1 Like 0 留言 368 瀏覽

鐵人賽佛心分享-跟著我的影片學 IT DAY 2

A CSS Video a Day, Keeps Web Confusion Away!! 系列第 2 篇

技術 ( Day 2 ) 開始使用 CSS

今天的教學影片是「開始使用 CSS」，因為 CSS 需要搭配 HTML 共同使用，所以需要一些簡單的步驟才能執行，這個單元介紹使用本機環境、線上編輯器來編輯與執...

oxxo ‧ 2025-08-02

3 Like 0 留言 780 瀏覽

鐵人賽 Modern Web DAY 2

關於那些有趣的 CSS 效果系列第 2 篇

技術 ( Day 2 ) 純 CSS 製作圓餅圖

這系列的第一個效果就獻給「圓餅圖」了！記得第一次接觸圓餅圖，是在 PowerPoint 裡面用圖表的方式產生，當我轉職為前端工程師之後，就不斷嘗試要用各種框架在...

oxxo ‧ 2025-08-02

2 Like 1 留言 672 瀏覽

鐵人賽佛心分享-跟著我的影片學 IT DAY 1

A CSS Video a Day, Keeps Web Confusion Away!! 系列第 1 篇

技術 ( Day 1 ) 認識 CSS

今天的教學影片是「認識 CSS」，主要介紹什麼是 CSS、相關發展歷程、特色以及對響應式設計的影響。最後還會用一個簡單的範例，實際撰寫第一支 CSS 程式。影...

oxxo ‧ 2025-08-01

4 Like 0 留言 873 瀏覽

鐵人賽 Modern Web DAY 1

關於那些有趣的 CSS 效果系列第 1 篇

技術 ( Day 1 ) 從 CSS 開始，學會觀察世界的節奏

大家好，我是 OXXO ( OXXO.STUDIO )，今年第 N 次參戰 iT 邦幫忙鐵人賽，我決定選擇了一個自己最熟悉、也最有熱情的主題：「關於那些有趣的...

oxxo ‧ 2025-08-01

0 Like 0 留言 861 瀏覽

鐵人賽 Modern Web DAY 30

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

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) 今天我們要來製作一個捲動提示陰影效果：在...

Eva Chen ‧ 2024-10-14

0 Like 0 留言 1716 瀏覽

鐵人賽 Modern Web DAY 29

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

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) 今天我們要客製化瀏覽器捲軸的樣式，捲軸...

Eva Chen ‧ 2024-10-13

0 Like 0 留言 353 瀏覽

鐵人賽 Modern Web DAY 29

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

技術 Day 29 - CSS Challenge #15：Upload File via Antd (下)

題目 CSS Challenge Day15 上傳檔案及各種狀況的判斷介面上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodeP...

hitomiyang ‧ 2024-10-13

0 Like 0 留言 391 瀏覽

鐵人賽 Modern Web DAY 28

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

技術 Day 28 - CSS Challenge #15：Upload File via Antd (上)

題目 CSS Challenge Day15 上傳檔案及各種狀況的判斷介面上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodeP...

hitomiyang ‧ 2024-10-12

0 Like 0 留言 558 瀏覽

鐵人賽 Modern Web DAY 28

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

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) 當我們在進行網頁設計時，常常要處理當內容...

Eva Chen ‧ 2024-10-12

1 Like 0 留言 987 瀏覽

鐵人賽 Modern Web DAY 27

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

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) 前幾篇我們有提到 CSS transit...

Eva Chen ‧ 2024-10-11

0 Like 0 留言 1221 瀏覽

鐵人賽 Modern Web DAY 26

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

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) 上篇我們教了大家如何客製化 checkb...

Eva Chen ‧ 2024-10-10

0 Like 0 留言 1974 瀏覽

鐵人賽 Modern Web DAY 25

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

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) 在日常前端開發中，radio 和 che...

Eva Chen ‧ 2024-10-09

0 Like 0 留言 647 瀏覽

鐵人賽 Modern Web DAY 24

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

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) 這篇我們會介紹如何使用 CSS 的 of...

Eva Chen ‧ 2024-10-08

0 Like 0 留言 738 瀏覽

鐵人賽 Modern Web DAY 23

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

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) CSS 除了變數外，還可以額外新增自訂屬...

Eva Chen ‧ 2024-10-07

0 Like 0 留言 1384 瀏覽

鐵人賽 Modern Web DAY 22

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

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) 在很久以前 HTML 中有跑馬燈元素 &...

Eva Chen ‧ 2024-10-06

0 Like 0 留言 542 瀏覽

鐵人賽 Modern Web DAY 27

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

技術 Day 27 - CSS Challenge #14：Flip Card(下)

題目 CSS Challenge Day14 腳踏車卡片題目除了第一面的腳踏車卡片，還有滑鼠指上後的直升機卡片直升機卡片上面的圖是題目，而我們...

hitomiyang ‧ 2024-10-11

0 Like 0 留言 242 瀏覽

鐵人賽 Modern Web DAY 26

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

技術 Day 26 - CSS Challenge #14：Flip Card(上)

題目 CSS Challenge Day14 腳踏車卡片題目除了第一面的腳踏車卡片，還有滑鼠指上後的直升機卡片直升機卡片上面的圖是題目，而我們...

hitomiyang ‧ 2024-10-10

0 Like 0 留言 1206 瀏覽

鐵人賽 Modern Web DAY 21

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

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) 今天要來教大家如何使用 CSS Anim...

Eva Chen ‧ 2024-10-05

0 Like 0 留言 698 瀏覽

鐵人賽 Modern Web DAY 20

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

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) 在現代網頁設計中，動畫是提升使用者體驗的...

Eva Chen ‧ 2024-10-04

0 Like 0 留言 426 瀏覽