#00 文章目錄 / 參賽前言

Super Easy CSS

參賽前言

本系列文章目標是學習 CSS 基本知識，並且研究 The State of CSS 中值得令人期待新屬性，讓想要學習 CSS 的人也能一起學到新知識，不用再零零散散地去爬文搜尋。此外，還會提及一些前端基本知識、版本控制、開發經驗等必要概念，讓新手對於前端開發有全面的認識。

這 30 天我想做什麼？

這 30 天我的方向主要是：

自我挑戰：研究新穎的 CSS 屬性

每年都有的 The State of CSS 統計，討論了許多新提出的 CSS 屬性（例如：color-mix()、:has、max()、min()、clamp()、container query 等等），我覺得很有趣，卻未曾實際深究，我想趁此機會加以了解。
作為筆記：供自己日後參考
延續上一點，將這些新學到的東西統整起來。再來是，過去在學習的時候有些容易混淆的部分，我希望也能藉此機會一起釐清。
作為紀念：留下些什麼吧！

工作了多年，我想留下個紀念，統整這些我所學到的知識，並且透過分享，在網路上留下一些痕跡。
幫助他人：讓人跨出學習網頁的第一步
除了統整好基礎前端與 CSS 知識外，並且上述所說未來能變得實用，且目前瀏覽器支援度還不差的新屬性（支援的瀏覽器>=3），一併整理在所有基礎知識中。這樣想學的人也能一起學到新知識，不用再零零散散地去爬文搜尋。

本系列文章會以 CSS 為主，HTML、Git 等網頁開發概念為輔。

這個主題適合誰閱讀？

主要目標族群是完全小白新手。無論你是想要學習網頁成為前端工程師，或是想要了解網頁如何運作的 PM 或設計師，都很適合。

我會介紹基礎的前端知識，因為我發現有時在開發上，PM、設計師或是業主，容易因為不懂前端或網頁上的 Domain Knowledge，造成上工作上的溝通成本或重工，而這往往只是缺乏了幾個簡單的概念。
次要則是已經會了，但是想了解 CSS 新屬性的人。

就讓我們開始這 30 天的前端基礎之旅吧！

文章目錄

（這 30 天內持續更新中）

基礎知識 / 共用觀念

版面編排

響應式 RWD

文字

雜記

#30 iT 鐵人賽心路歷程 & 我的寫作方法

顏色

多媒體：圖片/影片/音訊處理

#34 CSS 讓圖片填滿容器的各種方法，以圓形大頭貼為例：object-fit 與 background-size，搭配 aspect-ratio
#35 圖片的 1x, 2x, 3x 是什麼？關於網頁上圖片解析度的處理：HTML srcset、CSS image-set() 與 @media resolution
#36 HTML 影片/音訊操作，用影片當背景，iframe 嵌入 Youtube
#37 CSS 菱形圖片、其他造型圖片/影片（clip-path）

雜記

#00 PART 2！參賽前言 / 文章目錄

繪製漸層與圖形

#?? CSS 基本漸層：線性/圓形/圓錐漸層(CSS background)
#?? CSS background 組合技：多重背景、簡易視差滾動 (iOS 不支援)
#?? CSS 任意形狀漸層 (CSS filter blur)
#?? CSS 幾何背景：條紋、格子、點點、棋盤格背景(CSS background)
#?? CSS 邊框 Border 與其他製作邊框的小技巧：outline、box-shadow、半透明邊框、內邊框 (css secret)
#?? 用 CSS 畫各種形狀：橢圓形、平行四邊形、不規則頁籤、三角形、多邊形、雞蛋、水滴、愛心、星芒、金牛角

特效

#?? CSS 特效：濾鏡 filter, backdrop-filter/ 混色 blend mode
#?? CSS 噪點漸層 (Grainy Gradients) 的各種製作方法：SVG、mix-blend-mode、isolation
#?? CSS Transform
#?? CSS 3D Transform

互動 - Transition

#?? CSS Transition、各種 CSS 偽類應用 (hover 巢狀冒泡效果)
#?? CSS Tab 動畫, tooltip (anchor positioning) (X)

互動 - Animation

#?? CSS Animation (逐格動畫打字動畫動畫暫停)
#?? 網頁渲染動畫的建議 & will-change 的使用時機
#?? 純 CSS 照片淡入淡出動畫
#?? 繪製 CSS 圓餅圖的好幾種方法（含動畫）
#?? CSS 跑馬燈 (?)
#?? CSS @property（CSS Houdini）

互動 - click toggle 行為

#?? 客製化 radio, checkbox 樣式，製作開關按鈕 (Switch Button)
#?? 利用 radio, checkbox 製作網頁選單
#?? 純 CSS 開合（Collapse）效果 Accordion 手風琴

互動 - scroll 行為

#?? CSS Overflow、客製捲軸設定、HTML hash anchor 滾動設定
#?? CSS 捲動提示陰影
#?? 滾動 V.S. CSS Position
#?? CSS scroll 行為設定 (scroll-behavior / scroll snap)
#?? 純 CSS 輪播（Carousel）
#?? 純 CSS 視差捲動 animation-timeline (X)

互動 - 其他

#?? 用 resize 製作 before & after 對比圖

其他

#?? 數學被當掉的我，挑戰 CSS 三角函數，能成功嗎？ sin() cos() (繞著圓周、面對方向永遠正面、改變顏色?)
#?? 偽元素的妙用 ::before、::after：HTML data-...、裝飾性元素、CSS 計數器 counter()

SEO 與其他實用工具

#?? SEO 基本概念：語意化標籤、Open Graph、結構化資料
#?? 多種 SEO 檢測工具：Google Console、GA 分析、Bing Webmaster Tools、Ahrefs
#?? 多種實用前端工具總整理，任務完成，打開百寶箱！

雜記

#?? 真結局，感言
#?? 本系列文章的更新補充紀錄

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

如果你喜歡我的創作，還想看看其他有趣的分享與日常，
可以追蹤我的 IG @im1010ioio，或者是🧋送杯珍奶鼓勵我，謝謝你🥰。

送杯珍奶鼓勵我 (Eva Chen)

#00 文章目錄 / 參賽前言 | Super Easy CSS

寫出好的 CSS，從零開始的前端生涯

Table of contents