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

1 Like 0 留言 2544 瀏覽

鐵人賽 Modern Web

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

技術 #35 圖片的 1x, 2x, 3x 是什麼？關於網頁上圖片解析度的處理：HTML <img> srcset、CSS image-set() 與 @media resolution

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

Eva Chen ‧ 2024-01-18

0 Like 0 留言 4847 瀏覽

鐵人賽 Modern Web

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

技術 #34 CSS 讓圖片填滿容器的各種方法，以圓形大頭貼為例：object-fit 與 background-size，搭配 aspect-ratio

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

Eva Chen ‧ 2024-01-11

0 Like 1 留言 2729 瀏覽

鐵人賽 Modern Web

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

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

關於顏色的設定方法、顏色的變數、混色的新方法，我們在前兩篇都說過了，關於顏色還有什麼需要了解的呢？那就是近幾年在軟體設計中常出現的：淺色與深色模式切換。今天...

Eva Chen ‧ 2023-12-01

1 Like 0 留言 2851 瀏覽

鐵人賽 Modern Web

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

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

上一篇我們了解了如何各種設定顏色的方式，這一篇我們要來了解關於其他顏色的小事，都很好用，像是顏色的變數 currentcolor、input 的顏色 acce...

Eva Chen ‧ 2023-11-10

1 Like 0 留言 4002 瀏覽

鐵人賽 Modern Web

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

技術 #31 CSS 顏色設定：基本的 hex、rgb()、cmyk()、hsl()、hsb() 、hwb() 與明日之星的 lch()、oklch()

顏色在之前的範例中雖然有用到，但是一直沒有深入講解。今天，我們就要來深入了解各種 CSS 設定顏色的原理及方式，我們要了解基本的 hex、rgb()、cmy...

Eva Chen ‧ 2023-10-25

1 Like 1 留言 8379 瀏覽

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

鐵人賽 Modern Web DAY 29

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

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

在網頁中，許多資料是動態產生的，也就是說我們沒有辦法控制內容的長短，版面可能被文字擠到破版，也可能會該換行的沒有換行。今天我們就要來學習各種 CSS 文字的...

Eva Chen ‧ 2023-10-14

0 Like 0 留言 1309 瀏覽

鐵人賽影片教學 DAY 29

一起來實作響應式網頁設計系列第 29 篇

技術一起來實作響應式網頁設計：探究Bootstrap Day29

影片教學程式碼重點回顧 <!DOCTYPE html> <html lang="en"> <head&gt...

coding19 ‧ 2023-10-14

2 Like 0 留言 5079 瀏覽

鐵人賽 Modern Web DAY 28

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

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

我們關於版面編排與 RWD 的部分終於告一個段落了，現在大觀念了解後，接下來我們要深入各個樣式的細節，例如文字、圖片、圖形、互動等等。首先，我們將從文字的部分...

Eva Chen ‧ 2023-10-13

2 Like 0 留言 3213 瀏覽

鐵人賽 Modern Web DAY 27

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

技術 #26 CSS Container Queries 容器查詢：讓 CSS 的計算以容器自身為依據

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

Eva Chen ‧ 2023-10-12

0 Like 0 留言 3418 瀏覽

鐵人賽 Modern Web DAY 26

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

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

網頁需要列印的情況，通常是一些表單頁面（收據、報告等）。上一篇我們講解了 CSS Media Queries，這篇我們要延伸來討論網頁列印時的情況。 ↓...

Eva Chen ‧ 2023-10-11

0 Like 1 留言 5172 瀏覽

鐵人賽 Modern Web DAY 25

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

技術 #24 RWD & CSS Media Queries & iOS Safari 上的經驗談

當我們在設計網站時，我們希望網站能夠適應不同的裝置和螢幕尺寸，以提供更好的使用體驗，這就是響應式網頁設計（RWD，Responsive Web Design）...

Eva Chen ‧ 2023-10-10

0 Like 1 留言 1382 瀏覽

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

鐵人賽 Modern Web DAY 23

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

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

