毛玻璃效果是指用一層半透明的色片覆蓋複雜的背景，讓在毛玻璃前面的文字能容易閱讀。會這麼做是因為在背景裡有些有趣的地方，我們希望保留給使用者看得見，同時也要讓在前...
圓餅圖，即使是只有二種顏色的簡單圖案，在CSS也不是容易做得到。 常用的做法包括用繪圖軟體事先製作許多圖案給不同的值使用，或者用大型的JavaScript函式庫...
大部分的人用三個長度值和一個顏色值來做CSS陰影 box-shadow: 2px 3px 4px rgba(0,0,0,.5); 這個樣式實際上包含下面的步驟...
梯形和平行四邊形的差別是，它只有二個邊是平行的，另外二個邊可以是任何角度。以前這個形狀是非常難用CSS做出來，雖然它是一種常見的形狀，尤其用在模仿標籤的樣子。如...
需要用CSS換行的時機通常是在使用definition lists的時候，但有時在其他的場合也會有同樣需求。會使用definition lists因為我們想做一...
裁切的截角不只是用來收集折價券省錢，也是印刷和網頁上常見的設計圖案。它的表現方式是以45度角裁去元素一個或以上的角落。尤其當近年扁平化設計(flat desig...
自從border-radius成為標準後，開發者們終於不必再用圖片製作圓角的圖案。想要一個正圓形，只要將border-radius設為正方形邊寬的一半就可以了。...
當你有一些形式各異的照片，卻要讓它們具有視覺上的一致性，一個常用且優雅的做法是先將照片灰階化，再加上同一種色調。在網頁設計上，會先在照片加上這種效果，然後在ho...
SVG讓許多圖像的工作變簡單，製作圓餅圖也不例外。然而與其用路徑畫圓餅圖，我們要用一個小技巧。 先從一個圓形開始： <svg width="10...
雖然border-image的做法很簡潔也很 DRY，仍然有它的限制，比如說我們還是需要有個純色的背景。 還記得在鑽石形圖片中用過的clip-path嗎？CSS...
box-shadow在可使用border-radius的元素上，能產生很好的陰影效果。不過當用在偽元素或者其他透明的圖案上時就不管用了，因為box-shadow...
為元素加上 border 算是CSS新手的問題 border: 10px; 給元素來個半透明的顏色，稍微難一些。可以用 rgba() 或是 hsla()，把he...
Ligature中文叫「合字」，在中文裡比較少見，它的介紹請見維基百科. Ligatures在網頁字型不常用到，但是用了它會讓排版比較好看，以前要實現ligat...
條紋是種常見的 pattern. 網頁設計要製作條紋最簡單的方法是用圖片做背景，不過這樣一來修改時就需要麻煩設計師出手。有些人可能會用 SVG，但是這樣還是需要...
有時我們會需要讓邊界裡面是圓角，但是外面還是維持直角。 最直覺的做法是用二個 <div> 一個做內框一個做外框，外框的背景顏色是邊界的顏色。 &l...
雖然 CSS gradient 的方法可以用，不過它的程式碼是冗長的，需求變更時要做多個地方調整，好在我們還有其他的方法，其中一種是用border-image配...
其他角度的折角 前面我們做了45度的折角，但現實的折角並不會剛好都45度，如果要模擬得更為真實，我們可以試試看其他的角度，比如說用-150deg做30度的折角。...
世界上並非只有條紋還有許多種圖案像是網格、點點、棋盤等等。好消息是 CSS gradients 幾乎做得到！ 上一篇文章我們只使用了一個 linear-gra...
在需要呈現程式碼的網頁，我們會用<pre>和<code>寫。但是瀏覽器有對程式碼區塊預設的樣式，這時會遇到一個問題，就是預設對於程式碼t...
平行四邊形使用在網頁設計的時候，是為了讓頁面看起來更活潑更有動感。 首先用skew()來製作一個平行四邊形的按鈕。 <a href="#&quo...
折角是一個很普遍的設計技巧 有許多有用的的CSS方法能實現這個效果，最早在2010年就有了，它的原理是用偽元素做二個三角形，一個跟背景色一樣，假裝是被折去的角，...
背景裡如果有單一圖片或是標誌時，我們常常會要固定放在背景的某個角落，此時需要用到background-position 去指定背景圖的位置。 backgroun...
幾年前當我們開始可以用:nth-child()/:nth-of-type()這類的CSS虛擬類別（pseudo-class）時，最常用來做「斑馬條紋的table...
CSS 標準是怎麼定的？ 事實上 W3C 不是制定標準的單位，CSS Working Group 才是制定標準的單位。CSS WG 大部分成員來自瀏覽器廠商因此...
Minimize code duplication 軟體開發最重要的二個原則是 DRY 和可維護性，同時也適用在 CSS可維護性的程式碼以實際狀況來說，是在變更...
在 Backgrounds & Border Level 3 當時還在草稿階段時，WG的成員有討論過多重邊界的可能性，就像現在 background 可...
設計師很喜歡在排版中將文字分散對齊，如果你看設計類雜誌或書籍就會發現到處都是。但是在網頁上，分散對齊卻很少用到，甚至連設計師們也少使用，為什麼呢？即使在CSS...
鑽石形的圖片是常見的一種視覺設計，但是用 CSS 不容易做到。事實上，一直到最近，它還是不可能實現的效果。以前網頁設計師要實現鑽石形圖片，必須從原始圖片下手，先...
yowlonglee
iThome鐵人賽
看影片追技術