iT邦幫忙

css相關文章
共有 1809 則文章

技術 ( Day 61 ) CSS 使用 Icon Font 圖示字體

Icon Font 是一種使用字體方式呈現向量圖示的網頁技術,使用 Icon Font 可以大幅減少網頁對於圖片載入的依賴,並可靈活的縮放各種圖示,這篇教學會介...

鐵人賽 Modern Web DAY 15

技術 #78 CSS + SVG 仿 Apple iOS26 液態玻璃(Liquid Glass)效果

iOS 26 的液態玻璃(Liquid Glass)效果,今天我們來試試看網頁能不能做到。 這個效果的核心概念是「模糊背景」再加上「不規則扭曲」,就像透過一杯正...

鐵人賽 Vue.js DAY 29

技術 在 Vue 過氣前要學的第二十九件事 - 先用飛雷神做個標記

前言 <Teleport> 是 Vue3 的內置組件,用以將 DOM 內容傳遞到指定的地方,而不受限於某個父元素底下,無法使用相關功能。 舉一個小...

技術 ( Day 60 ) CSS color font 彩色字體

在現代網頁設計中,文字已經不再侷限於單一色彩。透過 Color Font ( 彩色字型 ),開發者可以控制彩色文字的各種顏色色盤,增添視覺趣味與品牌識別度,這個...

鐵人賽 Modern Web DAY 14

技術 #77 實作網頁深色模式及淺色模式必備的 CSS 語法:color-scheme 與 light-dark()

以前我們介紹過用 CSS Media Queries 的 prefers-color-scheme 讓網頁打開時預設切換淺色/深色模式,但是居然沒有講到最基礎的...

鐵人賽 Modern Web DAY 13

技術 #76 用 CSS 解決文字上下多出來的神秘空間:text-box-trim / text-box-edge

你是不是也常常爲了文字上下多出來的神秘空白間距感到困擾,導致按鈕裡的文字、或是標題跟內文之間的距離怎麼調都感覺不太對勁? 在過去,每個字型本身都會包含一些內建的...

鐵人賽 Modern Web DAY 12

技術 #75 用 CSS 解決網頁的「標題不平衡」與「孤字不成行」: text-wrap: balance / pretty

在中文中有所謂「孤字不成行,單行不成頁」的寫作排版概念,意思是說「一個字(不含標點號)不能成為一行,一句話不能成為一頁」,因為這樣除了很醜外,也容易讓人看不懂這...

技術 ( Day 58 ) CSS 文字自動分欄

在編排處理大量文字時,有時會使用「不同欄位」來讓版面更為簡潔,透過 CSS 的 columns、column-count、column-width、column...

技術 ( Day 59 ) CSS 生成內容 content、引號 quotes

CSS 的「生成內容 content」是相當特殊的樣式屬性,這兩個樣式只能套用在特定選擇器,也不會負責「樣式」,而是會產生額外元素的「內容」,這個單元會介紹生成...

技術 ( Day 57 ) CSS 文字書寫方向 ( 垂直、水平 )

通常在瀏覽網頁時,都是採用「水平」的文字書寫方向,然而文字的方向不僅會影響閱讀,還會影響到對齊的方式,這個單元會透過 CSS 的 writing-mode、te...

鐵人賽 Modern Web DAY 11

技術 #74 CSS 也能控制作用域了!@scope 語法

當 CSS 越寫越龐大,樣式一不小心就互相打架了,怎麼辦呢?今天,我們來學一個 CSS 的新功能:@scope,它就像是為你的 CSS 加上了結界,讓你能更精準...

技術 ( Day 56 ) CSS 文字水平對齊、垂直對齊

透過網頁呈現文字時,常需要讓文字進行「對齊」,這個單元會介紹使用使用 CSS 的 text-align、text-align-last 和 vertical-a...

鐵人賽 Modern Web DAY 10

技術 #73 CSS :nth-child 的新寫法::nth-child of S (N of Selector)

在寫 CSS 時,你是否也曾對 :nth-child 又愛又恨呢?它雖然強大,但有時在較複雜的 HTML 結構中,要選到對的東西,有時就只差那麼一點點… 為了解...

技術 ( Day 55 ) CSS 文字行高、文字縮排

透過網頁顯示具有大量文字的文章時,通常都會設定文字的「行高」或「縮排」,這個單元會介紹「什麼是行高」,以及運用 line-height 和 text-inden...

鐵人賽 Modern Web DAY 9

技術 #72 CSS 偽元素的進階用法:用 ::before 與 ::after 做 RWD 表格 & 客製化樣式的序號清單 (ol, oder list)

