タグ: CSS | 點燈坊

使用 Margin Auto 讓兩個靠左一個靠右

實務上常遇到一堆 Item 都靠左，但最後一個 Item 靠右，直覺會使用 flex-grow，事實上也可巧妙地使用 margin: auto 實現。

2021-02-13

使用 Margin Auto 實現同時水平垂直置中

若要同時水平置中與垂直置中，直覺會同時使用 justify-conten: center 與 align-items: center，事實上也可巧妙地使用 margin: auto 實現。

2021-02-13

使用 Margin Auto 實現 Flexbox 內垂直置中

若要在 Flexbox 內實現 Cross Axis 置中，直覺會使用 align-items: center，事實上也可巧妙地使用 margin: auto 實現。

2021-02-13

Flexbox 初體驗

Flexbox 為 CSS 3 所引進的新 Layout，使得我們不必再使用 inline-block 或 float 排版，而改用更直覺的 Flexbox。

2021-02-12

使用 :link、:visited、:hover、:active 設定 Anchor 視覺

<a> 為最常用的 HTML 之一，可透過 :link、:visited、:hover 與: :active 設定在不同狀態下 Anchor 視覺效果。

2021-02-12

CSS Variable 使用 String

::before 與 ::after 常搭配 String，事實上 String 也可用在 CSS Variable。

2021-02-06

CSS Variable 使用 Shorthand

CSS Variable 除了能用在 Numeric 外，也可使用於 Shorthand。

2021-02-06

使用 CSS Variable 管理重複值

若多個 CSS Selector 共用相同的設定，可將其設定抽成 CSS Variable 方便日後維護。

2021-02-06

CSS Variable 使用 Number

CSS Variable 若搭配無單位 Number，可使用 calc() 計算使其變成有單位。

2021-02-06

CSS Variable 使用 List

CSS Variable 除了能用在 Numeric 外，也可使用於 List。

2021-02-06

CSS Variable 使用 Keyword

CSS Variable 常搭配 Number 與 calc()，事實上也可搭配 Keyword。

2021-02-06

CSS Variable 組合 String

在 ECMAScript 我們會以 Template String 或 + 組合 String，在 CSS 若以 Variable 為 String，我們也可加以組合。

2021-02-06

CSS Variable 使用 Color

CSS Variable 除了能用在 Numeric 外，也可使用於 Color。

2021-02-06

CSS Variable 使用 clamp()

CSS Variable 除了搭配 calc() 外，也可搭配其他 CSS function 使用。

2021-02-06

CSS Variable 使用 calc()

CSS Variable 除了用來處理重複值外，實務上常常搭配 calc() 使用。

2021-02-06

CSS Variable 使用 Image

background Property 需搭配 url()，也可使用 CSS Variable。

2021-02-05

使用 Vue 改變 Local CSS Variable

若有數值在 CSS 重複出現，我們可將其抽成 CSS Variable，將來只需維護一處即可：若能將 JavaScript Variable 與 CSS Variable 綁定，則可使用 JavaScript 動態改變 CSS。

2021-02-05

使用 Vue 改變 Global CSS Variable

若有數值在 CSS 重複出現，我們可將其抽成 CSS Variable，將來只需維護一處即可，若使用 Global CSS Variable，由於 Vue 2 沒有直接支援，只能使用 Vanilla CSS 方式改變之。

2021-02-05

使用 Vue 改變 Component CSS Variable

若有數值在 CSS 重複出現，我們可將其抽成 CSS Variable，將來只需維護一處即可；若能將 JavaScript Variable 與 CSS Variable 結合，則可使用 JavaScript 動態改變 CSS。

2021-02-04

使用 Margin Auto 水平靠右

水平靠右直覺會使用 Flexbox Layout 的 justify-content: flex-end，事實上也可使用 Flow Layout 的 margin-left: auto 更精簡。

2021-02-01

使用 Margin Auto 水平靠左

水平靠左直覺會使用 Flexbox Layout 的 justify-content: flex-start，事實上也可使用 Flow Layout 的 margin-right: auto 更精簡。

2021-02-01

使用 Margin Auto 水平置中

水平置中直覺會使用 Flexbox Layout 的 justify-content: center，事實上也可使用 Flow Layout 的 margin: auto 更精簡。

