Icon Font 是一種使用字體方式呈現向量圖示的網頁技術，使用 Icon Font 可以大幅減少網頁對於圖片載入的依賴，並可靈活的縮放各種圖示，這篇教學會介...
iOS 26 的液態玻璃（Liquid Glass）效果，今天我們來試試看網頁能不能做到。 這個效果的核心概念是「模糊背景」再加上「不規則扭曲」，就像透過一杯正...
在現代網頁設計中，文字已經不再侷限於單一色彩。透過 Color Font ( 彩色字型 )，開發者可以控制彩色文字的各種顏色色盤，增添視覺趣味與品牌識別度，這個...
以前我們介紹過用 CSS Media Queries 的 prefers-color-scheme 讓網頁打開時預設切換淺色/深色模式，但是居然沒有講到最基礎的...
你是不是也常常爲了文字上下多出來的神秘空白間距感到困擾，導致按鈕裡的文字、或是標題跟內文之間的距離怎麼調都感覺不太對勁？ 在過去，每個字型本身都會包含一些內建的...
在中文中有所謂「孤字不成行，單行不成頁」的寫作排版概念，意思是說「一個字（不含標點號）不能成為一行，一句話不能成為一頁」，因為這樣除了很醜外，也容易讓人看不懂這...
在編排處理大量文字時，有時會使用「不同欄位」來讓版面更為簡潔，透過 CSS 的 columns、column-count、column-width、column...
CSS 的「生成內容 content」是相當特殊的樣式屬性，這兩個樣式只能套用在特定選擇器，也不會負責「樣式」，而是會產生額外元素的「內容」，這個單元會介紹生成...
通常在瀏覽網頁時，都是採用「水平」的文字書寫方向，然而文字的方向不僅會影響閱讀，還會影響到對齊的方式，這個單元會透過 CSS 的 writing-mode、te...
當 CSS 越寫越龐大，樣式一不小心就互相打架了，怎麼辦呢？今天，我們來學一個 CSS 的新功能：@scope，它就像是為你的 CSS 加上了結界，讓你能更精準...
透過網頁呈現文字時，常需要讓文字進行「對齊」，這個單元會介紹使用使用 CSS 的 text-align、text-align-last 和 vertical-a...
在寫 CSS 時，你是否也曾對 :nth-child 又愛又恨呢？它雖然強大，但有時在較複雜的 HTML 結構中，要選到對的東西，有時就只差那麼一點點… 為了解...
透過網頁顯示具有大量文字的文章時，通常都會設定文字的「行高」或「縮排」，這個單元會介紹「什麼是行高」，以及運用 line-height 和 text-inden...
上一篇我們學到了 ::before 與 ::after 的基本用法，像是輕鬆添加引號、點綴裝飾性內容、清除浮動，甚至是製作小圖示。 這次，讓我們來探索更進階的用...
網頁顯示文字時，預設會將連續的多個空白合併為單一空白，如果要顯示連續空白或使用 tab 定位，甚至是設定「強制不換行」的效果，就必須使用 CSS 的樣式屬性進行...
之前寫的文章，雖然有提到過，但是居然沒有好好地解釋過 CSS 的偽元素（Pseudo），也就是 ::before 與 ::after。這超級實用的，怎麼能沒有呢...
進行網頁排版時，常會遇到「需要文字換行」或「不想要文字換行」的狀況，這個單元會介紹 CSS 裡控制換行的樣式屬性 word-break、line-break、o...
你一定看過那種很酷的網頁：當你向下滾動時，背景圖片移動得比前景文字慢，或者某個元素會隨著滾動淡入、旋轉、放大，創造出引人入勝的深度和故事感。 這種效果，我們稱之...
這個單元會介紹 CSS 裡的一些針對「特殊字型」或部分瀏覽器特有的樣式，例如 font-stretch、font-kerning、font-smooth、fon...
除了常見的文字樣式，CSS 也有一些相當實用的文字樣式，例如 text-overflow、text-transform、text-combine-upright...
以前，要做出輪播的「滾動吸附」的效果，十之八九都需要依賴 JS 套件（像是 fullPage.js 、Swiper.js 或 Slick.js）。這些工具雖然強...
你有沒有遇過這種情況？網頁跳出一個對話框，你想滑動看看裡面的內容，結果才滑到底，整個後面的網頁竟然也跟著動了起來！ 或是，你在手機上瀏覽一個很酷的 Web Ap...
一個吸引目光網頁設計除了視覺設計與配色，「文字樣式」也是非常重要的一部分，這個單元會介紹 CSS 裡常用的文字樣式，例如 color、font-style、fo...
上一篇我們提到 CSS 的 :target 的偽類，可以針對 HTML 元素是否為目標狀態而去調整樣式。所以，如果延伸想一想，有許多 UI 都是會有狀態的，其實...
這個單元會介紹 CSS 的樣式屬性：font-size，font-size 主要功能就是「設定文字尺寸」，透過絕對尺寸單位 ( px、pt、in 等 ) 與相對...
除了使用系統預設字型，進行網頁設計時也常常會使用更多漂亮的「外部字型」，這個單元會介紹 Google Fonts 外部字型服務，也會示範透過 CSS link...
昨天我們讓很長內容的滾動範圍可以用 hash 連結滑順地滾動，今天我們要進一步優化它。 當網頁內容很長，使用者滾來滾去時可能會搞不清楚目前位置，所以今天我要來用...
前幾篇我們已經學會怎麼設定 CSS 的滾動範圍，現在我們要再對滾動的操作行為做一些很簡單的設定，就是：滾動時的行為 scroll-behavior 。 本篇同...
定義字型是網頁排版中十分重要卻也常被忽略的功能，這個單元會介紹如何透過 CSS 的 font-family 使用通用字型，包含 serif ( 襯線字型 )、s...
參賽前言 今年是第三次參加鐵人賽，前兩年參加時共寫了 64 篇文章： Super Easy CSS，極度簡單（主要偏向 CSS 與前端基礎） Super...
oxxo
Eva Chen
iThome鐵人賽
看影片追技術