在日月潭的文武廟前有一座年梯步道，步道階梯的每一階上刻著 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 來做進度條應該很乾丹吧！沒想到要跟「網頁卷軸」搭配還真的有點不乾丹，所以寫了篇...
「超連結」虛擬類別選擇器主要是針對「a 元素」的進階選擇器，這種選擇器主要有 :link、:visited、:any-link、:target 四種，可以清楚設...
最近電視又播了海底總動員第二集，看到那隻章魚哥跑到哪就變色到哪，真不愧是變色界的霸主！看著牠的變色，讓我覺得如果用純 CSS，讓捲軸拖拉到哪文字就變色到哪，是否...
使用者在瀏覽網頁時，往往會有點擊、懸停之類的操作行為，CSS 也有專門針對這些操作行為的虛擬類別選擇器，例如 :hover、:active、:focus、:fo...
記得前些日子到了台南的林百貨，準備上樓吸收文創氣息時，瞥見電梯的樓層提示，竟然是時鐘型的指針呀！！這時我聽到了迷樣的聲音：「這種放射狀的指針選單，可以用純 CS...
虛擬類別選擇器有許多種，這個單元會介紹「表單輸入」相關的虛擬類別選擇器，例如 :checked、:disabled、:in-range、:valid、:requ...
大家還記得周星馳「破壞之王」打敗斷水流的絕招嗎？當何金銀和大師兄在旋轉幸運輪裡滾動時，不知道他們眼中的畫面是怎樣，是不是和網頁的視差滾動一樣呢？所以我決定做個純...
今天我們要來編輯地址和聯絡我們的分頁 1.先到address.html的檔案裡開始編輯地址分頁的內容這裡我們要放商店的地址和google地圖，首先加入程式<...
虛擬類別選擇器有許多種，而「類型位置」相關的選擇器，會根據「特定類型」的元素在文件結構中的位置狀態進行選取，這種虛擬類別選擇器有 :first-of-type、...
某天經過一片翠綠的草地，看到地上有隻小蟲在蠕動，當牠奮力爬過一張寫著文字的紙條，我突然電 ( 靈 ) 光一閃！可不可以用純 CSS，在超連結的文字下方加上毛毛蟲...
虛擬類別選擇器是根據「元素的狀態」來選取元素，這個單元會介紹透過元素在「文件結構」中的「位置」狀態，進行選取元素的虛擬類別選擇器，這類型的選擇器有 :root、...
oxxo
Bruce
iThome鐵人賽
看影片追技術
看更多