1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. CSS3 線上陰影平滑產生器!透過拖拉即見即得,產生出平滑陰影語法

CSS3 線上陰影平滑產生器!透過拖拉即見即得,產生出平滑陰影語法

2019/12/13

梅問題-CSS3 影陰平滑器,透過拖拉就能即見即得的取得平滑陰子
  自從有了CCS3後,大幅的減少圖片的製作,透過CSS3的新屬性,就能快速的產生圓角圖片、半透明色、漸層、濾鏡效果與陰影效果,同時所產生的效果,相當的自然,完全解決了圖像製作的問題,而在眾多的特效多,陰影算是最常被使用的。

  雖然說透過參數的方式,就能快速的製作出區域陰影的效果,但卻會發現到,所產生的出來的影子有些生硬,若要讓影子呈現更自然效果,就得再入一些參數才行,雖然不難但還是得查下語法,因此現在不用這麼麻煩啦!直接透過線上拖拉,立即就可產生出平滑的陰影效果啦!


Make a smooth shadow
網站名稱:Make a smooth shadow, friend.
網站連結:https://brumm.af/shadows

Step1
在進入網站後,先從上方設影子的灰階的層數,數字愈大階層愈多,影子的層次也愈豐富。
梅問題-CSS3 影陰平滑器,透過拖拉就能即見即得的取得平滑陰子
Step2
接著再從下方設定影子的透明度,與影子的對比的平滑效果。
梅問題-CSS3 影陰平滑器,透過拖拉就能即見即得的取得平滑陰子
Step3
第三欄則是設定影子的垂直的位移量,同時下方也可設定影子的平滑效果。
梅問題-CSS3 影陰平滑器,透過拖拉就能即見即得的取得平滑陰子
Step4
接著下方則是設定影子的模糊效果,數字愈小,色塊感愈重。
梅問題-CSS3 影陰平滑器,透過拖拉就能即見即得的取得平滑陰子
Step5
最後一欄則是設定影子的縮減大小,由於是即見即所得,當調整到自己喜歡的效果,再把左邊的語法複製,貼到自己的專案中,就可以囉!有了這工具後,在製作影子效果就更方便啦!
梅問題-CSS3 影陰平滑器,透過拖拉就能即見即得的取得平滑陰子
#範例預覽: