@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 媒體查詢可以定義判斷不同媒體的條件，...
W3C 在 2012 年 已經制定了 CSS 的變數規範，目前幾乎所有瀏覽器都支援 CSS 變數語法，透過變數的應用，CSS 程式碼將會變得更容易閱讀、管理和維...
最近股票一直漲，看著電視牆立體的跑馬燈，有股沒有上到車的不悅一直卡在心裡，一氣之下乾脆用純 CSS 做個立體文字跑馬燈，做完之後怨氣應該也會消去一半吧～ 這個效...
夜深人靜，又聽了茄子蛋的「浪流連」，不知道他們什麼時候能再復出，MV 裡男主角被掏空的心何時才能平復，我已經決定，用純 CSS 做個「空心」的「波浪」，薰莫閣食...
CSS 有一些特殊的樣式屬性，例如 all、appearance 等，這些樣式屬性並不負責外觀，而是處理繼承特性或強制隱藏元素預設樣式，這個單元會介紹這些樣式屬...
除了常見的排版方式，部分的 CSS 樣式屬性也可以透過「位置名稱」進行特定位置的定位或對齊，也會利用「時間單位」設定動畫漸變的時間，這個單元會介紹如何使用 CS...
最近玩 UNO 的手氣一直不太順，牌常常多到可以變成一把扇子，每當懊惱著運氣不好，就會看著 UNO 牌面組成的漂亮漸層色發呆，心想用純 CSS 是否能做出漸層色...
從小到大三國演義看過 N 次，三國無雙也玩過 N 次，只要看到小喬，我總會想起「小橋流水唏哩哩」這句話？？為了小喬和周瑜，也為了萌萌！我決定做個純 CSS 流動...
長度單位是 CSS 裡使用頻率最高的單位，舉凡寬高、間距、字體大小甚至濾鏡效果，都會使用 px、pt、cm 之類的絕對長度單位，或使用百分比 %、em、rem...
CSS 的樣式屬性除了長度、顏色或角度單位，有些時候也會使用一些「全域關鍵字」或「文字」作為屬性值，這個單元會介紹 CSS 提供的全域關鍵字 inherit、i...
今天去逛了華山的哆啦 A 夢特展，裡面有個動畫效果是哆啦 A 夢在昏暗的房間裡用縮小燈照了哆啦 B 夢 ( 哆啦美 ) 和大雄，所以我就決定也來做個純 CSS...
想起「少年賭神在賭桌上翻開撲克牌的一角，後面神眼朱老九偷看牌」的橋段，那種翻不壞的撲克牌真令我著迷，心想如果用純 CSS 來做個翻牌效果，當年的賭神應該就是我了...
CSS 提供了非常多樣的選擇器，這些選擇器不僅可以單獨使用，也可以組成群組的形式，或將不同的選擇器組合串連成新的選擇器，這個單元會介紹群組選擇器和組合選擇器的用...
oxxo
iThome鐵人賽
看影片追技術