フツイッター フェイスブック RSS

WEB作成からカメラ・ガジェット・PC系など雑多なブログ

CSS

テクスチャ1枚とCSS3のbackground-blend-modeでグランジ表現をしてみる

2016年04月14日

css
Pocket

CSS3のブレンドモードを使ってみる

乗算やオーバーレイなど、photoshopなどでお馴染みのブレンドモード(描画モード)がCSSで実現できるのは便利じゃない!
ということで今回「background-blend-mode」を使って試しにグランジのテクスチャを使っていくつか表現を作ってみました。

ちなみに用意したテクスチャはこんな画像。

テクスチャ

ものによって大小必要ですが、以下の作例はこれを使っていきます。

ちなみにIE/edgeは完全非対応です。
やれやれ。

SAMPLE

色鉛筆で描いた雰囲気の線

色鉛筆

HTML

CSS

見た目はborderですが、background-blend-modeはbackgroundに指定するスタイルなので疑似要素に線幅の画像を重ねてあてています。
これはmix-blend-modeを使った方が良さそうですね。

ちなみに描画モードはcolor-dodgeにしました。

グランジ背景のアイコン

アイコン

HTML

CSS

単色だと素っ気ないアイコンもグランジをかければ小粋なワンポイントに!
そう、IE/edgeがなければね。

描画モードはscreenです。

グラデーションをかけた背景

グラデーション背景

HTML

CSS

グランジの上からグラデーションをかけてみました。
紙のテクスチャからグランジ用の画像を作ったのですがいい感じに紙の質感が出ていて、そのまんま色紙のテクスチャを貼り付けたような感じ。
グラデーションがライトを薄くかけたことでスポットライトをあてたような演出ができました。

描画モードはscreenにしました。

まとめ

今回はグランジでやってみましたが、パターンなんかでも応用がききそうですし、表現の幅が広がりますね!

edgeになってからも厄介者のマイクロソフトが何とかしてくれれば使ってみたいところです。

このカテゴリで良く読まれている記事
関連記事

COMMENT