*

要素にフィルタをかけてみる

公開日: : 最終更新日:2016/04/14 CSS

注意:今回書くfilterプロパティはChrome,Safari,Android,IOS7以降でないとは動作しません。

filter1プロパティを利用すると、要素に対して様々なフィルタをかけれます。フィルタの種類は、下記のフィルタ関数、またはSVGで定義しておいた設定を利用して指定する。

フィルタ関数を利用する場合は「opacity(40%)」というようにフィルタを適用する度合いを引数に指定します。

フィルタ関数
フィルタ関数名 説明
grayscale() 要素をグレースケールにします。
グレースケールにする度合を「0%~100%」の値で指定します。
初期値は「0%」です。「100%」で完全にグレーです。
sepia() 要素をセピア調にします。
セピア調にする度合を「0%~100%」の値で指定します。
初期値は「0%」です。「100%」で完全にセピア調です。
saturate() 要素を彩度を変更します。
現在の彩度を「100%」(初期値)として、彩度を変更する度合いを「0%」以上の値で指定します。0%を指定すると無彩色となり、値が大きくなるほど彩度が高くなります。
hue-rotate() 要素の色相を変更する。色相環を回転させる角度を「0deg~360deg」の値で指定します。初期値は「0deg」です。
invert() 階調を反転します。反転させる度合いを「0%~100%」の値で指定します。
初期値は「0%」です。「100%」を指定すると、完全に反転します。
opacity() 透明度を「0%~100%」の値で指定します。初期値はは「100%」です。「0%」を指定すると完全に透明になります。
brightness() 明度を変更する。現在の明度を「100%」(初期値)として、メイドを変更する度合いを「0%」以上の値で指定する。「0%」を指定すると完全に黒になり、値が大きくなるほど明るくなります。
contrast() コントラストを変更する。現在のコントラストを「100%」(初期値)として、コントラストを変更する度合いを「0%」以上の値で指定する。「0%」を指定すると、完全にグレーになる。
blur() ぼかしをつける。ぼかす幅を、数値に単位(%は不可)をつけて指定する。
初期値は「0」です。
drop-shadow() ドロップシャドウを付ける。影の長さと色を半角スペースで区切って指定する。指定方法はbox-shadowと同じです。box-shadowプロパティの影を広げる距離を指定する4つの目の値はdrop-shadow()関数では利用不可です。
SVGを利用
フィルタ関数名 説明
url() SVGで定義した設定のIDwo、「#ID」か「URL#ID」で指定する。

サンプルコードの実行結果はこちら

スポンサードリンク

関連記事

CSS

円形・放射状のグラデーションを指定する

radial-gradient()関数を利用すると、1点から放射状に広がる円形のグラデーションを表示

記事を読む

cateCSSPage

文字に影を設定する。

前回の記事で紹介したbox-shadowプロパティと 同じように文字にも影を付けることができます。

記事を読む

CSS

アニメーションの速度のパターンを設定する

animation-timing-functionプロパティを使うと、アニメーションを実行する速度の

記事を読む

cateCSSPage

要素の配置方法を設定するプロパティposition

コンテンツボックスは、画面の左上だったり、親要素の左上が 基準の位置です。postitionプロパ

記事を読む

cateCSSPage

枠線の形、太さを指定したい。

今回、触れるのは「border」プロパティです。コンテンツ領域と 前回の記事で紹介した「paddi

記事を読む

cateCSSPage

テキストの回り込みを設定するfloatプロパティ

通販サイトやニュースサイトを眺めていると 様々なコンテンツが横に並べて配置され、 それが複数あり

記事を読む

cateCSSPage

背景色を変更する。

タイトルの通り文背景の色を変更していきます。 背景を変更するときに使用するプロパティは ba

記事を読む

cateCSSPage

CSSって何?

HTMLでマークアップした文章を、そのままブラウザで 黒い文字、背景白でタグの初期設定のまま表示さ

記事を読む

cateCSSPage

線形グラデーションを設定する。

CSS3から背景やボーダーにグラデーションを付すことが できるようになっています。 表現でき

記事を読む

cateCSSPage

文字の太さを設定する

<h2>タグには、デフォルトで太字が設定されています。 この太さに関係するプロパティは

記事を読む

スポンサードリンク

Message

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

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