menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/04/22
  • CSS
  • html5

描画モードをCSSで指定 ブレンドモードの設定方法

Photoshopなどに搭載されている描写モード(ブレンドモード)機能。利用されている人もたくさんいると思いますが、CSSでも簡単に実装できるので複数設定方法を紹介いたします
blend

使用方法

HTML

基本的なHTML

Stylesheet

背景画像とカラー設定でブレンド

backgroundに「背景色」と「画像」を設定し、「background-blend-mode」プロパティに値を指定します。
今回は「multiply(乗算)」を指定。

画像と画像をブレンド

「background-image」にベース画像と重ねる画像を設定。

画像とテキストをブレンド

HTMLの要素にテキストを入力

テキスト部分を「mix-blend-mode」プロパティで設定。

Option

ブレンド可能なプロパティ値

・normal(初期値 / ブレンドされません)
・multiply(乗算)
・screen(スクリーン)
・overlay(オーバーレイ)
・darken(暗く)
・lighten(明るく)
・color-dodge(覆い焼きカラー)
・color-burn(焼き込みカラー)
・hard-light(ハードライト)
・soft-light(ソフトライト)
・difference(差の絶対値)
・exclusion(除外)
・hue(色相)
・saturation(彩度)
・color(カラー)
・luminosity(輝度)

DEMO

Webサイト上でのデザインの幅が広がるブレンドモード。ちょっとしたテクニックとして使えそうです!

コメントを残す

メールアドレスが公開されることはありません。




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11