透明ノイズと紙テクスチャ。
ちょっとざらざらした質感とか、手触りを感じるテクスチャって、背景にさりげなく敷くだけで、ほんのり暖かみが出ていいですよね。このブログにも背景にうっすらノイズ画像を敷いてます。真っ白にするよりも何となく柔らかい感じになって好きなんです;)。
そんなざらざらノイズ画像を半透明にした「透明ノイズ」のつくり方についてまとめてみます:)。
透明ノイズ
「透明ノイズ」とは、ノイズ画像を半透明にしたPNG画像のこと。僕が勝手にそう呼んでるだけですけど。
Firefoxで、画像を右クリックして「画像だけを表示」を選んだ時に開くページの背景にも使われてました(※下図は2013年9月現在。今は透明じゃないノイズになってます)。

body要素のスタイルに、下記のように指定されてました(※下記ソースコードは2013年9月現在)。
body {
background: #222 url("chrome://global/skin/media/imagedoc-darknoise.png");
}
backgroundプロパティで、背景色を#222
、背景画像にimagedoc-darknoise.png
というPNG画像を指定してます。画像が半透明なので、背景色(上記では#222)を活かしたまま、ノイズを乗せることができてるんですね。background-color
の値を変えるだけで、どんな色でもノイズのテクスチャが乗るってわけです;)。

そんな透明ノイズの作り方のご紹介と、それを応用したいろんなテクスチャを使ったサンプルをご紹介。
Comment & Pingback
1 Comment for 透明ノイズと紙テクスチャ。