2024.10.21

如何使用純 CSS 製作固定於右下角的 CTA 按鈕

本文介紹如何使用純 CSS 製作固定於右下角的 CTA 按鈕，無需依賴 JavaScript。主要方法包括使用 CSS 的 `position: sticky` 和 `position: fixed` 屬性來固定按鈕位置，並利用 `place-self: end` 來調整按鈕在網格中的定位。這樣的設計不僅減少頁面載入時間，還能降低維護成本。

此外，文章還介紹了如何使用 CSS 動畫來增強按鈕的視覺效果，透過 `animation-timeline: scroll()` 語法實現平滑過渡效果。由於某些瀏覽器尚未支援該語法，因此使用 `@supports` 進行兼容性檢查。這些技術使得在不使用 JavaScript 的情況下，仍能創建出互動性強且視覺效果豐富的按鈕。...

2024.10.17

CSS 語法

在 CSS 建立響應式輸入欄位的方法

本文介紹了 3 種在 CSS 中建立響應式輸入欄位的方法。首先，使用 `min()` 函數可以根據螢幕尺寸動態調整欄位寬度，確保欄位不會超出容器邊界。其次，`display: flex` 提供更複雜的動態寬度調整，適合多元素的自適應排列。最後，`max-width` 方法透過限制最大寬度，並設置 `width` 為 100%，在不同螢幕上保持彈性。這些方法各有優缺點，`min()` 和 `max-width` 簡單易用，而 `flex` 提供更高的彈性但語法較複雜。

這些方法的範例代碼已放在 CodePen 上，讀者可以透過調整父層寬度觀察輸入欄位的變化。這三種方法能有效地提升表單在各種裝置上的美觀性和實用性，適合不同的開發需求和場景。...

2023.12.06

如何讓使用 CDN 的 Tailwind CSS 也能在 VS Code 啟用 Tailwind CSS Intellisense 套件

VS Code 的 Tailwind CSS Intellisense 套件提供自動完成、語法 highlight 和提示功能，增強 Tailwind CSS 的開發體驗。使用此功能需安裝 Tailwind CSS 並在專案資料夾中加入 tailwind.config.js 檔案。

若使用 CDN 的 Tailwind CSS，可以在佈景主題資料夾新增一個空的 tailwind.config.js 檔案，並放在 /wp-content/themes/資料夾名稱/ 下，即可啟用 Intellisense 套件。這技巧適用於 PHP 和一般 HTML 檔案。...

2023.10.13

vw 進化了！更好用的 CSS 自適應字體大小

vw 單位可讓字體隨螢幕寬度縮放，但當螢幕縮小時字體也會變小，可能造成閱讀困難。為解決此問題，可使用 calc() 反向計算字體，或透過 clamp() 函數設定字體的最大和最小值，避免字體過小或過大。

clamp() 接收三個參數：最小值、變動值和最大值，將字體大小限制在設定範圍內。使用 clamp() 搭配 vw 和 --font-size 變數，能在不同裝置上達到更好的字體顯示效果，避免傳統 media query 的繁瑣設定。...

2023.09.13

CSS 表單樣式分享：Material UI 的 Label 標籤浮動縮放

分享一種表單樣式，當表單元件聚焦時，label 標籤會上移，失去焦點後返回原位。此樣式需設置 `placeholder=""`，避免刪除值時 label 不回到原位。可應用於 input 和 textarea。

若需要自動填入帳密，可使用 `autocomplete` 屬性，設置 `username` 和 `current-password`。也提供 CodePen 範例供參考。...

2023.06.26

透過 img object-fit 屬性取代 CSS 的 background 語法，輕鬆實現圖片背景的效果

在網頁開發中，使用 object-fit 屬性可取代 CSS 的 background 語法，輕鬆實現圖片背景效果。object-fit 支援 SEO，圖片可用 img 標籤寫在 HTML 檔案中，讓搜尋引擎更易索引。這避免了 background 將圖片寫在 CSS 檔案中，無法被搜尋引擎收錄的問題。

object-fit 可應用於圓形頭像、整齊縮圖排列、Banner 底圖等場景，保持圖片比例不變，提升 SEO 效果。這屬性提供了靈活的圖片顯示方式，簡化了代碼，適用於多數現代瀏覽器。object-position 也可用於調整圖片定位，進一步增強設計靈活性。...

2023.04.13

CSS 樣式分享

用 CSS 製作垂直滾動的跑馬燈

HTML 的標籤已被淘汰，但可以用 CSS 製作垂直滾動的跑馬燈。需要一個包含多張圖片的容器，並設置樣式來實現效果。使用 CSS 變數設定圖片間距、滾動時間等。.marquee 容器使用 flex 布局，隱藏溢出內容。

aria-hidden="true" 用於隱藏第二個 .marquee--group，避免滾動時出現空白。--scroll-end: calc(-100% - var(--gap)); 確保無縫滾動。調整滾動速度和間距，只需修改 CSS 變數。...

2022.11.22

整合 TailwindCSS 與 Element Plus 的 CSS class 變數

TailwindCSS 和 Element Plus 各有獨立的顏色主題，若要結合兩者的 CSS 變數，可利用 TailwindCSS 的擴充設定。首先，在 tailwind.config.js 中，透過迴圈將 Element Plus 的變數加入 TailwindCSS。這樣一來，便可在 HTML 中使用 TailwindCSS 的 class，直接應用 Element Plus 的 CSS 變數。

例如，使用 var(--el-color-primary-light-5) 作為文字顏色，可寫成 text-el-primary-light-5。若需使用更多 Element Plus 的 CSS 變數，可在 tailwind.config.js 中新增相應函式，將所有變數整合至 TailwindCSS。這樣便能在開發過程中方便地使用這些樣式。...

2022.09.23

使用 SCSS each 與 CSS var 變數，調整 Bootstrap, Element UI 的 CSS 樣式

Element UI 雖然能自定義主題，但只能調整整體顏色，難以針對特定 class 修改。使用 SCSS each 與 CSS var 變數，可以精確調整樣式而不影響其他部分。

例如，Element UI 的按鈕有 plain 屬性，透過 SCSS 迴圈與 CSS 變數，可以輕鬆修改按鈕的框線顏色，避免重複編寫 CSS，達到更高效的樣式管理。...

MUKI space*