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

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

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

鐵人賽 Modern Web DAY 8

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

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

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

hitomiyang ‧ 2024-09-22

1 Like 0 留言 290 瀏覽

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

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

鐵人賽 Modern Web DAY 4

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

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 學會 C...

Eva Chen ‧ 2024-09-18

0 Like 0 留言 336 瀏覽

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

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

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

鐵人賽 Modern Web DAY 3

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

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

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 學會使用...

Eva Chen ‧ 2024-09-17

0 Like 0 留言 436 瀏覽

鐵人賽 Modern Web DAY 3

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

技術 Day 3 - CSS Challenge #2：MenuIcon動畫的實現與解題分析

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

hitomiyang ‧ 2024-09-17

0 Like 0 留言 637 瀏覽

鐵人賽 Modern Web DAY 2

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

技術 Day 2 - CSS Challenge #1：數字 100 與文字佈局

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

hitomiyang ‧ 2024-09-16

0 Like 0 留言 377 瀏覽

鐵人賽 Modern Web DAY 1

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

技術 #00 文章目錄 / 參賽前言 | Super Easy CSS - Part 2

參賽前言去年的鐵人賽雖然成功完賽了（Super Easy CSS，極度簡單），但是整個系列卻沒有完整，原來要讓人學會 CSS，30 天是不夠的呀！因為沒有預...

Eva Chen ‧ 2024-09-15

0 Like 1 留言 2390 瀏覽

鐵人賽 Modern Web

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 35 篇

技術 #33 CSS 切換淺色/深色模式：Media Queries 的 prefers-color-scheme 搭配 CSS 變數

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 使用 M...

Eva Chen ‧ 2023-12-01

1 Like 0 留言 2578 瀏覽

鐵人賽 Modern Web

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 34 篇

技術 #32 CSS 顏色變數 currentcolor、checkbox/radio 顏色、input placeholder、閃動的光標顏色、文字反白的顏色，混色的 color-mix()

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解 c...

Eva Chen ‧ 2023-11-10

1 Like 1 留言 7245 瀏覽

鐵人賽 Modern Web DAY 30

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 31 篇

技術 #29 CSS 立體字、霓虹字、外框字、漸層字：text-shadow、-webkit-text-stroke、-webkit-background-clip

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解 C...

Eva Chen ‧ 2023-10-15

0 Like 1 留言 3606 瀏覽

鐵人賽 Modern Web DAY 29

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 30 篇

技術 #28 CSS 文字過長、行數過多顯示點點點、文字自動折行、強制換行：white-space、word-break、-webkit-line-clamp 的妙用

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 學會設定...

Eva Chen ‧ 2023-10-14

1 Like 0 留言 4634 瀏覽

鐵人賽 Modern Web DAY 28

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 29 篇

技術 #27 網頁載入字體、Icon Font 與 CSS font-family、font-weight

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解字體...

Eva Chen ‧ 2023-10-13

1 Like 0 留言 2792 瀏覽

鐵人賽 Modern Web DAY 27

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 28 篇

技術 #26 CSS Container Queries 容器查詢：隨著自己變大變小變畫面

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解 C...

Eva Chen ‧ 2023-10-12

0 Like 0 留言 3109 瀏覽

鐵人賽 Modern Web DAY 26

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 27 篇

技術 #25 CSS 列印的小技巧：@media print、break-before/after/inside、@page

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解如何...

Eva Chen ‧ 2023-10-11

0 Like 0 留言 924 瀏覽

鐵人賽 Modern Web DAY 25

不用庫也能酷 - 玩轉 CSS & Js 特效系列第 25 篇

技術 Day25 有料的 CSS 漢堡選單

我們今天要來做幾份漢堡選單。原理和 Day14 今天我想來點… 純 CSS 的開關一樣，都是用 input 的 checkbox 來儲存狀態好讓其他元素可...

毛哥EM ‧ 2023-10-09

0 Like 1 留言 1234 瀏覽

鐵人賽 Modern Web DAY 24

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 25 篇

