Filter generator

グラフィック効果を要素に適用するオンラインフィルタジェネレータです。

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

Functions

filter

filter は Cascading Style Sheets（CSS）のプロパティで、ぼかしや色変化などのグラフィック効果を要素に適用します。

blur()

blur() は Cascading Style Sheets（CSS）の関数で、要素にガウシアンぼかしを適用します。

brightness()

brightness() は Cascading Style Sheets（CSS）の関数で、要素に線形乗算を適用し、明度を調整します。

contrast()

contrast() は Cascading Style Sheets（CSS）の関数で、要素のコントラストを調整します。

drop-shadow()

drop-shadow() は Cascading Style Sheets（CSS）の関数で、要素にドロップシャドウ効果を適用します。

grayscale()

grayscale() は Cascading Style Sheets（CSS）の関数で、要素をグレースケールに変換します。

hue-rotate()

hue-rotate() は Cascading Style Sheets（CSS）の関数で、要素の色相環を回転させます。

invert()

invert() は Cascading Style Sheets（CSS）の関数で、要素の色を反転します。

opacity()

opacity() は Cascading Style Sheets（CSS）の関数で、要素に透過性を適用します。

saturate()

saturate() は Cascading Style Sheets（CSS）の関数で、要素の彩度を設定します。

sepia()

sepia() は Cascading Style Sheets（CSS）の関数で、要素をセピア調に変換します。

Syntax

filter: blur(radius);
filter: brightness(amount);
filter: contrast(amount);
filter: drop-shadow(offset-x offset-y blur-radius color);
filter: grayscale(amount);
filter: hue-rotate(angle);
filter: invert(amount);
filter: opacity(amount);
filter: saturate(amount);
filter: sepia(amount);

Initial values

filter: none;

Previews

Examples html

<!-- example -->

<div class="example">

	<div class="value"></div>

</div>

<!-- /example -->

Examples css

/* - example - */

.example {
	position: relative;
	width: 100%;
	height: 50vh;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	overflow: hidden;
}

.value {
	display: block;
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;

	/* - background-image: url( "../../../assets/images/image.jpg" ); - */

	background-image: url( "image.jpg" );

	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;

	/* - filter: <filter-function>(<value>); - */

	filter: blur(5px);

}

/* - /example - */

Summary

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

グラフィック効果を要素に適用するオンラインフィルタジェネレータをご紹介させていただきました。

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

現場からは以上でした。

Search | valley.ac

Blog