CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでX線（X-Ray）効果を実現する方法

CSSのX線（X-Ray）フィルターは、要素にグレースケール処理を適用し、色の階調を平坦化することで、X線写真のような独特なモノクロ表現を作り出すエフェクトです。

X-Rayフィルターのパラメータ

このフィルターでは、以下のパラメータが使用されます。

番号 パラメータと説明
1. Xray
要素をグレースケール化し、色の深みを平坦化します。

実装例

以下のコードを実行すると、画像とテキストにX線効果を適用した結果を確認できます。

<html>
    <head>
    </head>
    <body>
       <img src="/css/images/logo.png" alt="CSS Logo" style="Filter: Xray" />

       <p>テキストの表示例：</p>

       <div style="width: 357;
          height: 50;
          font-size: 30pt;
          font-family: Arial Black;
          color: red;
          Filter: Xray;">CSS Tutorials</div>
    </body>
</html>

補足：モダンブラウザでの代替手段

Filter: XrayはInternet Explorer向けのレガシーな独自拡張であり、ChromeやFirefoxなどの最新ブラウザでは動作しない点に注意してください。同様のグレースケール効果を現代のブラウザで実現したい場合は、標準のCSSフィルター関数であるfilter: grayscale(100%)を使用するのがおすすめです。

  1. CSSで作るシェイク（振動）アニメーションの実装方法

    CSSのシェイク（振動）アニメーションとは？ シェイクアニメーションは、要素を左右（または上下）に素早く揺らすことで視覚的なインパクトを与えるCSSエフェクトです。フォーム入力エラーの警告や、ユーザーに注目してほしいコンテンツの強調など、幅広い場面で活用されています。 CSSでは@keyframesルールとtransform: translateX()を組み合わせるだけで、JavaScriptなどのスクリプトに頼らず手軽にこの効果を実装できます。 シェイクアニメーションの実装例 次のコードは、ロゴ画像を左右に振動させる例です。ページ下部の「Reload page」ボタンをクリックするとページ

  2. CSSで実装するウォブル（揺れ）アニメーション効果の作り方

    CSSの@keyframesとtransformプロパティを組み合わせることで、要素を左右に揺らす「ウォブル（wobble）アニメーション」を簡単に実装できます。移動と回転を段階的に変化させることで、まるで物体がぐらついているような自然な動きを表現できるのが特徴です。 以下のサンプルコードを実行して、実際のアニメーション効果を確認してみましょう。 サンプルコード <html>    <head>       <style>          .animate