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

0 Like 0 留言 392 瀏覽

鐵人賽 Modern Web DAY 10

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

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

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

Lala Code ‧ 2024-09-24

0 Like 0 留言 989 瀏覽

鐵人賽 Modern Web DAY 9

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

技術 #43 用 CSS clip-path 剪裁各種形狀的色塊/圖片/影片

在 CSS 中除了使用 border 來繪製形狀，還有一個語法 clip-path 也可以繪製圖形，它可以將東西指定在某個形狀內，例如圓形、多邊形，甚至是使用...

Eva Chen ‧ 2024-09-23

0 Like 0 留言 465 瀏覽

鐵人賽 Modern Web DAY 9

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

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

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

Lala Code ‧ 2024-09-23

0 Like 0 留言 688 瀏覽

鐵人賽 Modern Web DAY 8

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

技術 #42 用 CSS border 繪製三角形箭頭 (等腰/直角三角形)

在 CSS 中，可以使用邊框 border 來繪製三角形，通常會被當成箭頭使用，用在提示框的邊緣或操作步驟按鈕上。 ↓ 今日學習重點 ↓ 學會用 bo...

Eva Chen ‧ 2024-09-22

0 Like 0 留言 354 瀏覽

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

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

鐵人賽 Modern Web DAY 8

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

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

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

Lala Code ‧ 2024-09-22

0 Like 0 留言 424 瀏覽

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

鐵人賽自我挑戰組 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 留言 809 瀏覽

鐵人賽 Modern Web DAY 7

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

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

