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

0 Like 0 留言 115 瀏覽

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

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

鐵人賽 Modern Web DAY 30

你的優先選擇是什麼？從 CSS 選擇器到優先級，深入解析與實用技巧系列第 30 篇

技術深入解析 CSS 選擇器權重，精準掌控樣式覆蓋

在上一篇文章中，我們介紹了基本選擇器的優先順序。不過開發中也經常遇到多個選擇器的組合時（如 ul li 、 div.appx a 等），或遇到一些套件的樣式，...

Lala Code ‧ 2024-10-14

0 Like 0 留言 169 瀏覽

鐵人賽 Modern Web DAY 29

你的優先選擇是什麼？從 CSS 選擇器到優先級，深入解析與實用技巧系列第 29 篇

技術掌控 CSS 樣式優先級：避免衝突的關鍵技巧

在前面的 28 天，我們介紹了多種選擇器，包括基本選擇器、複合選擇器、偽類選擇器、偽元素，接下來要進入到樣式的優先級（Specificity），本篇文章將會先...

Lala Code ‧ 2024-10-13

0 Like 0 留言 149 瀏覽

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

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

鐵人賽 Modern Web DAY 28

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

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

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

Eva Chen ‧ 2024-10-12

1 Like 0 留言 150 瀏覽

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

鐵人賽 Modern Web DAY 26

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

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

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

Eva Chen ‧ 2024-10-10

1 Like 0 留言 148 瀏覽

鐵人賽 Modern Web DAY 28

你的優先選擇是什麼？從 CSS 選擇器到優先級，深入解析與實用技巧系列第 28 篇

技術 ::before & ::after 利用 CSS 偽元素增強網頁內容的魅力

::before 和 ::after 是 CSS 偽元素，主要用於在不改變 HTML 結構的情況下，在元素的前後插入內容或樣式（例如文字、符號或圖片）。這些偽...

Lala Code ‧ 2024-10-12

2 Like 0 留言 175 瀏覽

鐵人賽 Modern Web DAY 27

你的優先選擇是什麼？從 CSS 選擇器到優先級，深入解析與實用技巧系列第 27 篇

技術 ::-webkit-scrollbar 自訂與眾不同的滾動條效果

在現代網頁中，如果內容高於瀏覽器或是元素區塊的高度，會出現滾動條方便瀏覽，一般瀏覽器預設為灰色的樣式。但有時候網站的風格，跟預設的滾動條樣式，與網站的整體...

Lala Code ‧ 2024-10-11

0 Like 0 留言 147 瀏覽

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

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

1 Like 1 留言 273 瀏覽

鐵人賽 Modern Web DAY 25

你的優先選擇是什麼？從 CSS 選擇器到優先級，深入解析與實用技巧系列第 25 篇

技術 :disabled & :enabled 表單元素啟用與禁用的完美搭配

之前我們介紹了如何使用 :focus & :focus-visible 來處理表單的焦點效果，這次我們要來看當表單元素被禁用時如何應用樣式 :disa...

Lala Code ‧ 2024-10-09

0 Like 0 留言 172 瀏覽

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

1 Like 0 留言 128 瀏覽

鐵人賽 Modern Web DAY 24

你的優先選擇是什麼？從 CSS 選擇器到優先級，深入解析與實用技巧系列第 24 篇

技術 :checked 玩轉複選框和單選框的選中效果

除了結構偽類外，還有一些可以控制外觀的「UI 偽類」，UI 偽類選擇器專門用於選擇與用戶介面元素狀態相關的元素，如複選框、單選框等。這些選擇器能夠根據元素的狀...

Lala Code ‧ 2024-10-08

0 Like 0 留言 131 瀏覽

鐵人賽 Modern Web DAY 22

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

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

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

Eva Chen ‧ 2024-10-06

0 Like 0 留言 138 瀏覽

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

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

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

鐵人賽 Modern Web DAY 23

你的優先選擇是什麼？從 CSS 選擇器到優先級，深入解析與實用技巧系列第 23 篇

技術 :not 不選擇的藝術，如何用 CSS 控制排除

:not 選擇器可以選取不符合指定選擇器的元素，主要功能是排除符合特定選擇器的元素，這讓我們能夠將樣式應用於那些不符合條件的元素，也稱為是「反選偽類」或「否定...

Lala Code ‧ 2024-10-07

