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

0 Like 0 留言 888 瀏覽

鐵人賽 Modern Web DAY 18

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

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) CSS 偽類提供了一種方法，讓我們可以根...

Eva Chen ‧ 2024-10-02

0 Like 0 留言 1060 瀏覽

鐵人賽 Modern Web DAY 19

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

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

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

Lala Code ‧ 2024-10-03

0 Like 0 留言 977 瀏覽

鐵人賽佛心分享-刷題不只是刷題 DAY 19

30 天克服前端面試系列第 19 篇

技術 Day 19 - 為什麼實作 CSS 動畫位移效果使用 translate() 比 absolute 絕對定位更好？

剛好在最近工作上有遇到這個問題，就趁這個機會來討論 translate() 和 absolute 的差異，以及為什麼我們應該使用 translate() 來移動...

Ashley ‧ 2024-10-03

0 Like 0 留言 745 瀏覽

鐵人賽 Modern Web DAY 17

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

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) CSS 的 transition 是是兩...

Eva Chen ‧ 2024-10-01

0 Like 0 留言 472 瀏覽

鐵人賽 Modern Web DAY 23

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

技術 Day 23 - CSS Challenge #13：User Gallery(上)

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

hitomiyang ‧ 2024-10-07

0 Like 0 留言 308 瀏覽

鐵人賽 Modern Web DAY 20

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

技術 Day 20 - CSS Challenge #11：Walking Boots(下)

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

hitomiyang ‧ 2024-10-04

0 Like 0 留言 425 瀏覽

鐵人賽 Modern Web DAY 19

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

技術 Day 19 - CSS Challenge #11：Walking Boots(上)

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

hitomiyang ‧ 2024-10-03

1 Like 0 留言 574 瀏覽

鐵人賽 Modern Web DAY 18

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

技術 :nth-of-type 針對類型元素任你挑

在先前的文章中，我們介紹了 :nth-child，它讓我們能根據所有同層元素的位置進行選取。而這次要介紹的 :nth-of-type，則是針對相同類型的元素進...

Lala Code ‧ 2024-10-02

0 Like 0 留言 284 瀏覽

鐵人賽 Modern Web DAY 22

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

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

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

hitomiyang ‧ 2024-10-06

0 Like 0 留言 596 瀏覽

鐵人賽 Modern Web DAY 16

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

技術 #50 CSS 3D Transform

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) CSS 的 3D transform 讓...

Eva Chen ‧ 2024-09-30

0 Like 0 留言 367 瀏覽

鐵人賽 Modern Web DAY 18

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

技術 Day 18 - CSS Challenge #10：Watch UI(下)

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

hitomiyang ‧ 2024-10-02

1 Like 0 留言 474 瀏覽

鐵人賽 Modern Web DAY 17

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

技術 :first-of-type & :last-of-type 第一與最後的類型元素

在之前的文章中，我們介紹過 :first-child & :last-child 這兩個選擇器，可以用來選中第一個或最後一個元素。但本篇要介紹的 :f...

Lala Code ‧ 2024-10-01

0 Like 0 留言 867 瀏覽

鐵人賽 Modern Web DAY 16

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

技術 :nth-child 照著規則，所有元素任你選

上篇介紹了選取第一與最後的元素，那我們是否可以選取中間的元素呢？當然也是可以的！比方說，你可以選擇第三個元素、所有奇數元素、所有偶數元素，甚至依據特定規則選...

Lala Code ‧ 2024-09-30

0 Like 0 留言 425 瀏覽

鐵人賽 Modern Web DAY 17

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

技術 Day 17 - CSS Challenge #10：Watch UI(上)

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

hitomiyang ‧ 2024-10-01

0 Like 0 留言 1441 瀏覽

鐵人賽 Modern Web DAY 15

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

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) CSS 的 transform 屬性是一...

Eva Chen ‧ 2024-09-29

1 Like 0 留言 282 瀏覽

鐵人賽 Modern Web DAY 16

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

技術 Day 16 - CSS Challenge #9：Rainy Night - Weather UI (下)

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

hitomiyang ‧ 2024-09-30

0 Like 0 留言 672 瀏覽

鐵人賽 Modern Web DAY 16

轉生成前端工程師後，30步離開新手村！系列第 16 篇

