![[筆記] 用 media query 來撰寫僅支援 hover 的樣式](https://smlpoints.com/wp-content/uploads/css-ul-li-align-center-1.jpg "[筆記] 用 media query 來撰寫僅支援 hover 的樣式")
[筆記] 用 media query 來撰寫僅支援 hover 的樣式
CSS 的 Media Query 可用於判別 hover 的裝置，進而做出樣式效果。由於手機等行動裝置會模擬 hover 效果，需要額外點擊其他地方在能將 h Read More …
標籤: CSS
![[筆記] Tailwind CSS Safelist 設定](https://smlpoints.com/wp-content/uploads/notes-tailwind-css-3-set-developing-environment.png "[筆記] Tailwind CSS Safelist 設定")
[筆記] Tailwind CSS Safelist 設定
這邊筆記下若用 Vue3 搭配 TailwindCSS 使用時，若用動態傳值來指定的 class – 像是顏色代碼，那你會發現沒有作用。因為 Tai Read More …
[筆記] 純 CSS Blur 創造模糊效果
近期在製作模糊效果時，想說在 2024 的現在可否使用純 CSS 來製作，不用使用 svg。透過 caniuse 的相容性統計，iOS Safari, Goog Read More …
![[指南] 既存 JavaScript + HTML + CSS 原生頁面打造新功能的一些心法](https://smlpoints.com/wp-content/uploads/notes-zh-tw-en-javascript-understanding-the-weird-part-1.jpg "[指南] 既存 JavaScript + HTML + CSS 原生頁面打造新功能的一些心法")
[指南] 既存 JavaScript + HTML + CSS 原生頁面打造新功能的一些心法
這回為了要在短時間內，於既有的義大利醬料式的網站上，加上一個新功能。看見其複雜且耦合度極高的 CSS, JS 和 HTML 檔案，實在難以下手。這邊筆記下一些經 Read More …
![[筆記] Nuxt 關於 SCSS 的引入寫法注意事項](https://smlpoints.com/wp-content/uploads/notes-nuxt-js-1-1.png "[筆記] Nuxt 關於 SCSS 的引入寫法注意事項")
[筆記] Nuxt 關於 SCSS 的引入寫法注意事項
近期在維護一個 Nuxt 2 搭配 SCSS 進行的專案時，發現每當修改部分的 SCSS 檔案時，Hot Reload 屢屢觸發 Out of memory。經 Read More …
![[筆記] HTML 巢狀 div 所造成的縮排效果](https://smlpoints.com/wp-content/uploads/notes-html5-input-time-format-1.jpg "[筆記] HTML 巢狀 div 所造成的縮排效果")
[筆記] HTML 巢狀 div 所造成的縮排效果
若要達成層級的縮排效果，除了每層改變 padding 的大小外，還有藉由 HTML 結構來達成的方式。藉由 HTML 的巢狀結構和「相同的 CSS」設定，就可以 Read More …
[筆記] Tailwind css – 含 RWD 的三欄式卡片製作
從 Tailwind CSS 問世以來，也經歷過了數年發展來到第 3 代。這回筆記下 tailwind css 實作一個三欄式卡片製作。 內容 1. 三欄時的寬 Read More …
[筆記] Tailwind css – 留言按鈕實作
從 Tailwind CSS 問世以來，也經歷過了數年發展來到第 3 代。這回筆記下 tailwind css 實作一個留言按鈕。 內容 1. 撰寫時可以先憑經 Read More …
[筆記] Tailwind css – Dark Mode 深色模式
從 Tailwind CSS 問世以來，也經歷過了數年發展來到第 3 代。這回筆記下 tailwind css 如何呈現 dark mode。 內容 1. 設定 Read More …