2021-02-01

使用 Object Fit 與 Object Position 統一圖片長寬

若圖片由 API 以 Base64 String 傳回且圖片大小不一，此時 Front-end 為了美觀必須在不改變原圖比例下有相同長寬，此時可使用 CSS 的 Object Fit 與 Object Position 完成。

2021-02-01

使用 Vertical Align 垂直排版

當多個不同高度的 inline 或 inline-block 水平並列時，可由 vertical-align 指定各 Element 該如何垂直對齊。

2021-02-01

將 Element 轉成 inline-block

HTML 將 Element 分成 Inline、Block 與 Inline-block Element，透過 display: inline-element 可將 Inline / Block 強制轉成 Inline-block。

2021-02-01

將 Element 轉成 Inline

HTML 將 Element 分成 Inline、Block 與 Inline-block Element，透過 display: inline 可將 Block Element 強制轉成 Inline Element。

2021-02-01

將 Element 轉成 Block

HTML 將 Element 分成 Inline、Block 與 Inline-block Element，透過 display: block 可將 Block 強制轉成 Inline。

2021-02-01

深入探討 Inline、Block 與 Inline-block

HTML 的 Element 共分成 Inline、Block 與 Inline-block 三種類型，其中 Inline-block 具有部分 Inline 特性，也具備部分 Block 特性，因此稱為 Inline-block。

2021-02-01

使用 float 設定文繞圖

文繞圖為實務上常見需求，若只使用 <img> 與 <div>，則 <img> 與 <div> 會各自一行顯示，可使用 CSS 對 <img>設定 float 達成文繞圖。

2021-01-31

CSS 之 Margin Collapse

當 Vertical Margin 同時作用在相同空間時，CSS 會有所謂的 Margin Collapse，也就是 Vartical Margin 會不如我們預期，而有合併現象。

2021-01-31

如何建立自動 RWD 的 iframe ?

如 Youtube 本質上就是 <iframe>，但若要能讓 Youtube 也 RWD，則必須搭配一些 CSS 技巧。

2021-01-28

如何建立能自動 RWD 的 Canvas ?

雖然能使用 JavaScript 動態由 Canvas 繪製圖片，但若要能讓 Canvas 也 RWD，則必須搭配一些 CSS 技巧。

2021-01-27

如何建立能自動 RWD 的 div ?

若我們希望 <div> 能根據 Browser 的長寬自動改變，直覺會想將 width 與 height 都設定成百分比，但事實上沒這麼單純。

2021-01-27

使用 counter() 產生 Index

傳統總認為 CSS 只能處理視覺部分，Index 該由 JavaScript 處理，但透過 CSS 的 counter() 也可產生 Index。

2021-01-18

Dark Mode 調教心得

隨著 iOS 13 正式支援 Dark Mode 後，也宣告 Web 在 Mobile Device 不再只有白底黑字，支援 Dark Mode 成為無法逃避的課題，本文記錄這次將 點燈坊 支援 Dark Mode 的一些調教心得。

2021-01-18

如何根據 File Extension 自動顯示對應圖片 ?

一個常見的需求，由於不算視覺部分，直覺要使用 JavaScript 處理，其實 CSS 就能解決。

2021-01-18

如何使用 Class Composition 組合 CSS ?

CSS 允許我們將重複 Property 抽出成獨立 Class，然後 HTML Element 再以 Class Composition 完成我們要的視覺效果。

2021-01-16

為什麼只有 Block 能使用 Margin Auto 水平置中 ?

margin: auto 為最簡單的水平置中，但卻只能用於有指定寬度的 Block，為什麼不能使用在 Inline 與 Inline-block 呢 ?

2020-12-26

如何使 UL + LI 水平顯示 ?

UL 與 LI 預設會垂直顯示，但實務上卻常常使用 UL 與 LI 製作水平 Menu，可使用 Flexbox 或 display: inline 使 UL 與 LI 水平顯示。

2020-12-22

CSS 之 Box Sizing

Box Model 預設將 width 與 height 設定在 Content Box，但你可以透過 box-sizing 將 width 與 height 設定在 Border Box。

2020-12-15

タグ : CSS