CSS3 已經發展到讓前端開發者可以很容易的在頁面上加入許多複雜的視覺效果,這篇文章整理了十個 CSS3 小技巧來讓頁面看起來稍微專業一點
使用 CSS3 將圖片變成黑白圖片
CSS3 定義了 filter 這個功能,所以其實可以很容易的對影片作出各種基本的影像濾鏡。這邊使用的是 grayscale 這個 filter 來讓圖片變黑白,其它還有許多包含 sepia,intert,saturate .. 等。詳細請
參考這個範例。
另外其實 filter 不只可以用在 img 上,其實可以用在任何 element 上,比如這個測試就對 iframe 來作出黑白的效果
當然也可以用在 video element 上。
使用 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