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 是否聽得見，它一定實現～( 有人知道這首歌嗎？ ) 正文...
使用選擇器套用樣式時，除了權重，另外的重要觀念就是「繼承」和「聯集」，繼承表示子元素會自動套用父元素的樣式屬性，聯集則是同一個元素，套用相同權重選擇器的樣式屬性...
某天看著圍牆上重複且整齊劃一的幾何圖案，突然靈光乍現，這些圖案能不能運用 CSS 來完成呢？多番思量想家鄉，腦中靈光忽閃亮，漸層色彩鋪成景，花樣背景美非常。 (...
如果當 CSS 選擇器選取元素時，發生「多個選擇器選擇到同一個元素」的狀況，就會根據「權重 Specificity」來判斷這個元素套用樣式的「優先順序」，這篇教...
最近南部陰雨綿綿，期盼一切都好，望著窗外的雨將外牆染成了漸層的灰色，我想不如就來用 CSS 做個漸層色邊框吧 ( 一點關係也沒有 )，其實主要是接觸漸層色之後，...
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 ( OXXO.STUDIO )，今年第 N 次參戰 iT 邦幫忙鐵人賽，我決定選擇了一個自己最熟悉、也最有熱情的主題：「關於那些有趣的...
本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) 今天我們要來製作一個捲動提示陰影效果：在...
本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) 今天我們要客製化瀏覽器捲軸的樣式， 捲軸...
題目 CSS Challenge Day15 上傳檔案及各種狀況的判斷介面 上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodeP...
題目 CSS Challenge Day15 上傳檔案及各種狀況的判斷介面 上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodeP...
本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) 當我們在進行網頁設計時，常常要處理當內容...
oxxo
Bruce
Eva Chen
hitomiyang
iThome鐵人賽
看影片追技術