Blog

|
Sunday, July 7th, 2024

Blend modes

mix-blend-mode プロパティを使用して色の反転を実装します。

ご自由にご利用ください。

Definitions

mix-blend-mode は Cascading Style Sheets（CSS）のプロパティで、要素の内容物と親要素の内容物や要素の背景をどのように混合するかを設定します。

Syntax

mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

Initial values

mix-blend-mode: normal;

Property values

mix-blend-mode: difference;

Values

blend-mode は Cascading Style Sheets（CSS）のデータ型で、要素が重なったときにどのように色が現れるかを記述します。background-blend-mode または mix-blend-mode プロパティで使用されます。

値（difference）は、ふたつの色のうち明るい色から暗い色を減算した結果が最終的な色になります。 黒いレイヤーは変化をもたらしません。白いレイヤーはもうひとつのレイヤーの色を反転します。

Previews

mix-blend-mode: difference;

Examples html

<!-- container -->

<div class="container">

	<div class="heading">
		<h2>mix-blend-mode: difference;</h2>
	</div>

	<div class="background background1"></div>
	<div class="background background2"></div>
	<div class="background background3"></div>
	<div class="background background4"></div>

</div>

<!-- /container -->

Examples css

/* - container - */

.container {
	position: relative;
	width: 100%;
	height: 50vh;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: rgba(0, 0, 0, 1.0);
	overflow: auto;
}

.heading {
	display: block;
	position: sticky;
	top: 0px;
	left: 0px;
	width: 100%;
	min-height: 50vh;
	margin: 0px 0px 0px 0px;
	padding: 25px 25px 25px 25px;
	background-color: rgba(0, 0, 0, 0.0);
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-content: flex-start;
	align-content: flex-start;
	-webkit-align-items: flex-start;
	align-items: flex-start;

	/* - mix-blend-mode: <blend-mode>; - */

	mix-blend-mode: difference;

}

.heading h2 {
	width: 100%;
	height: auto;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: rgba(0, 0, 0, 0.0);
}

.heading h2 {
	font-family: sans-serif;
	font-size: 2.2rem;
	font-style: normal;
	font-weight: 200;
	text-decoration: none;
	color: rgba(255, 255, 255, 1.0);
}

.background {
	width: 100%;
	min-height: 50vh;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.background1 {
	background-color: rgba(255, 255, 255, 1.0);
}

.background2 {
	background-color: rgba(0, 0, 0, 1.0);
}

.background3 {
	background-color: rgba(255, 255, 255, 1.0);
}

.background4 {
	background-color: rgba(0, 0, 0, 1.0);
}

/* - /container - */

Summary

最後までご高覧いただきましてありがとうございました。

mix-blend-mode プロパティを使用して実装する色の反転をご紹介させていただきました。

必要に応じて各コードを変更してご自由にご利用ください。

現場からは以上でした。
Vol.47

Related Posts