TOPページ > フィルタ(特殊)効果で文字や画像を修飾する
フィルタ(特殊)効果で文字や画像を修飾する

フィルタ(特殊)効果で文字や画像を修飾する

色や大きさ、背景色や枠線といった基本的な文字や画像の修飾のほかに、よりダイナミックにこれらを修飾する方法として、フィルタ(特殊効果)があります。

ホームページやブログを個性的に演出したい方にはもってこい、といいたいところですが、これらの指定は対応していないブラウザもありますので、非対応のブラウザでは著しく見映えを損なう恐れがあります。

くれぐれもこの点には注意してご利用ください。

フィルタ(特殊)効果で文字や画像を修飾する 項目一覧

HTML言語を使用したホームページやブログなどのウェブサイトでは、文字や画像をX線をあてたような白黒に変換して表示させることができます。 この効果は、Inter...

HTML言語を使用したホームページやブログなどのウェブサイトでは、文字や画像を補色に反転して表示させることができます。 この効果は、InternetExplor...

HTML言語を使用したホームページやブログなどのウェブサイトでは、文字や画像を白黒(グレースケール)に変換して表示させることができます。 この効果は、Inter...

HTML言語を使用したホームページやブログなどのウェブサイトでは、文字や画像に発光しているような効果を持たせることができます。(発光効果) この効果は、Inte...

HTML言語を使用したホームページやブログなどのウェブサイトでは、文字や画像を上下や左右に反転させて表示することができます。 この効果は、InternetExp...

HTML言語を使用したホームページやブログなどのウェブサイトでは、文字や画像に影を投影して表示したり、影付きにして表示させたりすることができます。 この効果は、...

2006年05月23日

HTML言語を使用したホームページやブログなどのウェブサイトでは、文字や画像をX線をあてたような白黒に変換して表示させることができます。

この効果は、InternetExplorer専用ですので、多くのブラウザで見映えを統一したい方にはお勧めしません。

<タグ名 style="position:absolute;filter:Xray(パラメータ)></タグ名>
  1. タグ名:DIV および SPAN タグが使用できます。
  2. パラメータ:『パラメータ名 = 値』という形式で指定します。指定できるパラメータは enable のみですので、通常省略します。
    パラメータ名値の範囲と意味
    enabledtrue ならフィルタ効果有効、false なら無効

サンプルです。IE以外のブラウザでご覧の方には、意図通り表示されておりません。

続きを読む "文字や画像をX線をあてたような白黒で表示する" »

HTML言語を使用したホームページやブログなどのウェブサイトでは、文字や画像を補色に反転して表示させることができます。

この効果は、InternetExplorer専用ですので、多くのブラウザで見映えを統一したい方にはお勧めしません。

<タグ名 style="position:absolute;filter:GrayInvert(パラメータ)></タグ名>
  1. タグ名:DIV および SPAN タグが使用できます。
  2. パラメータ:『パラメータ名 = 値』という形式で指定します。指定できるパラメータは enable のみですので、通常省略します。
    パラメータ名値の範囲と意味
    enabledtrue ならフィルタ効果有効、false なら無効

サンプルです。IE以外のブラウザでご覧の方には、意図通り表示されておりません。

続きを読む "文字や画像を補色に反転する" »

HTML言語を使用したホームページやブログなどのウェブサイトでは、文字や画像を白黒(グレースケール)に変換して表示させることができます。

この効果は、InternetExplorer専用ですので、多くのブラウザで見映えを統一したい方にはお勧めしません。

<タグ名 style="position:absolute;filter:Gray(パラメータ)></タグ名>
  1. タグ名:DIV および SPAN タグが使用できます。
  2. パラメータ:『パラメータ名 = 値』という形式で指定します。指定できるパラメータは enable のみですので、通常省略します。
    パラメータ名値の範囲と意味
    enabledtrue ならフィルタ効果有効、false なら無効

