1つの要素を別の要素の上と下に織ります

このチュートリアルは、重複する要素を備えた視覚的に魅力的な織り効果を作成するCSS技術を示しています。聖書プロジェクトのウェブサイトのアニメーションに触発されたこの方法は、CSSブレンドモードとグリッドを使用して、クリーンで効率的なソリューションを使用しています。

イメージと回転したフレームがオーバーレイされていることから始めます。

<div class="design">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468109592364.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="1つの要素を別の要素の上と下に織ります">
  <div class="rotated-border"></div>
</div>

初期セットアップのCSS：

 。デザイン {
  位置：相対;
  高さ：300px;
  幅：300px;
}

.design> * {
  位置：絶対;
  高さ：100％;
  幅：100％;
}

.Rotated-Border {
  ボックスサイズ：ボーダーボックス;
  国境：15px＃eb311f solid;
  変換：回転（45DEG）;
  Box-shadow：0 0 10px＃eb311f、inset 0 0 20px＃eb311f;
}

赤いフレームは、 borderプロパティを使用して作成されます。 box-sizing: border-box回転後にフレームが中心にあることを保証します。

次に、画像のコピーを使用し、CSSブレンドモードを使用して、基礎となる画像とフレームの一部を選択的に明らかにします。これを達成し、白いグリッドセルをオーバーレイして画像の一部をマスクします。

HTML構造が拡張されます：

<div class="design">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468109592364.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="1つの要素を別の要素の上と下に織ります">
  <div class="rotated-border"></div>
  <div class="blend">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468109592364.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="1つの要素を別の要素の上と下に織ります">
    <div class="grid">
      <div></div>
      <div data-white></div>
      <div data-white></div>
      <div></div>
    </div>
  </div>
  <div class="blend2">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468109592364.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="1つの要素を別の要素の上と下に織ります">
    <div class="grid2">
      <div data-white></div>
      <div></div>
      <div></div>
      <div data-white></div>
    </div>
  </div>
</div>

ブレンドとグリッドのCSS：

 .blend、.blend2 {
  位置：絶対;
  高さ：100％;
  幅：100％;
  ミックスブレンドモード：乗算。
}

.grid、.grid2 {
  ディスプレイ：グリッド;
  Grid-Template-Columns：Repeat（2、1Fr）;
  グリッドテンプレート列：繰り返し（2、1Fr）;
  位置：絶対;
  高さ：100％;
  幅：100％;
}

[データホワイト] {
  背景色：白。
}

mix-blend-mode: multiply;透明性効果を作成します。グリッドは、白いボックスを戦略的に配置して、回転したフレームの不要な部分をマスクします。 2番目のグリッドと画像（ blend2 ）が追加され、目的の領域の白を復元します。

この階層化とブレンドモードの組み合わせにより、織り効果が生成されます。 CSSのマスキングは代替である可能性がありますが、ブレンドモードは、グリッドを使用したより良いブラウザの互換性とよりシンプルな実装を提供します。象限作成のためのグリッドの選択は便利です。 FlexBoxまたはその他の方法も使用できます。 data-white属性は、クリーンなHTMLのスタイルの選択です。 screen 、 darken 、またはlightenような他のブレンドモードも、グリッドセルの色を調整することで同様の結果を達成する可能性があります。

以上が1つの要素を別の要素の上と下に織りますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。