iT邦幫忙

css教學相關文章
共有 403 則文章
鐵人賽 Modern Web DAY 11

技術 #45 CSS 中的半透明遮罩 mask,實現各種模糊邊緣特效

前幾篇寫到 CSS clip-path 時,可以剪裁任何 HTML 的元素,包含色塊、圖片、影片,但是他只限於精準的剪裁線條,萬一今天要有更複雜而且半透明的剪...

鐵人賽 Modern Web DAY 10

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

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

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 12

技術 Day 12 - CSS Challenge #7:Notification、Menu、Search(下)

題目 CSS Challenge Day7 Notification Card 題目除了基本 Notification Card介面樣式以外,還有兩個重要...

鐵人賽 Modern Web DAY 11

技術 Day 11 - CSS Challenge #7:Notification、Menu、Search(中)

題目 CSS Challenge Day7 Notification Card 題目除了基本 Notification Card介面樣式以外,還有兩個重要...

鐵人賽 Modern Web DAY 10

技術 Day 10 - CSS Challenge #7:Notification、Menu、Search(上)

題目 CSS Challenge Day7 Notification Card 題目除了基本 Notification Card 介面樣式以外,還有兩個重...

鐵人賽 Modern Web DAY 7

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

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

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 7

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

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

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 4

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

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

鐵人賽 Modern Web DAY 21

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

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

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 4

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

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

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web DAY 2

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

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

鐵人賽 Modern Web DAY 1

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

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

鐵人賽 Modern Web

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

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

鐵人賽 Modern Web

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

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

鐵人賽 Modern Web DAY 30

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

本篇同步發表於 我的部落格 ↓ 今日學習重點 ↓ 了解 CSS 的 text-shadow 與其應用 了解製作文字外框的方法 了解如何製作...

鐵人賽 Modern Web DAY 29

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

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

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 Modern Web DAY 27

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

前幾篇我們學習了 Media Queries,是針對裝置的屬性、大小變化;現在,CSS 新推出了 Container Queries(容器查詢)讓我們可以針對...

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 25

技術 Day25 有料的 CSS 漢堡選單

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