你所不知道的css新功能

  • Prototype Hacker Hannah Lin #hannahpun
  • Dec 12
  • CSS

css3已經很普遍執行在網頁中了
不論是圓角border-radius、文字陰影text-shadow、
透明度opacity、變形trasform、動畫transition…等等
相信大家都看過很多很酷炫的效果

但還有很多功能是鮮為人知的 就在這裡分享給大家

 

css3 filter

filter:  <filter-function > | <filter-function >
瀏覽器支援


要做出如下圖的效果,一定要打開修圖軟體或請設計師給圖嗎?
不 ,一行程式碼就解決了
下面這些完全是“純css”寫出來的喔

css3

grayscale 灰階

sepia 復古調

saturate 饱和度

hue-rotate 色相分離

invert 負片效果

opacity 透明度

brightness 亮度

contrast 對比度

blur 模糊

drop-shadow 圖片陰影
特別要說的是drop-shadow這個屬性!
我們對於box-shadow已經很熟悉,
box-shadow陰影永遠都是方形
但drop-shadow 卻可以是圖片的陰影,只要你的圖是透明底

 

See the Pen ByjwYB by hannahpun (@hannahpun) on CodePen.


當然你也可以又復古色調又模糊 那就在值後免直接加上去就好

 

calc 運算

calc(expression)
瀏覽器支援

 

因應現在Device太多,所以做網頁時
很多東西都是用%來算寬度,但總有些寬度是固定的
例如側邊欄固定200px, 剩下寬度就是100% – 200px
可是 %跟px不同單位 根本無法做運算!

還好calc出現讓不可能變為可能
你可以再不同單位之間做加減乘除
超好用的!!!

 

小叮嚀:

用這些功能都要先注意瀏覽器支援程度
還有記得要寫前綴詞(-webkit, -moz…)

 
想知道更多css功能可以點我之前寫的文章這裡看噢