Tag: css

All the articles with the tag "css".

• [CSS] 使用 aspect-ratio 讓你在嵌入 youtube, google map 等內容時做到 RWD

  Published:Feb 7, 2025 |  at 08:28 AM (3 min read)

  不知道大家是否曾經遇過這樣的問題，當你在網頁嵌入 youtube 影片或是 google 地圖時，你會發現取到的程式碼都是固定寬高，造成在不同裝置寬度上沒辦法很好的 RWD。這時候就可以使用 CSS 的 aspect-ratio 來解決這個問題。

• [css] 如何實作出半圓形的陰影，或是僅部分的 box-shadow？

  Published:Nov 9, 2024 |  at 06:54 AM (1 min read)

  你是否有遇到過需要在元件的一部分加上陰影，而不是整個元件？

• [css] 如何使用 CSS 判斷 Dark/Light 模式

  Published:Jul 19, 2024 |  at 10:45 AM (4 min read)

  透過 CSS 的 `prefers-color-scheme` 來判斷使用者的 Dark/Light 模式

• [css] collapsing margin 是什麼？

  Published:Jun 25, 2023 |  at 08:40 AM (3 min read)

  Collapsing margin 是什麼？

• [css] position: sticky

  Published:Jun 3, 2023 |  at 02:26 AM (3 min read)

  介紹 CSS 的 position: sticky

• [css] isolation

  Published:May 13, 2023 |  at 01:34 PM (1 min read)

  介紹一個不常見的 css 屬性 `isolation`，可以簡單地幫你建立新的 stacking context

• [css] 你從未瞭解的 z-index / stacking context

  Published:May 12, 2023 |  at 01:06 PM (6 min read)

  你從未瞭解的 z-index / stacking context

• [css] 讓 CSS 動畫重新開始

  Published:Jun 11, 2020 |  at 08:44 AM (2 min read)

  前一陣子在做 CSS 動畫的時候，遇到了特定情況會希望動畫重新開始的狀況

• [css] initial/inherit/unset 有什麼差別呢?

  Published:May 25, 2020 |  at 05:22 AM (3 min read)

  常寫 CSS 應該都經常遇到樣式被覆蓋後不如預期希望回復為初始值等等的問題

• 用 CSS 實現 Tracking

  Published:Apr 28, 2020 |  at 10:53 AM (1 min read)

  最近看到幾個使用 CSS 做追蹤的小技巧，在這也記錄一下 XD