CSSフィルタ (Filters) を使った9つの表現 – browser-land

CSSフィルタ (Filters) を使った9つの表現

 CSSフィルタ (Filters) を使った9つの表現

CSSフィルタは画像・文字・罫線等の要素に対してグラフィック効果を適用します。
複数のフィルタを使用するには、各フィルタをスペースで区切ります。
JavaScriptの場合は「element.style.filter = ‘blur(2px) brightness(1)’」とします。

filter:blur();
画像にガウスぼかしを適用します。
パーセンテージ値は受け入れません。

filter:blur(0px) filter:blur(2px) filter:blur(4px)

filter:brightness();
画像の明るさを調整します。
0%を指定すると、完全に黒い画像が作成されます。
100%でオリジナルの画像を表示できます。
100%以上の値を指定すると、画像を明るくできます。

filter:brightness(0%) filter:brightness(100%) filter:brightness(150%)

filter:contrast();
画像のコントラストを調整します。
0%を指定すると、完全に灰色の画像が作成されます。
100%でオリジナルの画像を表示できます。
100%以上の値を指定すると、画像のコントラストが大きくなります。

filter:contrast(0%) filter:contrast(100%) filter:contrast(150%)

filter:drop-shadow([offset-x] [offset-y] [blur-radius] [spread-radius] [color]);
画像にドロップシャドウ効果をかけます。
box-shadowプロパティとは異なり、アルファチャネルに適応した影を作成します。

* offset-x*(px):水平距離を指定します。
* offset-y*(px):垂直距離を指定します。
* blur-radius(px):値が大きいほど、ぼかし・影が大きくなり、軽くなります。
* color:指定しない場合、色はブラウザによって異なります。
filter:drop-shadow(2px 2px 2px #333) filter:drop-shadow(4px 4px 4px #333) filter:drop-shadow(6px 6px 6px #333)

filter:grayscale();
画像をグレースケールに変換します。
0%でオリジナルの画像を表示できます。
100%を指定すると完全にグレースケールになります。

filter:grayscale(0%) filter:grayscale(50%) filter:grayscale(100%)

filter:hue-rotate();
画像に色相回転を適用します。
値はangleを使い、0degまたは360degでオリジナルの画像を表示できます。

filter:hue-rotate(0deg) filter:hue-rotate(90deg) filter:hue-rotate(180deg)

filter:invert();
画像の色を反転します。値の適用は0%または100%のみとなります。
0%でオリジナルの画像を表示できます。
100%を指定すると色が反転されます。

filter:invert(0%) filter:invert(50%) filter:invert(100%)

filter:saturate();
画像の色の彩度を調整します。
0%を指定すると無彩色になります。
100%でオリジナルの画像を表示できます。

filter:saturate(0%) filter:saturate(50%) filter:saturate(100%)

filter:sepia();
画像をセピアに変換します。
0%でオリジナルの画像を表示できます。
100%を指定すると完全にセピアになります。

filter:sepia(0%) filter:sepia(50%) filter:sepia(100%)
Browser-Land

: DATA

: BLOG

All
CSS
HTML5
JavaScript
WordPress

: MAIL


 

 

 

: PRAVACY POLICY

タイトルへ

サウンド設定

スクリーン設定

プレイ
データ
設定
停止
次へ
戻る
戻る
戻る
削除
再配置
戻る
戻る
メール
ブログ
Twitter
ポリシー
ユニット
武器
サークル
ボックス
コード
キング
ソルジャー
アーチャー
ウィザード
スペーサー
ギア
ホイール
クランク
フレームA
フレームB
レール
ウォール
ワイヤー
ゴム紐
カップ
大砲
弾倉
ウッド材
アイアン材
透過材
+5 deg.
-5 deg.
+45 deg.
-45 deg.
右回転
左回転
動力無し
Turn Right
Turn Left
Neutral
ロード
セーブ
バトル
ロード