虛擬類別選擇器有許多種，這個單元會介紹「表單輸入」相關的虛擬類別選擇器，例如 :checked、:disabled、:in-range、:valid、:requ...
大家還記得周星馳「破壞之王」打敗斷水流的絕招嗎？當何金銀和大師兄在旋轉幸運輪裡滾動時，不知道他們眼中的畫面是怎樣，是不是和網頁的視差滾動一樣呢？所以我決定做個純...
虛擬類別選擇器有許多種，而「類型位置」相關的選擇器，會根據「特定類型」的元素在文件結構中的位置狀態進行選取，這種虛擬類別選擇器有 :first-of-type、...
某天經過一片翠綠的草地，看到地上有隻小蟲在蠕動，當牠奮力爬過一張寫著文字的紙條，我突然電 ( 靈 ) 光一閃！可不可以用純 CSS，在超連結的文字下方加上毛毛蟲...
虛擬類別選擇器是根據「元素的狀態」來選取元素，這個單元會介紹透過元素在「文件結構」中的「位置」狀態，進行選取元素的虛擬類別選擇器，這類型的選擇器有 :root、...
最近在「Try 科學」節目裡，看到使用「膠水 ( 聚乙烯醇 ) + 鹼粽粉 ( 碳酸鈉 )」，就可以製作「無毒史萊姆」，想到 N 年前我有用純 CSS 做了一個...
CSS 文件結構選擇器是非常基本的選擇器，除了可以利用 HTML 文件結構的親子關係選取元素，也能透過子代選擇器「>」、兄弟選擇器「~」或相鄰兄弟選擇器「...
其實這個 3D 正多面體效果我早在好幾年前就做過，但再次查看自己的教學時，腦中卻只浮現這首歌：「I have a D，I have a DD，Um!! 3D!!...
CSS 屬性選擇器可以根據 HTML 元素的屬性名稱與屬性值，選取特定的元素，然而隨著瀏覽器與 CSS 的進步，甚至可以根據屬性值的字首、字尾或片段來選取元素，...
以前玩 SVG 的時候，就一直在想能不能用路徑的方式，讓 CSS 動畫控制「非 SVG」的形狀，有一天我在麥塊裡面跑著直到膝蓋中了一箭，赫然發現好像可以誒！所以...
ID 選擇器和 Class 選擇器 ( 類別選擇器 ) 也是常見的選擇器，可以選取特定 ID 或 Class 的元素，方便網頁設計師或工程師精準控制樣式，這個單...
高雄人應該都知道，文化中心旁的一新書局，有許多驚喜的捏捏樂舒壓小玩具，某天我正當擠壓得不亦樂乎，手中的正方體掉到了地上，看著這個 Q 彈的正方體，心想不如用純...
元素選擇器也可以稱作標籤選擇器，是最常見也最簡單的 CSS 選擇器，只要知道了 HTML 元素的標籤名稱，就能夠選取這個元素，並替這個元素套用樣式，這個單元會介...
還記得交響情人夢最後一集在海邊的那個美麗傍晚，野田妹甜甜的笑著，背後橘紅色的天空慢慢變成了紫紅色，我心想，天呀！不知道純的 CSS 可不可以做出這種漂亮的漸層轉...
許多 CSS 的預處理器 ( 例如 Sass、Less ) 都有提供「巢狀結構」的語法 ( Nesting Selector、嵌套 )，透過巢狀結構的處理，在撰...
手牽手，一步兩步三步四步望著天，看星星，一顆兩顆三顆四顆連成線，背對背，默默許下心願，看純的 CSS 是否聽得見，它一定實現～( 有人知道這首歌嗎？ ) 正文...
使用選擇器套用樣式時，除了權重，另外的重要觀念就是「繼承」和「聯集」，繼承表示子元素會自動套用父元素的樣式屬性，聯集則是同一個元素，套用相同權重選擇器的樣式屬性...
某天看著圍牆上重複且整齊劃一的幾何圖案，突然靈光乍現，這些圖案能不能運用 CSS 來完成呢？多番思量想家鄉，腦中靈光忽閃亮，漸層色彩鋪成景，花樣背景美非常。 (...
如果當 CSS 選擇器選取元素時，發生「多個選擇器選擇到同一個元素」的狀況，就會根據「權重 Specificity」來判斷這個元素套用樣式的「優先順序」，這篇教...
最近南部陰雨綿綿，期盼一切都好，望著窗外的雨將外牆染成了漸層的灰色，我想不如就來用 CSS 做個漸層色邊框吧 ( 一點關係也沒有 )，其實主要是接觸漸層色之後，...
CSS是什麼 CSS（Cascading Style Sheets 階層式樣式表）用來為HTML或XML添加樣式。CSS 不能單獨運作，它必須配合 HTML 或...
CSS 選擇器 ( Selector ) 是 CSS 的核心功能，也是使用或學習 CSS 時最重要的技巧，透過特定的選擇器的規則，就能快速地找出某些元素，並針元...
記得當時在玩物聯網時，第一眼看到「七段顯示器」，就想要用 CSS 手刻這個效果，後來還真的用虛擬元素把它做了出來，隨著年齡增長，再次看到這個效果時，又手癢把它拿...
因為 CSS 太容易上手，使用者在 ID 和 Class ( 類別 ) 的命名上，時常發生名稱不一致或隨便取名的狀況，這種沒有系統性的命名，往往造成後續不容易理...
還記得第一次看到網頁的「跑馬燈」效果，是我大學時期的計算機概論課，使用 front page 內建的效果功能，當時因為瀏覽器不像現在進步 ( Netscape、...
CSS 雖然不能真正算是程式語言，但也是一種「樣式語言」，因此也會有撰寫的語法規則和結構，這個單元會介紹 CSS 的語法規則和結構，只要掌握基本要領，就能寫出容...
好幾年前第一次看到 Google 圓形翻頁載入動畫時，就讓我下定決心，一定要用純 CSS 把它給做出來！所以當時就使用了 CSS 動畫和變形，真的用純 CSS...
今天的教學影片是「開始使用 CSS」，因為 CSS 需要搭配 HTML 共同使用，所以需要一些簡單的步驟才能執行，這個單元介紹使用本機環境、線上編輯器來編輯與執...
這系列的第一個效果就獻給「圓餅圖」了！記得第一次接觸圓餅圖，是在 PowerPoint 裡面用圖表的方式產生，當我轉職為前端工程師之後，就不斷嘗試要用各種框架在...
今天的教學影片是「認識 CSS」，主要介紹什麼是 CSS、相關發展歷程、特色以及對響應式設計的影響。最後還會用一個簡單的範例，實際撰寫第一支 CSS 程式。 影...
oxxo
joanne0119
iThome鐵人賽
看影片追技術