サンプルです。IE以外のブラウザでご覧の方には、意図通り表示されておりません。

続きを読む "文字や画像を白黒で表示する" »

HTML言語を使用したホームページやブログなどのウェブサイトでは、文字や画像に発光しているような効果を持たせることができます。(発光効果)

この効果は、InternetExplorer専用ですので、多くのブラウザで見映えを統一したい方にはお勧めしません。

<タグ名 style="position:absolute;filter:Glow(用パラメータ)></タグ名>
  1. タグ名:DIV および SPAN タグが使用できます。
  2. パラメータ:下記の中から指定できます。『パラメータ名 = 値』という形式で指定します。複数のパラメータを指定する場合は、半角カンマで区切って併記してください。
    パラメータ名値の範囲と意味
    color発光部分のカラー名称またはカラー番号
    strength発光強度
    enabledtrue ならフィルタ効果有効、false なら無効
    カラーについて、詳しくはこちら→『16進数カラー見本

サンプルです。IE以外のブラウザでご覧の方には、意図通り表示されておりません。
発光効果が分かりやすいよう、背景色を黒にしています。

続きを読む "文字や画像を発光して表示させる(発光効果)" »

2006年04月23日

HTML言語を使用したホームページやブログなどのウェブサイトでは、文字や画像を上下や左右に反転させて表示することができます。

この効果は、InternetExplorer専用ですので、多くのブラウザで見映えを統一したい方にはお勧めしません。

左右に反転する
<タグ名 style="position:absolute;filter:FlipH(パラメータ)></タグ名>
上下に反転する
<タグ名 style="position:absolute;filter:FlipV(パラメータ)></タグ名>
  1. タグ名:DIV および SPAN タグが使用できます。
  2. パラメータ:『パラメータ名 = 値』という形式で指定します。指定できるパラメータは enable のみですので、通常省略します。
    パラメータ名値の範囲と意味
    enabledtrue ならフィルタ効果有効、false なら無効

サンプルです。IE以外のブラウザでご覧の方には、意図通り表示されておりません。

続きを読む "文字や画像を反転させて表示する" »

2006年04月22日

HTML言語を使用したホームページやブログなどのウェブサイトでは、文字や画像に影を投影して表示したり、影付きにして表示させたりすることができます。

この効果は、InternetExplorer専用ですので、多くのブラウザで見映えを統一したい方にはお勧めしません。

他のブラウザでも影付きにして表示させたい方は、こちらの方法をおすすめします。→『表示位置の指定を使って文字を影付きにする

影を投影する
<タグ名 style="position:absolute;filter:Dropshadow(ドロップシャドウ用パラメータ)></タグ名>
影付き文字にする
<タグ名 style="position:absolute;filter:Shadow(シャドウ用パラメータ)></タグ名>
  1. タグ名:DIV および SPAN タグが使用できます。
  2. ドロップシャドウ用パラメータ:下記の中から指定できます。『パラメータ名 = 値』という形式で指定します。複数のパラメータを指定する場合は、半角カンマで区切って併記してください。
    パラメータ名値の範囲と意味
    color影のカラー名称またはカラー番号
    offXX(横方向)のオフセット値
    offYY(横方向)のオフセット値
    positivetrue なら通常の影付き、false ならカットアウト表示
    enabledtrue ならフィルタ効果有効、false なら無効
    カラーについて、詳しくはこちら→『16進数カラー見本
  3. シャドウ用パラメータ:下記の中から指定できます。複数のパラメータを指定する場合は、半角カンマで区切って併記します。
    パラメータ名値の範囲と意味
    color影のカラー名称またはカラー番号
    direction影の方向。0、45、90...というように45°単位で指定
    enabledtrue ならフィルタ効果有効、false なら無効

サンプルです。IE以外のブラウザでご覧の方には、意図通り表示されておりません。

続きを読む "文字や画像に影をつける" »

IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス