不規則な投影を実現するためのボックスシャドウとドロップシャドウのサンプルコード

不規則な投影を実現するためのボックスシャドウとドロップシャドウのサンプルコード

border-radius で生成できる四角形やその他の図形に影を追加する場合 (「Adaptive Ellipse」セクションのいくつかの例を参照)、box-shadow は完璧に機能します。ただし、要素に疑似要素や半透明の装飾が追加されている場合は、border-radius は透明な部分を恥ずかしげもなく無視するため、少し無力になります。このような状況には次のようなものがあります:

  • 半透明の画像、背景画像、または境界線画像(昔ながらの金色のフレームなど)。
  • 要素には点線、破線、または半透明の境界線がありますが、背景はありません (または background-clip が border-box でない場合)。
  • 吹き出し。その末尾は通常、疑似要素を使用して生成されます。

このような要素に box-shadow を直接適用すると、不完全な投影しか得られません。投影効果を完全に放棄することしかできないのでしょうか?この問題を解決する方法はありますか?

フィルター効果仕様 (http://w3.org/TR/filter-effects) は、この問題の解決策を提供します。また、SVG から借用した filter という新しい属性が導入されています。 CSS フィルターは基本的に SVG フィルターですが、使用するために SVG の知識は必要ありません。代わりに、blur()、grayscale()、そして必要な drop-shadow() など、フィルター効果を簡単に指定できるいくつかの関数だけが必要です。必要に応じて、スペースで区切って複数のフィルターを連結することもできます。次に例を示します。

フィルター: ぼかし() グレースケール() ドロップシャドウ();

drop-shadow() フィルターは box-shadow プロパティと同じパラメータを受け入れますが、拡張半径は含まれず、inset キーワードも含まれず、コンマ区切りのマルチレイヤー シャドウ構文もサポートされません。たとえば、上の投影は次のようになります。

ボックスの影: 2px 2px 10px rgba(0,0,0,.5);

次のように書くことができます:

フィルター: ドロップシャドウ(2px 2px 10px rgba(0,0,0,.5)); 

CSS フィルターの最も優れた点は、適切に機能が低下することです。ブラウザーがフィルターをサポートしていない場合は何も起こらず、効果がありません。この効果をできるだけ多くのブラウザで動作させる必要がある場合は、SVG フィルターを添付して、ブラウザのサポートを少し向上させることもできます。各フィルター関数に対応する SVG フィルター バージョンについては、フィルター効果仕様 (http://www.w3.org/TR/filter-effects/) を参照してください。 SVG フィルターと簡略化された CSS フィルターを組み合わせて、どの行を適用するかをカスケードで決定することができます。

フィルター: url(drop-shadow.svg#drop-shadow);
フィルター: ドロップシャドウ(2px 2px 10px rgba(0,0,0,.5));

残念ながら、SVG フィルターが別のファイルに保存されている場合、簡潔で使いやすい関数のように CSS コード内で自由に構成することはできません。インラインの場合は、コードが乱雑になります。パラメータはファイル内にハードコードする必要があるため、新しい投影効果を追加するたびに、たとえ類似したものであっても、追加のファイルを準備する必要がありますが、これは明らかに受け入れられません。もちろん、データ URI を使用することもできます (これにより、余分な HTTP リクエストも節約されます) が、この方法ではファイル サイズが依然として増加します。一般に、このアプローチは単なるフォールバック ソリューションであるため、SVG フィルターの数を一定の制限以下に抑える限り、効果が同様であっても許容されます。

覚えておくべきもう 1 つの点は、先ほど見たように、テキスト (背景が透明な場合) を含め、透明でないものはすべて同じように影が付けられるということです。 text-shadow: none; を使用するとテキストの影を消すことができるのだろうかと疑問に思うかもしれません。実際、text-shadow はこれとはまったく関係がないので、これを行うとテキストの drop-shadow() 効果がキャンセルされることはありません。さらに、すでに textshadow を使用してテキストにドロップ シャドウを追加している場合は、テキスト シャドウは drop-shadow() フィルターによってシャドウされ、基本的にシャドウにドロップ シャドウが追加されます。次のコード例をご覧ください (ひどい結果はご容赦ください。これはこの奇妙な問題を強調するためだけです)。

色: ディープピンク;
境界線: 2px 実線;
テキストシャドウ: .1em .2em 黄色;
フィルター: ドロップシャドウ(.05em .05em .1em グレー);

レンダリング効果を確認すると、画像内のテキストに textshadow と drop-shadow() の両方がマークされていることがわかります。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  イメージのパッケージ化とワンクリック展開を実現するためにDockerを組み合わせたアイデア

>>:  要素シャトルフレームのパフォーマンス最適化の実装

推薦する

JavaScript クロージャの説明

目次1. クロージャとは何ですか? 1.2 クロージャのメモ化: 関数は定義された環境を記憶する1....

フォームから Vue ElementUI を使用してログイン効果を実装する例

目次1. ElementUIで基本的なスタイルを構築する2. [送信]ボタンをクリックして、アカウン...

MySQL のデータ型とフィールド属性の原理と使用法の詳細な説明

この記事では、MySQL のデータ型とフィールド属性について説明します。ご参考までに、詳細は以下の通...

Nginxを再コンパイルしてモジュールを追加する方法

Nginx をコンパイルしてインストールするときに、http_ssl_module などの一部のモジ...

Linuxはnode.jsを完全に削除し、yumコマンドで再インストールします。

最初のステップ組み込みのパッケージ管理機能で一度削除する yum 削除 nodejs npm -y ...

MySQL フェイルオーバー ノート: アプリケーション対応設計の詳細な説明

1. はじめに周知のように、データベース ミドルウェアの読み取り/書き込み分離のアプリケーション シ...

小さな三角形の実装コードを含む CSS ナビゲーション バー メニュー

多くの Web ページにはナビゲーション バーに小さな三角形があり、この機能を実装するのは実は非常に...

threejs でリアルタイムポリゴン屈折を実装する方法

目次序文ステップ1: セットアップと前方屈折ステップ2: 反射とフレネル方程式ステップ3: 多面屈折...

MySQL タイムブラインドインジェクションの 5 つの遅延方法

MySQL タイム ブラインド インジェクションの 5 つの遅延方法 (PWNHUB の予期しない解...

td セルを結合した場合の td 幅の問題

以下の例では、名前が入っている td の幅が 60px のとき、2 行目の文字数が少ない場合は正常に...

ニューススタイルのウェブサイトデザイン例25選

bmi ボイジャーピッチフォークアルスター食料品店チャウ真/斜めポスタこれは偽のDIYですクリエイテ...

Linuxサーバ侵入緊急対応記録(概要)

最近、お客様から支援の依頼を受けました。管理されている通信コンピュータ ルームから、サーバーの 1 ...

Docker で MySQL を起動したときに SQL 文を自動的に実行する方法

Docker で MySQL コンテナを作成する場合、コンテナの起動後にデータベースとテーブルが自動...

MySQLデータベースに接続し、クエリ操作を実行するためのIDEAの完全なコード

1.まずMysqlリンク設定ページを書く パッケージ com.wretchant.fredis.me...