透明ノイズと紙テクスチャ。Wedとりとめないメモ。TueSVGでやることのまとめ。Satスクロールパラパラ。Wedふりがなを振る。Wed段組みのCSS。Sunウィンドウ幅いっぱいのヘッダー画像。Wedよこ並びのCSS。Friコンテナからの解放。Tueイラレでイラスト。Wed動くCSSのためのメモ。Thuなつかしくってあったかい、きりぎりす。Sun透明ノイズと紙テクスチャ。Sun透明にしないでテクスチャ透明ノイズと紙テクスチャ。Sunここまで散々透明透明言ってきましたが、CSSを使えば、わざわざ透明にしなくても、透明テクスチャみたく、背景色や下の画像を活かしたままテクスチャを乗せることができます。CSSのブレンドモードを使えば、jpg画像のテクスチャだって重ねられるんです:O。ブレンドモードPhotoshopで言うところの、レイヤーの描画モード(乗算とかオーバーレイとか)と同じように、CSSにはブレンドモードというのがあります。ブレンドモードとは、重なり合った色の混ぜ方を指定するということ。ブラウザ上で、Photoshopの描画モードと同じような効果を表現することができるんですねー!CSSではふたつ、background-blend-modeプロパティと、mix-blend-modeプロパティで、ブレンドモードが使えます。background-blend-modeは、backgroundプロパティで指定した背景色と背景画像の色の混ざり方を指定するのに対して、mix-blend-modeは、重なっている要素の色の混ざり方を指定します。ブレンドモードが使えるプロパティbackground-blend-mode(バックグラウンド・ブレンド・モード)background-colorと重なった時のbackground-imageの色の混ざり方、background-image同士の色の混ざり方を指定します。mix-blend-mode(ミックス・ブレンド・モード)上に重った要素の、下要素との色の混ざり方を指定します(上に重なる要素に指定しないと意味ないです)。background-blend-mode、mix-blend-modeともに、指定できる値(ブレンドモード)は以下の通り。足らないのがあるけれど、ほとんどPhotoshopと同じですねー:D。normal(通常)darken(比較(暗))multiply(乗算)color-burn(焼き込み)lighten(比較(明))screen(スクリーン)color-dodge(覆い焼き)overlay(オーバーレイ)soft-light(ソフトライト)hard-light(ハードライト)difference(差の絶対値)exclusion(除外)hue(色相)saturation(彩度)color(カラー)luminosity(輝度)ページトップへ戻るbackground-blend-modeプロパティを使ってみるここでは、以下のようなHTMLとCSSを用意しました。HTMLは、main要素の中にsection要素をふたつ。片方は背景画像と背景色を指定する用、もう片方は背景画像だけを指定する用です。class="paper"><h1>背景色なし</h1></section></main>CSSは、背景画像を指定するpaperというクラスと、背景色を指定するcolorというクラスを用意します。ブレンドモードは、section要素どちらともにhard-light(ハードライト)を指定することにしました。背景画像には、「紙テクスチャ」で使ったのと同じ、画用紙テクスチャを使います(下図)。#553968;}背景色付き(左)の方は、まるで紫色の画用紙みたくなってますけれど、背景色なし(右)の方は、グレーのテクスチャ画像のままですね。その下の水色とは混ざりません。background-blend-modeプロパティでは、あくまで、backgroundプロパティで指定した値に対してブレンドモードが適用されるということなんですね。下の要素との色の混ざりを表現する場合は、mix-blend-modeを使うとよいです:)。ページトップへ戻るmix-blend-modeプロパティを使ってみる前述のbackground-blend-modeプロパティのサンプルに、さらにmix-blend-modeの指定を追記してみます。ブレンドモードは同じくhard-light(ハードライト)を指定。hard-light;}ブレンドされました。section要素ごとブレンドされてるからか、テキストもなんだかちょっと滲んじゃって見えますね...、背景画像だけブレンドされればよかったんだけどな...。そんな時には、背景画像だけ別の要素に表示させて、その要素にだけmix-blend-modeを指定すればよいです;)。ここではHTMLはそのままに、section要素全面を覆うようにbefore擬似要素を作って、そこに背景画像を表示してみました。0;...}※擬似要素にpositionプロパティでabsoluteを指定しているため、画像がテキストの上に被ってしまいます。h1要素にもpositionプロパティでrelative(static以外)を指定することで、テキストが画像に隠れないようにしています。body要素には混ざらないmix-blend-modeプロパティは、body要素には影響しないので注意です。下のサンプルでは、上のサンプルのmain要素を取っ払って、水色の背景色をbody要素に指定したものです。擬似要素にはmax-blend-modeプロパティでhard-light(ハードライト)を指定してるんですけれど、ブレンドされてないですね...:(。コメントデータの処理方法の詳細はこちらをご覧ください。