裝飾網頁的 CSS3 小技巧

來源  http://www.icoding.co/2013/08/css3-tricks-to-embellish-web

裝飾網頁的 CSS3 小技巧

24 八月 2013 NO COMMENT

CSS3 已經發展到讓前端開發者可以很容易的在頁面上加入許多複雜的視覺效果，這篇文章整理了十個 CSS3 小技巧來讓頁面看起來稍微專業一點 

使用 CSS3 將圖片變成黑白圖片

CSS3 定義了 filter 這個功能，所以其實可以很容易的對影片作出各種基本的影像濾鏡。這邊使用的是 grayscale 這個 filter 來讓圖片變黑白，其它還有許多包含 sepia，intert，saturate .. 等。詳細請參考這個範例。

圖面黑與白：http://codepen.io/kswlee/pen/GIajg

另外其實 filter 不只可以用在 img 上，其實可以用在任何 element 上，比如這個測試就對 iframe 來作出黑白的效果  當然也可以用在 video element 上。

iframe 黑與白: http://jsbin.com/eZinOMI/1/

使用 CSS3 做頁面頂端陰影

很簡單的效果，但專業感加分  但陰影效果不要用太重，太重就 low 了。

http://codepen.io/kswlee/pen/CgvuK

CSS3 偵測 double clicks

你相信真的可以只用 CSS3 就可以偵測 double click 嗎？不信請看 

http://codepen.io/kswlee/pen/amdtw

CSS3 畫三角形

使用 Pure CSS 來作畫這件事情，之前流行過一陣的 Pure CSS Mnion 已經讓大家見證到透過 CSS3 做任意形狀的可能性。但回歸基本我們還是看一下如何做出透過 CSS 做出非矩形的 element 外觀吧。 http://cdpn.io/zbGBp

使用 CSS calc() 函氏

有時候我們只想做針對 CSS value 做一些基本的計算，這時候並不需要為了這件事情寫 JavaScript，一個簡單的 calc() 就可以搞定了。

http://codepen.io/kswlee/pen/FmDHs

使用 CSS3  做文字漸層

CSS3 本身並無直接的 text gradient 可以套用，但可以轉個彎使用 image-mask 搭配 gradient 來達成。 http://codepen.io/kswlee/pen/wctnx

使用 CSS3 關閉 pointer events (包含滑鼠與 touch)

要讓 element 不去收 user input 可以很容易透過一個簡單的 CSS 屬性設定就可以達成。

http://codepen.io/kswlee/pen/HzqAE

使用 CSS3 做縫線樣式邊框

輕鬆做出專業區塊邊框。 http://codepen.io/kswlee/pen/fviJr

使用 CSS3 客製化捲軸 (WebKit only)

多年前只有 IE 提供客製化捲軸，現在 Webkit-based 的也可以。

http://codepen.io/kswlee/pen/ChygD

使用 CSS3 做模糊文字效果

你一定曾經想找出屬性要做出這個效果，但就只是需要一個小技巧把文字顏色設透明 http://codepen.io/kswlee/pen/BchxD

使用 CSS3 做邊角緞帶效果

就是 GitHub 樣式的邊角緞帶

http://codepen.io/kswlee/pen/qIrdv

參考資料：http://www.catswhocode.com/blog/modern-css3-techniques-to-embellish-your-website