CSS SECRETS 筆記 - Ch5 文字編排

tags: CSS SECRETS css

竹白記事本，學習紀錄，2019/03/17。

CSS Secrets
CSS 秘密花園

目錄 CSS SECRETS 筆記

Ch5 文字編排

1. 連字號的使用
2. 斑馬紋文字
3. 調整 tab 寬度
4. 擬真的文字效果

5-1 連字號的使用

新屬性 hyphens

• hyphens: none
• hyphens: manual
• hyphens: auto

Codepen：CSS SECRETS 5-1 連字號的使用

5-3 斑馬紋文字

如果是表格可以很輕鬆的做到斑馬紋效果：

tr:nth-child(even) {
  background: rgba(0, 0, 0, .2);
}

如果是一行行的文字可能要透過 background-size 與 line-height 的配合：

padding: .5em;
line-height: 1.5;
background: #f1f1c7;
background-size: auto 3em;
background-origin: content-box;
background-image: linear-gradient(rgba(0, 0, 0, .2) 50%,
                                  transparent 0);

Codepen：CSS SECRETS 5-3 斑馬紋文字

5-4 調整 tab 寬度

pre {
  tab-size: 4;
}

5-8 擬真的文字效果

12 Fun CSS Text Shadows
文字陰影產生器

Codepen：CSS SECRETS 5-8 擬真的文字效果