透明ノイズと紙テクスチャ。

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

透明ノイズ

「透明ノイズ」とは、ノイズ画像を半透明にしたPNG画像のこと。僕が勝手にそう呼んでるだけですけど。
Firefoxで、画像を右クリックして「画像だけを表示」を選んだ時に開くページの背景にも使われてました(※下図は2013年9月現在。今は透明じゃないノイズになってます)

Firefoxの「画像だけを表示」

body要素のスタイルに、下記のように指定されてました(※下記ソースコードは2013年9月現在)

body {
	background: #222 url("chrome://global/skin/media/imagedoc-darknoise.png");
}

backgroundプロパティで、背景色を#222、背景画像にimagedoc-darknoise.pngというPNG画像を指定してます。画像が半透明なので、背景色(上記では#222)を活かしたまま、ノイズを乗せることができてるんですね。background-colorの値を変えるだけで、どんな色でもノイズのテクスチャが乗るってわけです;)

backgroundプロパティは、背景色の上に背景画像が乗る

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

お品書き

Comment & Pingback

1 Comment for 透明ノイズと紙テクスチャ。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください