MUKI space*
Front-end Development,
Effective Note-Taking.
CSS 表單樣式分享：Material UI 的 Label 標籤浮動縮放
分享一種表單樣式，當表單元件聚焦時，label 標籤會上移，失去焦點後返回原位。此樣式需設置 `placeholder=""`，避免刪除值時 label 不回到原位。可應用於 input 和 textarea。
若需要自動填入帳密，可使用 `autocomplete` 屬性，設置 `username` 和 `current-password`。也提供 CodePen 範例供參考。...
透過 img object-fit 屬性取代 CSS 的 background 語法，輕鬆實現圖片背景的效果
在網頁開發中，使用 object-fit 屬性可取代 CSS 的 background 語法，輕鬆實現圖片背景效果。object-fit 支援 SEO，圖片可用 img 標籤寫在 HTML 檔案中，讓搜尋引擎更易索引。這避免了 background 將圖片寫在 CSS 檔案中，無法被搜尋引擎收錄的問題。
object-fit 可應用於圓形頭像、整齊縮圖排列、Banner 底圖等場景，保持圖片比例不變，提升 SEO 效果。這屬性提供了靈活的圖片顯示方式，簡化了代碼，適用於多數現代瀏覽器。object-position 也可用於調整圖片定位，進一步增強設計靈活性。...
用 CSS 製作垂直滾動的跑馬燈
HTML 的 標籤已被淘汰，但可以用 CSS 製作垂直滾動的跑馬燈。需要一個包含多張圖片的容器，並設置樣式來實現效果。使用 CSS 變數設定圖片間距、滾動時間等。.marquee 容器使用 flex 布局，隱藏溢出內容。
aria-hidden="true" 用於隱藏第二個 .marquee--group，避免滾動時出現空白。--scroll-end: calc(-100% - var(--gap)); 確保無縫滾動。調整滾動速度和間距，只需修改 CSS 變數。...
用 Bootstrap 3 製作高度相同的 div (column)
排版網頁時，常需左右欄位高度相同。使用 Bootstrap Grid 時，可用 flex 讓 column 高度一致，方法簡單但不支援 IE9 以下。只需在 row 加上 display: flex 即可，注意 col-* 總數超過 12 仍會維持一行。
若考慮瀏覽器相容性，可用 display: table，支援度好且不需額外 DIV。設定 row 為 display: table 並加上 width: 100%，col-* 則設為 display: table-cell 且移除 float。這兩種方法簡便又適合 Bootstrap。...
用 css 讓區塊水平垂直置中
使用 CSS 將區塊水平垂直置中，常用於簡單的名片頁面。透過 `position: absolute` 和 `margin` 調整位置，讓元素位於中央。文字水平置中用 `text-align:center`，垂直置中則需改變 `display` 屬性，使用 `display: table` 和 `table-cell` 結構。
使用 `flex` 進行水平垂直置中變得更簡單。只需設置 `display: flex`，並使用 `justify-content: center` 和 `align-items: center`。這種方法也適用於內部元素的排版，省去使用 `float` 的麻煩。完整範例可參考線上 DEMO。...
利用純 CSS3 做出自適應的 lightbox
因為工作需求，需要製作使用說明頁，但非主要需求，決定用 Lightbox 取代多做一頁 HTML。考慮到使用功能強大的 Lightbox plugin 有些大材小用，決定使用純 CSS3 寫一個簡單且自適應的 Lightbox。
純 CSS3 的好處包括簡單好上手、讀取速度快，雖然不是所有瀏覽器都支援 CSS3，但手機應用基本無此問題。提供 HTML 結構和 CSS 樣式範例，說明如何利用純 CSS3 實現輕量級的 Lightbox。...
利用 css 讓 ul div 置中
利用 CSS 讓 ul 置中時，不能直接使用 text-align:center，因為 ul 預設為 display:block。可以透過改變 display 狀態來達成。
若 ul 有父層 div，父層設 text-align:center，ul 設 display:inline-block。若 ul 沒有父層，則設為 display:table，並用 margin: 0 auto。這兩種方法適用於不同的 HTML 結構，提供有效的置中解決方案。...
用 data-* 屬性做出純 CSS 的 tooltip
利用 HTML5 的 data-* 屬性可製作純 CSS 的 tooltip，當滑鼠移過文字時顯示提示。首先在 span 中加入 data-tooltip 屬性，設置提示文字。接著在 CSS 中使用 attr 抓取該屬性，並透過偽元素 :before 顯示內容。
如果需要多行顯示，利用 Unicode a 替代 br，可實現自動換行效果。這種方法不僅簡單，還可以避免使用 JavaScript，增強了 HTML 和 CSS 的互動性。...