iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

Super Easy CSS,極度簡單 PART 2!寫出漂亮的 CSS 系列

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

鐵人鍊成 | 共 30 篇文章 | 8 人訂閱 訂閱系列文 RSS系列文
DAY 1

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

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

2024-09-15 ‧ 由 Eva Chen 分享
DAY 2

#36 HTML <video> 用影片當背景,使用 iframe 嵌入 Youtube自動播放/ IG/ TikTok/ X (Twitter) 影片

在設計行銷網頁時,放入漂亮的影片是最輕鬆達到吸睛效果的方法之一,例如:把影片放至滿版當成背景,上面再壓上標題與文字,畫面就會很豐富,這是很常見的網頁設計方式。...

2024-09-16 ‧ 由 Eva Chen 分享
DAY 3

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

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

2024-09-17 ‧ 由 Eva Chen 分享
DAY 4

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

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

2024-09-18 ‧ 由 Eva Chen 分享
DAY 5

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

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

2024-09-19 ‧ 由 Eva Chen 分享
DAY 6

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

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

2024-09-20 ‧ 由 Eva Chen 分享
DAY 7

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

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

2024-09-21 ‧ 由 Eva Chen 分享
DAY 8

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

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

2024-09-22 ‧ 由 Eva Chen 分享
DAY 9

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

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

2024-09-23 ‧ 由 Eva Chen 分享
DAY 10

#44 CSS 邊框 border 與各種花式邊框的小技巧:borde-image、outline、box-shadow

前幾篇我們使用CSS 邊框 border 畫了很多圖形,但是好像還沒有正式來好好畫邊框。XD今天,讓我們來研究邊框與各種花式邊框。 ↓ 今日學習重點 ↓...

2024-09-24 ‧ 由 Eva Chen 分享