上一篇我們學到了 ::before 與 ::after 的基本用法,像是輕鬆添加引號、點綴裝飾性內容、清除浮動,甚至是製作小圖示。 這次,讓我們來探索更進階的用...

技術 ( Day 54 ) CSS 定義文字空白、定義 Tab 大小

網頁顯示文字時,預設會將連續的多個空白合併為單一空白,如果要顯示連續空白或使用 tab 定位,甚至是設定「強制不換行」的效果,就必須使用 CSS 的樣式屬性進行...

鐵人賽 Modern Web DAY 8

技術 #71 CSS 偽元素的妙用:「::before」 與「::after」的常見用法

之前寫的文章,雖然有提到過,但是居然沒有好好地解釋過 CSS 的偽元素(Pseudo),也就是 ::before 與 ::after。這超級實用的,怎麼能沒有呢...

鐵人賽 Modern Web DAY 0

技術 CSS 進化史:從 BEM 到 CSS-in-JS 到 Tailwind 的現代化選擇

系列文章: 前端工程師的 Modern Web 實踐之道 - Day 6預計閱讀時間: 10 分鐘難度等級: ⭐⭐⭐☆☆ 🎯 今日目標 在前一篇文章中,我們...

技術 ( Day 53 ) CSS 文字換行

進行網頁排版時,常會遇到「需要文字換行」或「不想要文字換行」的狀況,這個單元會介紹 CSS 裡控制換行的樣式屬性 word-break、line-break、o...

鐵人賽 Modern Web DAY 7

技術 #70 純 CSS 也能做滾動動畫了!animation-timeline 讓東西邊滾邊動

你一定看過那種很酷的網頁:當你向下滾動時,背景圖片移動得比前景文字慢,或者某個元素會隨著滾動淡入、旋轉、放大,創造出引人入勝的深度和故事感。 這種效果,我們稱之...

技術 ( Day 52 ) CSS 特殊文字樣式

這個單元會介紹 CSS 裡的一些針對「特殊字型」或部分瀏覽器特有的樣式,例如 font-stretch、font-kerning、font-smooth、fon...

鐵人賽 Vue.js DAY 21

技術 在 Vue 過氣前要學的第二十一件事 - 小孩才做選擇 ( 上 ) / Tailwind v4

前言 先說! 我覺得版上已經有很多寫得非常好的 Tailwind 系列文章例如 排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!或 Ta...

技術 ( Day 51 ) CSS 實用文字樣式

除了常見的文字樣式,CSS 也有一些相當實用的文字樣式,例如 text-overflow、text-transform、text-combine-upright...

鐵人賽 Modern Web DAY 6

技術 #69 CSS scroll snap 做簡單的純 CSS 輪播

以前,要做出輪播的「滾動吸附」的效果,十之八九都需要依賴 JS 套件(像是 fullPage.js 、Swiper.js 或 Slick.js)。這些工具雖然強...

鐵人賽 Modern Web DAY 5

技術 #68 CSS overscroll-behavior:解決滾動穿透問題 & 阻止手機瀏覽器下拉重整

你有沒有遇過這種情況?網頁跳出一個對話框,你想滑動看看裡面的內容,結果才滑到底,整個後面的網頁竟然也跟著動了起來! 或是,你在手機上瀏覽一個很酷的 Web Ap...

技術 ( Day 50 ) CSS 常用文字樣式

一個吸引目光網頁設計除了視覺設計與配色,「文字樣式」也是非常重要的一部分,這個單元會介紹 CSS 裡常用的文字樣式,例如 color、font-style、fo...

鐵人賽 Modern Web DAY 4

技術 #67 CSS :target 應用:純 CSS 光箱、純 CSS Tab 頁籤

上一篇我們提到 CSS 的 :target 的偽類,可以針對 HTML 元素是否為目標狀態而去調整樣式。所以,如果延伸想一想,有許多 UI 都是會有狀態的,其實...

技術 ( Day 49 ) CSS font-size 設定文字尺寸

這個單元會介紹 CSS 的樣式屬性:font-size,font-size 主要功能就是「設定文字尺寸」,透過絕對尺寸單位 ( px、pt、in 等 ) 與相對...

鐵人賽 Modern Web DAY 4

技術 Day4|HTML/CSS/JavaScript 的三角關係

網頁是什麼? 學網頁設計的時候,常常會聽到三個名字:HTML、CSS、JavaScript。它們是構成網頁的三大元素: HTML 網頁的結構。 CSS 網...

技術 ( Day 48 ) CSS 使用外部字型

除了使用系統預設字型,進行網頁設計時也常常會使用更多漂亮的「外部字型」,這個單元會介紹 Google Fonts 外部字型服務,也會示範透過 CSS link...