技術 # 前端實作案例分享: Flex Box應用

提問: 有一個header，裡面有A，B兩個區塊，A是固定寬或是固定比例，B是動態寬度隨內容而定。今天客戶希望B在字數少一點的時候必須要置中對齊，字數多的時候...

艾瑞卡 ‧ 2024-09-30

1 Like 0 留言 255 瀏覽

鐵人賽 Modern Web DAY 15

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

技術 Day 15 - CSS Challenge #9：Rainy Night - Weather UI (中)

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

hitomiyang ‧ 2024-09-29

0 Like 0 留言 733 瀏覽

鐵人賽 Modern Web DAY 15

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

技術 :first-child & :last-child 輕鬆選中第一與最後的元素

當我們處理 HTML 結構時，可以使用虛擬類別選擇器(偽類選擇器)來選中特定位置的元素，這類偽類稱為「結構偽類」。舉例來說，如果要固定在第一個<li&...

Lala Code ‧ 2024-09-29

0 Like 0 留言 327 瀏覽

鐵人賽 Modern Web DAY 14

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

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) 所謂的噪點漸層 (Grainy Grad...

Eva Chen ‧ 2024-09-28

1 Like 0 留言 2316 瀏覽

鐵人賽 Modern Web DAY 14

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

技術 :focus & :focus-visible 掌控焦點，提升互動體驗！

上一篇介紹了游標互動的 :hover 狀態，其實鍵盤同樣可以與網頁互動！這篇將帶大家了解焦點效果 :focus 與 :focus-visible，幫助你更好地...

Lala Code ‧ 2024-09-28

0 Like 0 留言 1577 瀏覽

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

鐵人賽 Modern Web DAY 13

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

技術 :hover 游標懸停狀態，讓網頁更動態活潑

接下來我們來介紹「偽類選擇器（Pseudo-class Selector）」，也叫「虛擬類別選擇器」。這些選擇器的作用是針對元素在特定狀態下的樣式進行設定。雖...

Lala Code ‧ 2024-09-27

0 Like 0 留言 1285 瀏覽

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

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

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

0 Like 0 留言 284 瀏覽

鐵人賽 Modern Web DAY 12

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

技術通用兄弟選擇器-前方無視，鎖定後排兄弟

通用兄弟選擇器（Subsequent-sibling Combinator）用於選擇指定元素之後的所有符合條件的兄弟元素。接著上次的家族故事，家裡的大哥、二...

Lala Code ‧ 2024-09-26

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 留言 443 瀏覽

鐵人賽 Modern Web DAY 11

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

技術相鄰兄弟選擇器-兄弟情深，只挑最近的！

相鄰兄弟選擇器（Next-Sibling Combinator）用於選中指定元素緊接在後的第一個兄弟元素，忽略其他不緊接的兄弟元素。想像一下，家裡有大哥、二...

Lala Code ‧ 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

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

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

技術 Day 19 - 為什麼實作 CSS 動畫位移效果使用 translate() 比 absolute 絕對定位更好？

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

技術 Day 23 - CSS Challenge #13：User Gallery(上)

技術 Day 20 - CSS Challenge #11：Walking Boots(下)

技術 Day 19 - CSS Challenge #11：Walking Boots(上)

技術 :nth-of-type 針對類型元素任你挑

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

技術 #50 CSS 3D Transform

技術 Day 18 - CSS Challenge #10：Watch UI(下)

技術 :first-of-type & :last-of-type 第一與最後的類型元素

技術 :nth-child 照著規則，所有元素任你選

技術 Day 17 - CSS Challenge #10：Watch UI(上)

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

技術 Day 16 - CSS Challenge #9：Rainy Night - Weather UI (下)

技術 # 前端實作案例分享: Flex Box應用

技術 Day 15 - CSS Challenge #9：Rainy Night - Weather UI (中)

技術 :first-child & :last-child 輕鬆選中第一與最後的元素

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

技術 :focus & :focus-visible 掌控焦點，提升互動體驗！

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

技術 :hover 游標懸停狀態，讓網頁更動態活潑

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

標記使用者

技術通用兄弟選擇器-前方無視，鎖定後排兄弟

技術相鄰兄弟選擇器-兄弟情深，只挑最近的！