通常 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 提供了非常多樣的選擇器，這些選擇器不僅可以單獨使用，也可以組成群組的形式，或將不同的選擇器組合串連成新的選擇器，這個單元會介紹群組選擇器和組合選擇器的用...
回想起之前參觀的草間彌生特展，那些充滿生命力和精神幻想的圓點，讓我想起董志成惟妙惟肖的模仿了「草間彌生」!因此我覺得應該要用純 CSS 做個圓點效果，致敬一下草...
所謂的「虛擬元素」也稱為「偽元素」，表示不存在於真實的 HTML 元素，可能是「想像的元素」或根據現有元素進行「想像分類」，而「虛擬元素選擇器」就是專門針對這些...
不知道大家有看過「少林足球」嗎？我最喜歡輕功水上飄六師弟飛到天上頂球下來的那一幕，所以我決定用純 CSS 做出六師弟在水上飄的時候產生的「水波」！只可惜要做出六...
這個單元會介紹一些比較少用的虛擬類別選擇器，例如 :dir()、:lang()、:modal、:scope 等，這些選擇器通常是針對瀏覽器語系、文字對齊方向或一...
這個單元會介紹「邏輯判斷」虛擬類別選擇器，這個選擇器主要有 :not()、:is() 和 :has() 三種，透過邏輯判斷的規則，就能從複雜的結構中挑選出符合規...
邊吃丹丹邊看 Youtube 的時候，突然注意到影片的進度條，心想用個純 CSS 來做進度條應該很乾丹吧！沒想到要跟「網頁卷軸」搭配還真的有點不乾丹，所以寫了篇...
oxxo
iThome鐵人賽
看影片追技術