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 進行媒...
還記得「包龍星」和「方唐鏡」在公堂之上的最後一戰，隨著方唐鏡跳了出去又跳了進來，我的滑鼠也跟著按了下去又放了開來，原來是純 CSS 做成「可以點擊展開，又點擊收...
當 CSS 越寫越複雜，有時就需要將 CSS 根據特定功能拆分成獨立的檔案，如果要載入多個 CSS，除了使用 HTML 的方式載入，也可以透過 CSS 的 @i...
俗話說「江湖在走，義氣要有」，也有人說「社會在走，行情要有」，但網頁設計師卻說「滑鼠在走，hover 要有」，聽到這句話我恍然大悟，是時候用純 CSS 來設計按...
CSS 的 @layer 是一個可以利用類似「圖層」的方式，去調整「選擇器權重」的 At 規則，這個單元除了會介紹 @layer 的用法，還會用範例呈現 @la...
雖然阿諾很老了，但他的魔鬼終結者仍然是經典中的經典！每次想到他被液態金屬人插爆的當下，眼中竟然還是充滿著愛意，就讓我不禁想要用純純的 CSS 做出類似的效果.....
CSS 的 @property 可以讓使用者「自訂屬性值」的 At 規則，使用方式跟「CSS 變數」非常類似，可以當作是一種「新型態的 CSS 變數」，定義屬性...
雖然變形金剛演了好幾部曲，但我只看到第二部曲 ( 還我梅根福克斯 )，看到變形金剛劈哩啪啦的變形，心想不如用純 CSS 做個 ICON 的變形好了！凡事起頭難，...
CSS 的 @container 容器查詢和 @media 媒體查詢類似，都可以在判斷出指定條件時，針對特定的元素套用特定的樣式，但有別於 @media 是根據...
某天經過公園看到小朋友在玩翹翹板，心血來潮也跑過去問說「可不可一起玩？」，他們問說「大哥哥 ( 羞 ) 為什麼想要一起玩？」我說「因為我想要用純 CSS 做出這...
在日月潭的文武廟前有一座年梯步道，步道階梯的每一階上刻著 365+1 天的日期以及當天出生的名人，當我氣喘吁吁爬著階梯時，心想不如用純 CSS 來處理這麼累人的...
如果要在不同解析度的螢幕上瀏覽同一個網頁，常常會透過 CSS 的方式製作 RWD 響應式網頁，而 CSS 的 @media 媒體查詢可以定義判斷不同媒體的條件，...
oxxo
iThome鐵人賽
看影片追技術