在上篇文章中，我們用簡單的圓形加上模糊效果繪製了不規則的漸層，這篇我們來探討如何繪製各種形狀，其實使用 CSS 邊框 (border) 中的「邊框圓角 (bo...

Eva Chen ‧ 2024-09-21

0 Like 0 留言 435 瀏覽

鐵人賽 Modern Web DAY 7

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

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

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

Lala Code ‧ 2024-09-21

1 Like 0 留言 772 瀏覽

鐵人賽 Modern Web DAY 6

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

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

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

Sunny.Cat ‧ 2024-09-20

0 Like 0 留言 380 瀏覽

鐵人賽 Modern Web DAY 6

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

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

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

Lala Code ‧ 2024-09-20

1 Like 0 留言 1324 瀏覽

鐵人賽 Modern Web DAY 6

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

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

在平面設計中，還有一種很常見的漸層，既不是線性漸層，也不屬於圓形/圓錐漸層，是任意形狀漸層漸層，也有人稱之為流動 (Fluid gradient) 或暈染漸層...

Eva Chen ‧ 2024-09-20

1 Like 0 留言 1196 瀏覽

鐵人賽 Modern Web DAY 5

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

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

除了單純的漸層色外，漸層還能夠延伸畫出其他的圖案：如條紋、格子、點點、棋盤格背景等等，很神奇吧！這些特殊背景是我從一本 CSS 好書「CSS Secrets」...

Eva Chen ‧ 2024-09-19

0 Like 0 留言 408 瀏覽

鐵人賽 Modern Web DAY 9

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

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

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

hitomiyang ‧ 2024-09-23

0 Like 0 留言 480 瀏覽

鐵人賽 Modern Web DAY 8

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

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

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

hitomiyang ‧ 2024-09-22

0 Like 0 留言 472 瀏覽

鐵人賽 Modern Web DAY 5

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

技術 ID 選擇器-僅此一家，別無分號

ID 選擇器（ID Selectors）是根據元素上的 id 屬性值作為判斷依據，大小寫需相符。 id 其實就是「身分 Identity」的縮寫，同一個 id...

Lala Code ‧ 2024-09-19

1 Like 0 留言 354 瀏覽

鐵人賽 Modern Web DAY 7

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

技術 Day 7 - CSS Challenge #5：Weekly Report 介面(下)

題目 CSS Challenge Day5 上面的圖是題目，而我們要做出幾乎一樣的樣子我做好的此題CSS Challeage解答前情提要上一集由於篇幅太長，...

hitomiyang ‧ 2024-09-21

0 Like 0 留言 258 瀏覽

鐵人賽自我挑戰組 DAY 3

30 Day CSS Challenge 系列第 4 篇

技術 Day 3 CSS Challenge Menu Icon

https://codepen.io/ericcai/pen/JjQqWNJ 第三天的挑戰是製作一個點擊後能夠變形的菜單圖標，主要使用了 CSS3 的動畫和過渡...

Eric ‧ 2024-09-19

0 Like 1 留言 348 瀏覽

鐵人賽 Modern Web DAY 6

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

技術 Day 6 - CSS Challenge #5：Weekly Report 介面(上)

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

hitomiyang ‧ 2024-09-20

1 Like 0 留言 765 瀏覽

鐵人賽 Modern Web DAY 4

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

技術 #38 CSS background 組合技：多重背景、背景位置、簡易視差滾動 (iOS 不支援)

本篇同步發表於我的部落格 ↓ 今日學習重點 ↓ 學會 CSS 背景的詳細設定方式學會使用多重背景，並了解使用情境學會設定背景的範圍...

Eva Chen ‧ 2024-09-18

0 Like 0 留言 403 瀏覽

鐵人賽 Modern Web DAY 21

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

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

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

hitomiyang ‧ 2024-10-05

0 Like 0 留言 485 瀏覽

鐵人賽 Modern Web DAY 4

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

技術類選擇器-前端切版最常使用的選擇器，精準鎖定

上一篇有講到，元素選擇器沒辦法讓相同的標籤進行不同的樣式，這時候就要靠類選擇器啦~！類選擇器（Class Selectors）是前端切版最常使用到的選擇器，...

Lala Code ‧ 2024-09-18

0 Like 1 留言 289 瀏覽

鐵人賽 Modern Web DAY 5

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

技術 Day 5 - CSS Challenge #4：三層圓形的漸變動畫

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

hitomiyang ‧ 2024-09-19

0 Like 0 留言 294 瀏覽

鐵人賽自我挑戰組 DAY 3

30 Day CSS Challenge 系列第 3 篇

技術 Day 2 CSS Challenge linear-gradient transition

https://codepen.io/ericcai/pen/qBzgBRX 第二天的挑戰是製作一個有漸層變化效果的動畫，當滑鼠懸停時背景和文字顏色會隨之變化。...

Eric ‧ 2024-09-17

1 Like 0 留言 449 瀏覽

鐵人賽 Modern Web DAY 3

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

技術元素選擇器-誰說標籤只是標籤

元素選擇器（Type Selectors）也可以稱作「標籤選擇器」。我們可以在 HTML 文件中，選擇任何的 HTML 元素，並對選中的標籤元素來處理樣式。不...

Lala Code ‧ 2024-09-17

0 Like 0 留言 387 瀏覽

鐵人賽 Modern Web DAY 4

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

技術 Day 4 - CSS Challenge #3：金字塔的日出日落

題目 CSS Challenge Day3 上面的圖是題目，題目本身是一個動態的由各種動畫組成的樣子，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的Cod...

hitomiyang ‧ 2024-09-18

0 Like 0 留言 966 瀏覽

鐵人賽 Modern Web DAY 3

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

技術 #37 CSS 基本漸層：線性/放射/圓錐漸層 (CSS linear-gradient, radial-gradient, conic-gradient)

除了背景圖片，漸層色也是屬於 CSS 的背景一種，今天我們就來練習畫各種漂亮漸層吧！單純用漸層色就能夠表現出許多漂亮的視覺效果，例如模仿大自然中天空的顏色等...

Eva Chen ‧ 2024-09-17

1 Like 0 留言 679 瀏覽

鐵人賽 Modern Web DAY 2

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

技術通用選擇器-小朋友才做選擇，我全都要

通用選擇器（Universal Selector）也稱為「通配選擇器」或「全體選擇器」，這些名稱指的都是同一個概念。通用選擇器可以使用 * 符號來選取所有元素...

Lala Code ‧ 2024-09-16

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

技術 #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卡片介面(下)

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

技術 ID 選擇器-僅此一家，別無分號

技術 Day 7 - CSS Challenge #5：Weekly Report 介面(下)

技術 Day 3 CSS Challenge Menu Icon

技術 Day 6 - CSS Challenge #5：Weekly Report 介面(上)

技術 #38 CSS background 組合技：多重背景、背景位置、簡易視差滾動 (iOS 不支援)

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

技術 類選擇器-前端切版最常使用的選擇器，精準鎖定

技術 Day 5 - CSS Challenge #4：三層圓形的漸變動畫

技術 Day 2 CSS Challenge linear-gradient transition

技術 元素選擇器-誰說標籤只是標籤

技術 Day 4 - CSS Challenge #3：金字塔的日出日落

技術 #37 CSS 基本漸層：線性/放射/圓錐漸層 (CSS linear-gradient, radial-gradient, conic-gradient)

技術 通用選擇器-小朋友才做選擇，我全都要

標記使用者

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

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

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

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

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

技術類選擇器-前端切版最常使用的選擇器，精準鎖定

技術元素選擇器-誰說標籤只是標籤

技術通用選擇器-小朋友才做選擇，我全都要