技術 #23 CSS 邏輯屬性 Logical properties 與 Writing modes

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解 C...

Eva Chen ‧ 2023-10-09

0 Like 2 留言 2922 瀏覽

鐵人賽 Modern Web DAY 23

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 24 篇

技術 #22 CSS display: contents：讓你變成小透明，製作 JS Components 時的好東西！

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解 d...

Eva Chen ‧ 2023-10-08

0 Like 0 留言 1896 瀏覽

鐵人賽 Modern Web DAY 22

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 23 篇

技術 #21 CSS Position：relative、absolute、fixed、sticky 找到適合的定位

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解 5...

Eva Chen ‧ 2023-10-07

0 Like 0 留言 1345 瀏覽

鐵人賽 Modern Web DAY 21

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 22 篇

技術 #20 CSS 內部尺寸 (Intrinsic Sizing)：min-content、max-content、fit-content

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解 3...

Eva Chen ‧ 2023-10-06

0 Like 2 留言 4484 瀏覽

鐵人賽 Modern Web DAY 20

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 21 篇

技術 #19 CSS Grid、Subgrid：網頁排版的神奇格子，來排個照片牆與雞腿便當吧！

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 學習 G...

Eva Chen ‧ 2023-10-05

0 Like 0 留言 2139 瀏覽

鐵人賽 Modern Web DAY 19

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 20 篇

技術 #18 CSS Flex 彈性盒子：網頁排版的超級寵兒

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解 F...

Eva Chen ‧ 2023-10-04

0 Like 0 留言 2559 瀏覽

鐵人賽 Modern Web DAY 18

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 19 篇

技術 #17 CSS block、inline、inline-block：網頁排版的御三家

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解網頁上...

Eva Chen ‧ 2023-10-03

0 Like 0 留言 1703 瀏覽

鐵人賽 Modern Web DAY 17

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 18 篇

技術 #16 CSS 數學函式 calc()、max()、min()、clamp()

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解四個實...

Eva Chen ‧ 2023-10-02

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

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

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

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

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

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

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

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

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

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

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

技術 Day 3 - CSS Challenge #2：MenuIcon動畫的實現與解題分析

技術 Day 2 - CSS Challenge #1：數字 100 與文字佈局

技術 #00 文章目錄 / 參賽前言 | Super Easy CSS - Part 2

技術 #33 CSS 切換淺色/深色模式：Media Queries 的 prefers-color-scheme 搭配 CSS 變數

技術 #32 CSS 顏色變數 currentcolor、checkbox/radio 顏色、input placeholder、閃動的光標顏色、文字反白的顏色，混色的 color-mix()

技術 #29 CSS 立體字、霓虹字、外框字、漸層字：text-shadow、-webkit-text-stroke、-webkit-background-clip

技術 #28 CSS 文字過長、行數過多顯示點點點、文字自動折行、強制換行：white-space、word-break、-webkit-line-clamp 的妙用

技術 #27 網頁載入字體、Icon Font 與 CSS font-family、font-weight

技術 #26 CSS Container Queries 容器查詢：隨著自己變大變小變畫面

技術 #25 CSS 列印的小技巧：@media print、break-before/after/inside、@page

技術 Day25 有料的 CSS 漢堡選單

技術 #23 CSS 邏輯屬性 Logical properties 與 Writing modes

技術 #22 CSS display: contents：讓你變成小透明，製作 JS Components 時的好東西！

技術 #21 CSS Position：relative、absolute、fixed、sticky 找到適合的定位

技術 #20 CSS 內部尺寸 (Intrinsic Sizing)：min-content、max-content、fit-content

技術 #19 CSS Grid、Subgrid：網頁排版的神奇格子，來排個照片牆與雞腿便當吧！

技術 #18 CSS Flex 彈性盒子：網頁排版的超級寵兒

技術 #17 CSS block、inline、inline-block：網頁排版的御三家

技術 #16 CSS 數學函式 calc()、max()、min()、clamp()

標記使用者