私は最近、空洞化効果について研究しました。 背景クリップ: テキスト 背景はテキストの前景色にクリップされます。私は最初に CSS-Tricks でこの使用法を見ました。CSS-Tricks の Web サイトでは、この方法があらゆるところで使用されています。 この方法により、単純な画像の背景のくり抜き効果を作成することは難しくなくなりました。キーコードは数行しかありません。 .ラッパー{ /* ... */ 背景画像: url("/path/to/your/image"); 背景クリップ: テキスト; /* ! */ 色: 透明; /* ! */ } ほんの数行で見た目が大きく変わります。前後の比較: さらに、上記よりも実践的なデモがあります
要点を述べます: CSS マスクプロパティ これは考えられる最も直接的な方法であるはずです。結局のところ、名前に「マスク」という言葉が含まれているので、誰がそれを無視できるでしょうか? CSS 最初の例 新しいプロパティではありますが、マスクプロパティの設定は難しくありません。これが最初の例です。 <div class="マスク" /> .マスクされた{ 高さ: 100px; 幅: 100ピクセル; 背景: 線形グラデーション(赤、オレンジ、黄色、薄緑、青、紫、赤); マスク: url("https://github.githubassets.com/pinned-octocat.svg"); } 下記がその効果です。 上記の使用法はまだ非常にシンプルです。 マスク-*大家族
マスク画像 マスク繰り返し マスク位置 マスククリップ マスクの起源 マスクサイズ - マスクタイプ マスク合成 マスクモード
.マスク{ 身長: /* ... */; 幅: /* ... */; 背景: /* ... */; マスク画像: url(https://github.githubassets.com/pinned-octocat.svg); マスクサイズ: 5em; マスクの位置: 中央; /* 気分が良ければアニメーションを追加しても大丈夫です */ } マスキング効果をさらに制御 読者の皆さんは、 mask-mode は特定のマスキング モードを指定するために使用されます。 mask-type CSS プロパティは それで、マスク値とは何でしょうか?マスク値は、マスクされた要素がマスクされる度合いを示します。マスク値が大きいほど、マスクされた領域がより多く表示されます。マスク値が最大の場合、領域は完全に不透明になります。例えば: <div class="mode">ABCDEFG</div> .モード{ 高さ: 200px; 幅: 300ピクセル; /* その他 */ マスク画像: 線形グラデーション(左、黒、黄色); mask-mode: 輝度; /* または alaph ? */ } 左側はマスク画像、中央は 一般的に、 複数のマスク画像が重ね合わされている場合のマスク効果の処理方法を指定します。一部のプロパティ値の効果は、マスク イメージ階層の順序によって異なります。 MDNのCodePenを試してみてください
ブレンドモード これは最も魔法のような方法であるはずです。 PS を使用する際、「ブレンドモード」という用語をよく目にします。何年も前に初めて Photoshop を使用したとき、「ブレンドモード」がどのようなものなのか非常に興味を持ち、すぐに Photoshop に対する畏敬の念を抱いたことを覚えています。しかし、当時私たちが感じた畏怖にもかかわらず、今ここで言及されている「ハイブリッドモデル」は非常に理解しやすいものです。 いわゆる「ブレンドモード」とは、レイヤーが重なり合ったときにピクセルの最終的なカラー値を計算する方法を指します。各ブレンド モードは、前景色の値と背景色の値 (それぞれ上部の色と下部の色) を入力として受け取り、いくつかの計算を実行して、画面に表示される最終的な色の値を出力します。最終的な表示色は、レイヤー内の重なり合う各ピクセルに対して実行されるブレンド モード計算の結果です。 簡単に言えば、ブレンドモードは、あるレイヤーを別のレイヤーに追加したときに何が起こるかを決定します。 CSS では、 普段は「ブレンドモード」のようなものは使わないので、 ここでは、中空効果を実現するために使用されるブレンド モードである これが空洞化とどう関係するかは、すでにお分かりだと思います。例を見てみましょう。 これで、 フローティング フレームに次の CSS を追加します。 .ロゴ { /* ... ... */ ミックスブレンドモード: スクリーン; } 次のようになります。 具体的なコードと効果を確認するには、このデモをご覧ください。 確かに、歯車アイコンは中空になっています。しかし、なぜ? まず一つ明確にしておきましょう。フローティング レイヤーをビデオの上に配置します。フローティング レイヤーは「前景」で、ビデオは「背景」です。まず、フローティング レイヤーの白い部分を見てみましょう。どの色の上に白を置くと白になるため、白い部分は保持されます。また、どの色の上に黒を置くと、下のレイヤーの色になるため、黒い部分はくり抜かれたように見えます。 ただし、この実装は、黒と白のみが使用されているため、ちょっとしたハックです。フローティング レイヤーの 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: IE8 を IE7 スタイルコードを使用するように設定する
>>: MySQL における exists、in、any の基本的な使い方
Ubuntu コマンドライン ウィンドウで次の操作を実行します。 1. 仮想環境をインストールする...
優先度両方のケースで同じ条件を設定すると、異なる結果セットが生成される可能性があるのは、優先順位のた...
目次1. Vueにおけるwatchの役割はその名の通り、監視の役割です。 2. このオブジェクトのプ...
Dockerはmysqlをインストールします docker search mysql 検索 dock...
序文一部の CSS 相互作用の影響により、要素に設定されたz-index実際のサイズに応じて重ね合わ...
問題: MySQL がデータ ファイルを保存するパーティションの容量が小さく、現在いっぱいになってい...
HTML 入力属性値属性value 属性は、入力フィールドの初期値を指定します。 <フォーム...
Oracle データベースから MySQL データベースへの移行では、Oracle データベース モ...
目次JavaScript のプライベート クラス フィールドとプライバシーの必要性JavaScrip...
1. cuda10.1をダウンロードします。 NVIDIA 公式ウェブサイト リンク: https:...
グローバルオブジェクトすべてのモジュールは呼び出すことができますglobal: ブラウザの wind...
目次序文:親切なヒント:変数1. 免責事項2. 譲渡3. 2つの小さな文法上の詳細変数の命名規則なぜ...
1|0 背景プロジェクトの要件により、各月の履歴在庫データをアーカイブしてバックアップする必要があり...
目次序文こんにちは世界画像 境界線の半径を設定する実ピクセルを設定する外部CSSをインポートttfフ...
この記事では主に、SQL 削除ステートメント DROP、TRUNCATE、および DELETE の違...