iT邦幫忙

2024 iThome 鐵人賽

DAY 14
0
Modern Web

Super Easy CSS,極度簡單 PART 2!寫出漂亮的 CSS系列 第 14

#48 CSS 噪點漸層 (Grainy Gradients) 的製作方法

  • 分享至 

  • xImage
  •  

所謂的噪點漸層 (Grainy Gradients),在顏色漸變時不是使用平滑過渡色彩,而是使用顆粒由多至少漸變,這樣的方式能夠製造出磨砂的質感,例如 Arc 瀏覽器的背景特效:


我看到一篇文章製作了很酷炫的噪點漸層,
所以本篇文想要來研究一下,如何製作這樣的漸層:

Grainy Gradients | CSS-Tricks - CSS-Tricks

他說道:

訣竅是使用 SVG 濾鏡創建雜色,然後將該雜色應用為背景。將其置於漸變下方,提高亮度和對比度,僅此而已 - 漸變會逐漸消失。

其中運用前幾篇我們提過的 filtermix-belnd-mode 的進階運用。

最近重感冒,等我好一些後,會回來這篇文自己寫 DEMO 範例練習看。😵

後來作者還製作了小工具,大家可以先去玩玩看:

Grainy Gradients playground

這真的很酷炫!有了這樣的技術就能做出很多很猛的效果吧!


上一篇
#47 一次搞懂 CSS 各種混合模式:mix-blend-mode/ background-blend-mode
下一篇
#49 CSS 2D Transform:變大、變小、旋轉、傾斜,CSS 絕對定位置中方法、平行四邊形
系列文
Super Easy CSS,極度簡單 PART 2!寫出漂亮的 CSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言