*

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

公開日: : 最終更新日: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」で指定する。

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

スポンサードリンク

関連記事

cateCSSPage

HTMLファイルにCSSファイルを読み込ませる

CSSを適用するファイルを開きます。 そこで、適用したいスタイルを下記のサンプルコードの ように

記事を読む

CSS

フレックスコンテナ内の主軸方向の配置方法を指定する

フレックスコンテナ内の主軸方向に余白ができるとき、フレックスアイテムと余白をどのように配置するのかを

記事を読む

cateCSSPage

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

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

記事を読む

CSS

子要素を透視図法で表示したり、要素の裏面の表示方法を指定する

視点の距離を指定することで子要素で透視図法で表示するときに利用するのがperspectiveプロパテ

記事を読む

CSS

トランジション効果を付けてみる

トランジション、遷移と言ったりします。トランジションとは、あるスタイルを別のスタイルへスムーズに変化

記事を読む

cateCSSPage

要素の表示形式を変更するdisplayプロパティ

要素にはブロックレベル要素とインラインレベル要素というものが あります。 サンプルプログラム

記事を読む

CSS

要素に2次元の変形効果を付けてみる

transformプロパティを利用すると、要素のボックスに2次元、3次元の変形効果を適用できます。2

記事を読む

CSS

フレックスコンテナでアイテムを複数行に配置する

フレックスコンテナ内の全てのフレックスアイテムは、1行で配置されますが、flex-wrapプロパティ

記事を読む

CSS

アニメーションのキーフレームとアニメーション時間を設定する

トランジションの機能を拡張したもので、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 ↑