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

0 Like 0 留言 617 瀏覽

鐵人賽 Modern Web DAY 16

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

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

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

艾瑞卡 ‧ 2024-09-30

1 Like 0 留言 210 瀏覽

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

鐵人賽 Modern Web DAY 15

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

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

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

Lala Code ‧ 2024-09-29

0 Like 0 留言 250 瀏覽

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

鐵人賽 Modern Web DAY 14

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

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

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

Lala Code ‧ 2024-09-28

0 Like 0 留言 1282 瀏覽

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

鐵人賽 Modern Web DAY 13

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

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

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

Lala Code ‧ 2024-09-27

0 Like 0 留言 1089 瀏覽

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

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

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

鐵人賽 Modern Web DAY 12

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

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

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

Lala Code ‧ 2024-09-26

1 Like 0 留言 1769 瀏覽

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

鐵人賽 Modern Web DAY 11

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

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

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

Lala Code ‧ 2024-09-25

0 Like 0 留言 950 瀏覽

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

鐵人賽 Modern Web DAY 10

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

技術子代選擇器-鎖定直系血親，選擇不含糊

子代選擇器（Child Combinator）用於選中指定元素中的直接子元素。與後代選擇器不同，子代選擇器只會選擇直接子元素，而不包括更深層次的後代元素。如...

Lala Code ‧ 2024-09-24

0 Like 0 留言 816 瀏覽

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

鐵人賽 Modern Web DAY 9

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

技術後代選擇器-傳承的力量，輕鬆選中後代元素

後代選擇器（Descendant Combinator）用於選擇特定元素中的所有子孫元素，無論是直接的子元素還是更深層次的後代。當你需要對一個範圍內的所有元素...

Lala Code ‧ 2024-09-23

0 Like 0 留言 533 瀏覽

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

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

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

1 Like 1 留言 365 瀏覽

鐵人賽 Modern Web DAY 8

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

技術選擇器列表-多重選擇，一次完成！

選擇器列表（Selector List），又稱「分組選擇器」或「並集選擇器」，允許多個選擇器共享相同的樣式。其實就像在一場派對上分組一樣，你可以把喜歡狗的人...

Lala Code ‧ 2024-09-22

0 Like 0 留言 349 瀏覽

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

鐵人賽自我挑戰組 DAY 3

30 Day CSS Challenge 系列第 5 篇

技術 Day 4 CSS Challenge The Pyramide

https://codepen.io/ericcai/pen/rNXBpLP 在第四天的挑戰中，我們要來製作一個充滿視覺效果的金字塔場景，包括閃爍的星星、動態的...

Eric ‧ 2024-09-21

0 Like 0 留言 593 瀏覽

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

0 Like 0 留言 353 瀏覽

鐵人賽 Modern Web DAY 7

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

技術交集選擇器-一次選擇，多重考量

接下來會開始介紹各種複合選擇器，複合選擇器是指將多個基本選擇器組合在一起，我們可以更精確地選擇特定的 HTML 元素。這些選擇器可以基於元素的類別、結構、層次...

Lala Code ‧ 2024-09-21

1 Like 0 留言 639 瀏覽

鐵人賽 Modern Web DAY 6

創意前端設計：用 Vue.js 打造 30 個互動實用功能系列第 6 篇

技術 Day06 Vue.js 簡單迷人的網頁動態效果 - 過渡類別篇

Vue 過渡類別的關鍵控制：讓動態設計成為過程的藝術在現代動態設計中，過程的流暢性往往比最終的結果更能吸引使用者的目光。 Vue 的過渡類別不僅能幫助我們設...

Sunny.Cat ‧ 2024-09-20

0 Like 0 留言 297 瀏覽

鐵人賽 Modern Web DAY 6

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

技術屬性選擇器-尋找標籤中的屬性

屬性選擇器（Attribute Selectors）用於選中符合屬性值條件的 HTML 元素，HTML 元素上會有一些屬性，例如 <a> 標籤有...

Lala Code ‧ 2024-09-20

1 Like 0 留言 1114 瀏覽

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

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

鐵人賽 Modern Web DAY 9

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

技術 Day 9 - CSS Challenge #6：Profile卡片介面(下)

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

hitomiyang ‧ 2024-09-23

技術 # 前端實作案例分享: 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

技術 子代選擇器-鎖定直系血親，選擇不含糊

技術 #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(上)

技術 Day 4 CSS Challenge The Pyramide

技術 #41 用 CSS border-radius 畫圓角與圓圓的形狀：圓、圓柱、橢圓、蛋型、鐘型、葉子 (眼睛)、花瓣 (水滴/心形)、牛角 (彎月)

技術 交集選擇器-一次選擇，多重考量

技術 Day06 Vue.js 簡單迷人的網頁動態效果 - 過渡類別篇

技術 屬性選擇器-尋找標籤中的屬性

技術 #40 使用 CSS filter blur 製作簡易的任意形狀漸層 (流動/暈染背景)

技術 #39 CSS 幾何背景：條紋、格子、點點、棋盤格子背景 (CSS background)

技術 Day 9 - CSS Challenge #6：Profile卡片介面(下)

標記使用者

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

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

技術子代選擇器-鎖定直系血親，選擇不含糊

技術後代選擇器-傳承的力量，輕鬆選中後代元素

技術選擇器列表-多重選擇，一次完成！

技術交集選擇器-一次選擇，多重考量

技術屬性選擇器-尋找標籤中的屬性