前幾篇在研究 Grid 與 Subgrid 時，發現有人說過去是使用 display: contents; 來代替 subgrid 的效果，我才知道原來還有這...

Eva Chen ‧ 2023-10-08

0 Like 0 留言 2089 瀏覽

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

鐵人賽 Modern Web DAY 21

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

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

今天來點簡單的主題！ CSS 中的尺寸分為兩種，一種叫做「外部尺寸（Extrinsic Sizing）」，尺寸由元素的外部決定，我們在之前提過的單位介紹，好比...

Eva Chen ‧ 2023-10-06

0 Like 2 留言 4922 瀏覽

鐵人賽 Modern Web DAY 20

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

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

昨天我們介紹的 flex 是單向的排版，而今天我們要探討 grid ，它是雙向的排版，可以創造很多行與列。grid 也是十分好用的 CSS，大家一起學起來吧！...

Eva Chen ‧ 2023-10-05

0 Like 0 留言 2309 瀏覽

鐵人賽 Modern Web DAY 19

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

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

Flex 又稱彈性盒子，是目前學習 CSS 必學的排版方式之一，有了它幾乎 80% 的版面都可以排出來。過去 block、inline、inline-bloc...

Eva Chen ‧ 2023-10-04

0 Like 0 留言 2872 瀏覽

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

鐵人賽 Modern Web DAY 17

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

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

CSS 的數值可以做簡單的運算，今天我們要介紹 CSS 的數學函式，數學函式可以讓你在設計網頁時更靈活操控元素的尺寸和位置。實用的 CSS 數學函式共用四個...

Eva Chen ‧ 2023-10-02

2 Like 0 留言 2629 瀏覽

鐵人賽 Modern Web DAY 16

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

技術 #15 網頁使用的單位大解析：px、rem、em、%、vw、vh (dvh, lvh, svh)、vmin、vmax

在網頁設計中，我們會使用到各種單位來調整尺寸和排版，而單位分成絕對單位和相對單位。 ↓ 今日學習重點 ↓ 了解好用的 CSS 單位並使用它們本...

Eva Chen ‧ 2023-10-01

0 Like 0 留言 3034 瀏覽

鐵人賽 Modern Web DAY 15

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

技術 #14 Reset CSS！用 Reset.css 或 Normalize.css 變回你該有的樣子

CSS 為什麼需要 Reset？不同的瀏覽器會有不同的預設樣式，可能包含字體大小、邊距、填充、行高等等。這會導致網頁的外觀不一致，所以通常我們在最一開始開...

Eva Chen ‧ 2023-09-30

0 Like 0 留言 1117 瀏覽

鐵人賽 Modern Web DAY 14

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

技術 #13 CSS 盒子模型 (Box Model)：border-box & content-box

在網頁中，每個 HTML 元素都是一個方塊，我們又稱之為「盒子 Box」。這個盒子包含了它的內容、內部間距、邊框線與外部間距，光用說的有點抽象，讓我們以 F...

Eva Chen ‧ 2023-09-29

0 Like 0 留言 1535 瀏覽

鐵人賽 Modern Web DAY 13

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

技術 #12 4 個常見的 CSS 設計方法與命名建議：OOCSS、SMACSS、BEM、RSCSS

上篇我們了解了寫 Code 的三大方向，主要都是為了更簡單、更好維護。所以，以此延伸，有許多 CSS 的模組化命名方法論就此而生，其中包括 OOCSS、SM...

Eva Chen ‧ 2023-09-28

0 Like 0 留言 608 瀏覽

鐵人賽影片教學 DAY 11

一起來實作響應式網頁設計系列第 11 篇

技術一起來實作響應式網頁設計：Box Model Day11

影片教學重點回顧 padding：content 與 border之間的距離 margin：元素間的距離 border：框出元素的範圍以上是今天的教...

coding19 ‧ 2023-09-26

0 Like 0 留言 2472 瀏覽

鐵人賽 Modern Web DAY 11

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