1 Like 0 留言 125 瀏覽

鐵人賽 Modern Web DAY 22

你的優先選擇是什麼？從 CSS 選擇器到優先級，深入解析與實用技巧系列第 22 篇

技術 :empty 無聲的存在，掌控隱形的頁面空間

如果元素中沒有任何子元素或內容(包括空白符)時，我們可以透過 :empty 選擇器來定義樣式。 💠:empty 基本用法語法選擇器:empty { 屬性...

Lala Code ‧ 2024-10-06

0 Like 0 留言 203 瀏覽

鐵人賽 Modern Web DAY 20

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

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

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

Eva Chen ‧ 2024-10-04

1 Like 0 留言 131 瀏覽

鐵人賽 Modern Web DAY 21

你的優先選擇是什麼？從 CSS 選擇器到優先級，深入解析與實用技巧系列第 21 篇

技術 :root 從根開始掌控全局變數

:root 選擇器主要用來針對 HTML 文件的根元素（即 <html>），這與直接使用 html 元素選擇器有些許不同。兩者雖然選擇的都是同一個...

Lala Code ‧ 2024-10-05

0 Like 0 留言 99 瀏覽

鐵人賽 Modern Web DAY 25

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

技術 Day 25 - CSS Challenge #13：User Gallery(下)

題目 CSS Challenge Day13 Gallery 題目除了基本 Gallery 介面樣式以外，還有點擊後的介面 Info 上面的圖是題目...

hitomiyang ‧ 2024-10-09

0 Like 0 留言 171 瀏覽

鐵人賽 Modern Web DAY 19

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

技術 #53 CSS Animation

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

Eva Chen ‧ 2024-10-03

1 Like 0 留言 239 瀏覽

鐵人賽 Modern Web DAY 20

你的優先選擇是什麼？從 CSS 選擇器到優先級，深入解析與實用技巧系列第 20 篇

技術 :only-child & :only-of-type 讓唯一的元素成為焦點

:only-child 選擇器可以用於選中在父元素中唯一的子元素，用白話來說就是獨生子女元素，常用在只有一個子元素時，可以為該唯一的元素添加特殊的樣式。同樣地...

Lala Code ‧ 2024-10-04

0 Like 0 留言 109 瀏覽

鐵人賽 Modern Web DAY 24

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

技術 Day 24 - CSS Challenge #13：User Gallery(中)

題目 CSS Challenge Day13 Gallery 題目除了基本 Gallery 介面樣式以外，還有點擊後的介面 Info 上面的圖是題目...

hitomiyang ‧ 2024-10-08

0 Like 0 留言 125 瀏覽

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

鐵人賽 Modern Web DAY 19

你的優先選擇是什麼？從 CSS 選擇器到優先級，深入解析與實用技巧系列第 19 篇

技術 :nth-last-child & :nth-last-of-type 從後數起！CSS 的倒數計算法

前面我們講到過 :last-child，它可以直接選中同層的最後一個元素，而 :nth-last-child 則讓我們能從最後開始計算，選取倒數的元素，這對於...

Lala Code ‧ 2024-10-03

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

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

技術 深入解析 CSS 選擇器權重，精準掌控樣式覆蓋

技術 掌控 CSS 樣式優先級：避免衝突的關鍵技巧

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

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

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

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

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

技術 ::before & ::after 利用 CSS 偽元素增強網頁內容的魅力

技術 ::-webkit-scrollbar 自訂與眾不同的滾動條效果

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

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

技術 :disabled & :enabled 表單元素啟用與禁用的完美搭配

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

技術 :checked 玩轉複選框和單選框的選中效果

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

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

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

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

技術 :not 不選擇的藝術，如何用 CSS 控制排除

技術 :empty 無聲的存在，掌控隱形的頁面空間

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

技術 :root 從根開始掌控全局變數

技術 Day 25 - CSS Challenge #13：User Gallery(下)

技術 #53 CSS Animation

技術 :only-child & :only-of-type 讓唯一的元素成為焦點

技術 Day 24 - CSS Challenge #13：User Gallery(中)

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

技術 :nth-last-child & :nth-last-of-type 從後數起！CSS 的倒數計算法

標記使用者

技術深入解析 CSS 選擇器權重，精準掌控樣式覆蓋

技術掌控 CSS 樣式優先級：避免衝突的關鍵技巧