iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

CSS Secrets 導讀 系列

如果你是前端工程師卻不知道 Lea Verou 只能說你根本沒見過大神。作者 Lea Verou 是 W3C CSS 工作小組的特邀專家,也是 W3C 制定 CSS 規則的成員之一。

本書介紹了 47 個 CSS 的秘密,分為七大類,書裡面用到 DRY 的設計方法來解決一般遇到的 CSS 問題。

我希望能一天導讀一個秘密,所以會超過30天的比賽期間。

鐵人鍊成 | 共 30 篇文章 | 30 人訂閱 訂閱系列文 RSS系列文
DAY 1

[前言1] CSS 標準以及它們的產地

CSS 標準是怎麼定的? 事實上 W3C 不是制定標準的單位,CSS Working Group 才是制定標準的單位。 CSS WG 大部分成員來自瀏覽器廠商...

2018-10-16 ‧ 由 yowlonglee 分享
DAY 2

[前言2] 那些年我們一起錯過的 CSS 編碼技巧

Minimize code duplication 軟體開發最重要的二個原則是 DRY 和可維護性,同時也適用在 CSS 可維護性的程式碼以實際狀況來說,是在變...

2018-10-17 ‧ 由 yowlonglee 分享
DAY 3

Secret 1: 半透明的邊界

為元素加上 border 算是CSS新手的問題 border: 10px; 給元素來個半透明的顏色,稍微難一些。可以用 rgba() 或是 hsla(),把he...

2018-10-18 ‧ 由 yowlonglee 分享
DAY 4

Secret 2: 多重邊界

在 Backgrounds & Border Level 3 當時還在草稿階段時,WG的成員有討論過多重邊界的可能性,就像現在 background 可...

2018-10-19 ‧ 由 yowlonglee 分享
DAY 5

Secret 3: 靈活的背景定位

背景裡如果有單一圖片或是標誌時,我們常常會要固定放在背景的某個角落,此時需要用到background-position 去指定背景圖的位置。 backgroun...

2018-10-20 ‧ 由 yowlonglee 分享
DAY 6

Secret 4: 內部圓角

有時我們會需要讓邊界裡面是圓角,但是外面還是維持直角。 最直覺的做法是用二個 <div> 一個做內框一個做外框,外框的背景顏色是邊界的顏色。 &l...

2018-10-21 ‧ 由 yowlonglee 分享
DAY 7

Secret 5: 條紋背景

條紋是種常見的 pattern. 網頁設計要製作條紋最簡單的方法是用圖片做背景,不過這樣一來修改時就需要麻煩設計師出手。有些人可能會用 SVG,但是這樣還是需要...

2018-10-22 ‧ 由 yowlonglee 分享
DAY 8

Secret 6: 更多的背景圖案

世界上並非只有條紋還有許多種圖案像是網格、點點、棋盤等等。好消息是 CSS gradients 幾乎做得到! 上一篇文章我們只使用了一個 linear-gra...

2018-10-23 ‧ 由 yowlonglee 分享
DAY 9

Secret 7:(偽)隨機背景圖案

在自然界完美重複的圖案根本是不存在,即使是同一品種的花,一定會有少許差異,沒有二朵花是完全一模一樣。 再看一下前面我們做的練習,一模一樣的圖案有規律的重複,不管...

2018-10-24 ‧ 由 yowlonglee 分享
DAY 10

Secret 8: 不間斷的圖片邊界

有時我們想在邊界而不是背景裡放圖片或是圖案以美化border。而且圖案會填滿整個容器,隨著容器改變尺寸但是比例維持不變,如同backgroud-size: co...

2018-10-25 ‧ 由 yowlonglee 分享