回想起之前參觀的草間彌生特展，那些充滿生命力和精神幻想的圓點，讓我想起董志成惟妙惟肖的模仿了「草間彌生」!因此我覺得應該要用純 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、...
最近在「Try 科學」節目裡，看到使用「膠水 ( 聚乙烯醇 ) + 鹼粽粉 ( 碳酸鈉 )」，就可以製作「無毒史萊姆」，想到 N 年前我有用純 CSS 做了一個...
今天繼續編輯網頁內文 1.修改一下最新消息、FB和訂購專線的文字顏色、粗細和大小這裡使用這段程式 css程式 網頁方面圖一圖二 2.製作頁尾的顏色區塊這裡我們先...
CSS 文件結構選擇器是非常基本的選擇器，除了可以利用 HTML 文件結構的親子關係選取元素，也能透過子代選擇器「>」、兄弟選擇器「~」或相鄰兄弟選擇器「...
其實這個 3D 正多面體效果我早在好幾年前就做過，但再次查看自己的教學時，腦中卻只浮現這首歌：「I have a D，I have a DD，Um!! 3D!!...
CSS 屬性選擇器可以根據 HTML 元素的屬性名稱與屬性值，選取特定的元素，然而隨著瀏覽器與 CSS 的進步，甚至可以根據屬性值的字首、字尾或片段來選取元素，...
以前玩 SVG 的時候，就一直在想能不能用路徑的方式，讓 CSS 動畫控制「非 SVG」的形狀，有一天我在麥塊裡面跑著直到膝蓋中了一箭，赫然發現好像可以誒！所以...
ID 選擇器和 Class 選擇器 ( 類別選擇器 ) 也是常見的選擇器，可以選取特定 ID 或 Class 的元素，方便網頁設計師或工程師精準控制樣式，這個單...
高雄人應該都知道，文化中心旁的一新書局，有許多驚喜的捏捏樂舒壓小玩具，某天我正當擠壓得不亦樂乎，手中的正方體掉到了地上，看著這個 Q 彈的正方體，心想不如用純...
今天我們要製作網頁的導覽列就是網頁上半部固定不動有多個選單的區塊 1.首先要加入這段程式來新增導覽列的選項和圖示HTML程式方面在<a href=&quo...
元素選擇器也可以稱作標籤選擇器，是最常見也最簡單的 CSS 選擇器，只要知道了 HTML 元素的標籤名稱，就能夠選取這個元素，並替這個元素套用樣式，這個單元會介...
還記得交響情人夢最後一集在海邊的那個美麗傍晚，野田妹甜甜的笑著，背後橘紅色的天空慢慢變成了紫紅色，我心想，天呀！不知道純的 CSS 可不可以做出這種漂亮的漸層轉...
許多 CSS 的預處理器 ( 例如 Sass、Less ) 都有提供「巢狀結構」的語法 ( Nesting Selector、嵌套 )，透過巢狀結構的處理，在撰...
手牽手，一步兩步三步四步望著天，看星星，一顆兩顆三顆四顆連成線，背對背，默默許下心願，看純的 CSS 是否聽得見，它一定實現～( 有人知道這首歌嗎？ ) 正文...
使用選擇器套用樣式時，除了權重，另外的重要觀念就是「繼承」和「聯集」，繼承表示子元素會自動套用父元素的樣式屬性，聯集則是同一個元素，套用相同權重選擇器的樣式屬性...
oxxo
Bruce
iThome鐵人賽
看影片追技術