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

0 Like 0 留言 1023 瀏覽

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

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

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

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

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

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

Ashley ‧ 2024-10-03

0 Like 0 留言 813 瀏覽

鐵人賽 Modern Web DAY 17

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

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

CSS 的 transition 是是兩個狀態之間的動畫過渡效果。但在實際應用中，常常會遇到一些容易忽略的細節與技巧。今天我們就來聊聊那些你可能還不知道的 t...

Eva Chen ‧ 2024-10-01

0 Like 0 留言 500 瀏覽

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

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

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

鐵人賽 Modern Web DAY 18

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

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

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

Lala Code ‧ 2024-10-02

0 Like 0 留言 307 瀏覽

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

鐵人賽 Modern Web DAY 16

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

技術 #50 CSS 3D Transform

CSS 的 3D transform 讓我們可以在網頁上建立 3D 立體效果，讓元素看起來像是在一個 3D 空間中移動或旋轉。要使用 3D transfor...

Eva Chen ‧ 2024-09-30

0 Like 0 留言 388 瀏覽

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

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

鐵人賽 Modern Web DAY 16

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

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

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

Lala Code ‧ 2024-09-30

0 Like 0 留言 446 瀏覽

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

鐵人賽 Modern Web DAY 15

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

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

CSS 的 transform 屬性是一個功能強大的工具，它允許我們以簡單的方式對元素進行平移、縮放、旋轉和傾斜等 2D transform 效果，而不需要使...

Eva Chen ‧ 2024-09-29

1 Like 0 留言 301 瀏覽

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

鐵人賽 Modern Web DAY 16

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

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

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

艾瑞卡 ‧ 2024-09-30

1 Like 0 留言 297 瀏覽

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

鐵人賽 Modern Web DAY 15

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

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

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

Lala Code ‧ 2024-09-29

0 Like 0 留言 395 瀏覽

鐵人賽 Modern Web DAY 14

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

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

所謂的噪點漸層 (Grainy Gradients)，在顏色漸變時不是使用平滑過渡色彩，而是使用顆粒由多至少漸變，這樣的方式能夠製造出磨砂的質感，例如 Arc...

Eva Chen ‧ 2024-09-28

1 Like 0 留言 2517 瀏覽

鐵人賽 Modern Web DAY 14

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

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

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

Lala Code ‧ 2024-09-28

0 Like 0 留言 1753 瀏覽

鐵人賽 Modern Web DAY 13

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

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

mix-blend-mode 和 background-blend-mode 能讓元素或背景顏色和它們背後的元素或背景進行混合，從而產生不同的視覺效果。這些效...

Eva Chen ‧ 2024-09-27

0 Like 0 留言 1250 瀏覽

鐵人賽 Modern Web DAY 13

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

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

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

Lala Code ‧ 2024-09-27

0 Like 0 留言 1463 瀏覽

鐵人賽 Modern Web DAY 12

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

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

除了用繪圖軟體在圖片上調整色調，CSS 內建的濾鏡效果也能讓我們做到這些特殊效果，例如：模糊、變亮、對比、色相、飽和度調整等等，甚至還可以做到毛玻璃效果！今...

Eva Chen ‧ 2024-09-26

0 Like 0 留言 456 瀏覽

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

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

鐵人賽 Modern Web DAY 12

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

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

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

Lala Code ‧ 2024-09-26

1 Like 0 留言 2273 瀏覽

鐵人賽 Modern Web DAY 11

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

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

前幾篇寫到 CSS clip-path 時，可以剪裁任何 HTML 的元素，包含色塊、圖片、影片，但是他只限於精準的剪裁線條，萬一今天要有更複雜而且半透明的剪...

Eva Chen ‧ 2024-09-25

0 Like 0 留言 472 瀏覽

鐵人賽 Modern Web DAY 11

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

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

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

Lala Code ‧ 2024-09-25

0 Like 0 留言 1177 瀏覽

鐵人賽 Modern Web DAY 10

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

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

前幾篇我們使用CSS 邊框 border 畫了很多圖形，但是好像還沒有正式來好好畫邊框。XD今天，讓我們來研究邊框與各種花式邊框。 ↓ 今日學習重點 ↓...

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

標記使用者

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

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