透過網頁呈現文字時，常需要讓文字進行「對齊」，這個單元會介紹使用使用 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...
CSS 的 backdrop-filter 是和 filter 影像濾鏡類似的樣式屬性，有別於 filter 是針對「元素」，backdrop-filter 是...
CSS 的 backdrop-filter 是和 filter 影像濾鏡類似的樣式屬性，有別於 filter 是針對「元素」，backdrop-filter 是...
過去 CSS 要使用模糊、對比度、亮度等影像濾鏡函式時，需要加上「-webkit-」開頭識別名稱，隨著瀏覽器的進步，只要使用 filter 樣式屬性搭配 blu...
CSS 除了可以使用「單一顏色」設定樣式，也能使用「漸層色」函式來產生線性漸層、放射漸層或重複漸層等色彩效果，這個單元會介紹「漸層色」相關的 CSS 函式，例如...
過去如果要根據現有顏色進行調整，往往需要依賴 CSS 預處理器 ( SASS、LESS ) 或手動管理大量的自訂顏色，但隨著 CSS 技術的發展，目前已經可以開...
CSS 除了可以利用十六進位色碼和顏色名稱設定顏色，也能使用許多「色彩模型」的函式來定義指定顏色，這個單元會介紹「色彩模型」相關的 CSS 函式，例如 rgb(...
由於 CSS 負責控制網頁的「樣式」，因此「設定頁面或元素的顏色」主要也是 CSS 負責處理，這個單元會介紹 CSS 最常使用的十六進位色碼的色彩單位，以及各種...
除了「形狀」相關的 CSS 函式可以搭配 CSS 的動畫或裁切效果，也可以透過「路徑」相關 CSS 函式 path()，繪製類似 SVG 曲線的效果，讓裁切的形...
進行 CSS 的動畫或裁切效果時，有時會用到「形狀」或「線段」相關 CSS 函式，這些函式有 circle()、rect()、ellipse()、ray()、i...
雖著 CSS 的版本演進，也陸續支援動態取得元素屬性等好用的功能，這個單元會介紹「文字與清單計數」相關的 CSS 函式，例如 attr()、url()、coun...
oxxo
Eva Chen
iThome鐵人賽
看影片追技術