タグ: CSS | 點燈坊

如何水平均分 Column ?

在 Main Axis 水平均分 N 個 Column 為實務上常見需求，在 CSS 有多種方式實現。

2021-04-15

Grid 初體驗

Grid 為 CSS 最新 Layout 方式，其思維有別於 Flexbox，可完全在父層設定。

2021-04-14

CSS 之 Adjacent Sibling Combinator +

理論上每個 Element 都可以設定獨立 Class 加以選取，若想在不增加 Class 前提下選取下一個 Element，可使用 + 加以選取。

2021-04-14

使用 Compound Selector 選擇不同部分

若遇到 CSS 相同部分，我們會抽出相同 Class 共用，對於不同部分，可使用 Compound Selector 加以選擇。

2021-04-13

Attribute Selector 的 Specificity

一般較少討論 Attribute Selector 的 Specificity，當與 Class Selector 有衝突時，到底會使用 Attribute Selector 還是 Class Selector 呢 ?

2021-04-13

CSS 之 Universal Selector *

最暴力的 Selector，一次將選取全部 Element，但 Side Effect 也最大，須小心使用。

2021-04-13

CSS 之 Class Selector .

Class Selector 為 CSS 最常用的 Selector，實務上常看到幾種寫法：.box1, box2、.box1 .box2 與 .box1.box2，因為很像很容易誤會其意義。

2021-04-13

CSS 之 Attribute Selector [ ]

僅管是相同 Tag，只要其 Attribute 的 Value 不一樣，就能使用 Attribute Selector 選擇該 Tag。

2021-04-12

CSS 之 ID Selector

CSS 也可以直接以 ID 描述 Selector，這種方式速度最快，但因為 ID 不能重複，只能套用在單一 Tag。

2021-04-12

CSS 之 Type Selector

Type Selector 會一次影響所有 HTML Tag，直接以 Tag 名稱描述即可，不用任何符號。

2021-04-12

實作圖片灰階效果

若要對影像實作灰階效果，可使用 :before 搭配 mix-blend-mode: color 實現。

2021-04-12

如何垂直靠下 ?

垂直靠下為實務上常見需求，CSS 可由多種方式實現。

2021-04-07

如何垂直靠上 ?

垂直靠上為實務上常見需求，CSS 可由多種方式實現。

2021-04-07

如何水平靠右 ?

水平靠右為實務上常見需求，CSS 可由多種方式實現。

2021-04-07

使用 Relative Position 實現 Layout

藉由 Relative Position 與 Absolute Position 搭配，也可排出很多特殊 Layout。

2021-04-06

如何同時水平垂直置中 ?

水平垂直置中為實務上常見需求，CSS 可由多種方式實現。

2021-04-05

使用 transform 同時水平垂直置中

搭配 Relative / Absolute Position，也能使用 transform + translate() 同時水平垂直置中。

2021-04-05

如何垂直置中 ?

垂直置中為實務上常見需求，CSS 可由多種方式實現。

2021-04-04

使用 transform 垂直置中

搭配 Relative / Absolute Position，也能使用 transform + translate() 垂直置中。

2021-04-04

如何水平置中 ?

水平置中為實務上常見需求，CSS 可由多種方式實現。

2021-04-01

使用 transform 水平置中

搭配 Relative / Absolute Position，也能使用 transform + translate() 水平置中。

2021-03-31

如何更改套件內的 CSS ?

當使用 3rd Party 的 Package 時，若只有特定 Page 想要改變其內部 CSS Style，其他 Page 則維持不變，該如何才不會影響到其他 Page 呢 ?

2021-03-29

在文字前後實作 Quote

Quote 為常見的 Component，在不改變 HTML 前提下可使用 :before 與 :after 實作。

2021-03-29

在文字下實作紅色 Underline

Underline 為常見的 Component，在不改變 HTML 前提下可使用 :after 實作。

2021-03-29

實作 Check List

Check List 為常見的 Component，在不改變 HTML 前提下可使用 :before 實作。

2021-03-29

實作三角形

實務上有時會需要三角形加以裝飾，此時不必使用圖片，只要使用 CSS 就可繪製三角形。

2021-03-27

使用 after 動態新增內容

after 允許我們動態新增內容，也因為本質是 Element，所以可以設定各種 CSS Property。

2021-03-26

使用 before 動態新增內容

before 允許我們動態新增內容，也因為本質是 Element，所以可以設定各種 CSS Property。

2021-03-26

實作 Badge

在右上角帶有 Badge 顯示特別資訊亦為常見 Layout，可使用 Absolute Position + Relative Position 實現。

2021-03-25

實作 Card 加上 Ribbon

Card 常在左上角帶有 Ribbon 顯示特別資訊，可使用 Absolute Position + Relative Position 實現。

2021-03-25

Relative Position 之 Overlap

由於 Relative 是相對於原 Element 空間做 Shift，因此可能與其他 Element 有 Overlap，因此必須考慮其 Overlap 優先權。

2021-03-23

Relative Position 初體驗

Fixed 與 Absolute 都會產生新 Layer，Relative 則維持在原本 HTML 內。

2021-03-22

使用 Absolute Position 實現 Layout

藉由 Absolute Position 與 top、bottom、left 、right 與 margin: auto 靈活運用，可以排出很多特殊 Layout。

2021-03-22

使用 Absolute Position 實現定位

使用 Absolute Position 時搭配 top、bottom、left 與 right 定位時，會往父層尋找具備定位設定的父層。

2021-03-22

如何同時並存水平置中與水平靠右 ?

實務上常遇到一些不規則水平置中需求，如一個為水平置中，另一個卻水平靠右。

2021-03-22

Absolute Position 初體驗

Absolute Position 與 Fixed Position 非常類似，但還是有不少特性不太一樣。

2021-03-17

實作 Modal 蓋板廣告

蓋板廣告是 Fixed Position 常見應用，本文簡單介紹其實踐方式。

2021-03-15

使用 fit-content 實現水平置中

Block Element 預設會以 width: 100% 佔據父層 Box 所有寬度，這使得 margin: auto 無用武之地，可使用 width: fit-content 將寬度收縮成 Content 寬度，讓 margin: auto 能水平置中。

2021-03-15

深入探討 width 與 max-width

對 Element 設定 width 很直覺，但 RWD 出現後，width 就面臨的重大挑戰，因此出現了 max-width，但這兩者有什麼差異呢 ?

2021-03-15

深入探討 width 的 auto 與 100%

很多人以為 width 預設值是 100%，但事實上是 auto，而 100% 與 auto 有什麼差異呢 ?

2021-03-15

タグ : CSS