技術 #10 原生的 CSS 巢狀 (CSS Nesting) 終於支援啦！

以往 CSS 要使用巢狀管理要透過 Sass (SCSS) 或 Less 等預處理器才能實現，現在原生的 CSS 巢狀也可以使用了。前陣子在 Firefox...

Eva Chen ‧ 2023-09-26

0 Like 0 留言 414 瀏覽

鐵人賽影片教學 DAY 10

一起來實作響應式網頁設計系列第 10 篇

技術一起來實作響應式網頁設計：CSS外觀屬性 Day10

影片教學重點回顧 color: 色彩名稱 | rgb(rr,gg,bb) | #rrggbb | rgba(rr,gg,bb,alpha) opacity...

coding19 ‧ 2023-09-25

0 Like 1 留言 1511 瀏覽

鐵人賽 Modern Web DAY 10

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

技術 #09 原生的 CSS 變數，基本與進階應用

CSS 變數（CSS Variables）可以讓人在整個網站的樣式中輕鬆重複使用相同的值，更輕鬆地調整網站的外觀，同時保持一致性。以往 CSS 要使用變數必須...

Eva Chen ‧ 2023-09-25

0 Like 1 留言 1976 瀏覽

鐵人賽 Modern Web DAY 9

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

技術 #08 CSS 選擇器總整理！id、class、:nth-child(n)、:not、:where、:is、:has 都難不倒我

本篇會用實例與註解說明各種實用的 CSS 選取器，由於很多所以可以先存起來，之後要用到時再查詢。我的 Photoshop 老師游閔州曾說過：「掌握了 Pho...

Eva Chen ‧ 2023-09-24

0 Like 1 留言 1101 瀏覽

鐵人賽 Modern Web DAY 8

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

技術 #07 CSS 基本語法 & 權重介紹

我們終於進入我們的重點 CSS 啦！今天要來講解 CSS 權重與選擇器。本篇會先講解如何撰寫 CSS 與權重概念，下一篇會用實例與註解說明各種實用的 CSS...

Eva Chen ‧ 2023-09-23

技術 #35 圖片的 1x, 2x, 3x 是什麼？關於網頁上圖片解析度的處理：HTML <img> srcset、CSS image-set() 與 @media resolution

技術 #34 CSS 讓圖片填滿容器的各種方法，以圓形大頭貼為例：object-fit 與 background-size，搭配 aspect-ratio

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

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

技術 #31 CSS 顏色設定：基本的 hex、rgb()、cmyk()、hsl()、hsb() 、hwb() 與明日之星的 lch()、oklch()

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

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

技術 一起來實作響應式網頁設計：探究Bootstrap Day29

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

技術 #26 CSS Container Queries 容器查詢：讓 CSS 的計算以容器自身為依據

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

技術 #24 RWD & CSS Media Queries & iOS Safari 上的經驗談

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

技術 #15 網頁使用的單位大解析：px、rem、em、%、vw、vh (dvh, lvh, svh)、vmin、vmax

技術 #14 Reset CSS！用 Reset.css 或 Normalize.css 變回你該有的樣子

技術 #13 CSS 盒子模型 (Box Model)：border-box & content-box

技術 #12 4 個常見的 CSS 設計方法與命名建議：OOCSS、SMACSS、BEM、RSCSS

技術 一起來實作響應式網頁設計：Box Model Day11

技術 #10 原生的 CSS 巢狀 (CSS Nesting) 終於支援啦！

技術 一起來實作響應式網頁設計：CSS外觀屬性 Day10

技術 #09 原生的 CSS 變數，基本與進階應用

技術 #08 CSS 選擇器總整理！id、class、:nth-child(n)、:not、:where、:is、:has 都難不倒我

技術 #07 CSS 基本語法 & 權重介紹

標記使用者

技術一起來實作響應式網頁設計：探究Bootstrap Day29

技術一起來實作響應式網頁設計：Box Model Day11

技術一起來實作響應式網頁設計：CSS外觀屬性 Day10