鐵人檔案
如果你是前端工程師卻不知道 Lea Verou 只能說你根本沒見過大神。作者 Lea Verou 是 W3C CSS 工作小組的特邀專家，也是 W3C 制定 CSS 規則的成員之一。
本書介紹了 47 個 CSS 的秘密，分為七大類，書裡面用到 DRY 的設計方法來解決一般遇到的 CSS 問題。
我希望能一天導讀一個秘密，所以會超過30天的比賽期間。
box-shadow在可使用border-radius的元素上，能產生很好的陰影效果。不過當用在偽元素或者其他透明的圖案上時就不管用了，因為box-shadow...
當你有一些形式各異的照片，卻要讓它們具有視覺上的一致性，一個常用且優雅的做法是先將照片灰階化，再加上同一種色調。在網頁設計上，會先在照片加上這種效果，然後在ho...
毛玻璃效果是指用一層半透明的色片覆蓋複雜的背景，讓在毛玻璃前面的文字能容易閱讀。會這麼做是因為在背景裡有些有趣的地方，我們希望保留給使用者看得見，同時也要讓在前...
折角是一個很普遍的設計技巧 有許多有用的的CSS方法能實現這個效果，最早在2010年就有了，它的原理是用偽元素做二個三角形，一個跟背景色一樣，假裝是被折去的角，...
設計師很喜歡在排版中將文字分散對齊，如果你看設計類雜誌或書籍就會發現到處都是。但是在網頁上，分散對齊卻很少用到，甚至連設計師們也少使用，為什麼呢？即使在CSS...
其他角度的折角 前面我們做了45度的折角，但現實的折角並不會剛好都45度，如果要模擬得更為真實，我們可以試試看其他的角度，比如說用-150deg做30度的折角。...
需要用CSS換行的時機通常是在使用definition lists的時候，但有時在其他的場合也會有同樣需求。會使用definition lists因為我們想做一...
幾年前當我們開始可以用:nth-child()/:nth-of-type()這類的CSS虛擬類別（pseudo-class）時，最常用來做「斑馬條紋的table...
在需要呈現程式碼的網頁，我們會用<pre>和<code>寫。但是瀏覽器有對程式碼區塊預設的樣式，這時會遇到一個問題，就是預設對於程式碼t...
Ligature中文叫「合字」，在中文裡比較少見，它的介紹請見維基百科. Ligatures在網頁字型不常用到，但是用了它會讓排版比較好看，以前要實現ligat...
