除了常見的文字樣式，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...
CSS 雖然只是樣式語言，但也提供了一些好用的函式，讓使用者能更有彈性的設計畫面，這個單元會介紹「數學計算」相關的 CSS 函式，例如 calc()、min()...
終於「又」完成了連續三十天的「純純的」發文！ 這個系列（不含第一天和今天）總共有 34 篇精選 CSS 效果，每天一篇，連續 34 天， 和以往不同的是，這次的...
@font-face 是 CSS 裡「定義字型」的規則 ( 功能 )，除了可以自訂字型名稱，更能將指定的字型和樣式，綁定到自訂的字型名稱，讓字型的運用更佳方便彈...
在小時候那個沒有手機的年代，最喜歡電子表的「碼表」功能，三不五時就會跟同學玩起「最接近一秒」的遊戲 ( 現在應該還是有人在玩 )，為了實現童年的回憶，我用純 C...
通常清單的計數器會按照預設格式產生對應的數值或符號，如果進一步透過「@counter-style」定義計數器規則，就能讓計數器產生更多變化，大幅增加計數器的彈性...
還記得那年 NASA 看到隕石即將撞上地球，科學家們努力計算著數據避免碰撞，這時突然出現了 Windows 更新的進度條 ... 天呀！看著進度條，心想不如用純...
如果這都不算愛，我又什麼好悲哀，謝謝你的慷慨，是我自己活該，OH～NO～ 你喜歡那一版？張學友版本還是伍佰版本？我自己最喜歡純 CSS 的版本，就是那個用純 C...
開發網頁時，隨著架構複雜度的增加，管理 CSS 樣式也變得更加困難。為了避免樣式互相污染和提升維護性，CSS 加入了 @scope 規則定義，透過「作用域」的概...
通常 CSS 都是設定用瀏覽器觀看的網頁樣式，不過當有列印網頁需求時，這些樣式往往會發生錯位等不如預期的狀況，因此如果有列印需求，除了使用 @media 進行媒...
iThome鐵人賽
看影片追技術
看更多
oxxo
Eva Chen