透明ノイズと紙テクスチャ。
ちょっとざらざらした質感とか、手触りを感じるテクスチャって、背景にさりげなく敷くだけで、ほんのり暖かみが出ていいですよね。このブログにも背景にうっすらノイズ画像を敷いてます。真っ白にするよりも何となく柔らかい感じになって好きなんです;)。
そんなざらざらノイズ画像を半透明にした「透明ノイズ」のつくり方についてまとめてみます:)。
透明ノイズ
「透明ノイズ」とは、ノイズ画像を半透明にした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 透明ノイズと紙テクスチャ。