CSSを使用してフォルダー「スリット」効果を作成する方法

フォルダーからわずかに露出した紙の効果、またはデザインの「亀裂」効果と呼ばれるウォレットからわずかに伸びるクレジットカードの視覚効果をシミュレートします。 CSSを使用すると、この視覚的幻想を巧みに作成し、要素を開口部から突き出させるように見えます。

デザインの鍵は影で、亀裂を意味する視覚的な手がかりを提供します。次に、亀裂を覆う要素があり、下から覗く要素のためのスペースを提供します。

一緒になって、次のような効果を作成します：

最初に影を作成します

例の影は、実際のCSSシャドウ（box-shadowやdrop-shadow()フィルターなど）を使用して作成されていないことに驚くかもしれません。代わりに、影自体は独立した要素であり、色が暗くぼやけています。これは、デフォルトおよびアニメーションの状態でデザインをより適応性のあるものにするために重要です。

別の要素はオーバーレイで、影の上に重なります。次の画像は、影とオーバーレイがどのように結合されるかを示しています。

影は、勾配の背景を持つ小さな直立した長方形で構成されています。勾配は真ん中が暗いです。したがって、要素がぼやけていると、中央に暗い影が生まれます。

再現された影の左半分は、容器の背景色とまったく同じ色を持つ上部の長方形で覆われています。

オーバーレイとシャドウは、左に少し移動して、レイヤーのように見えるようにします。

カバーを扱います

オーバーレイを設計された背景とブレンドするには、その背景色が含まれている要素から継承されます。または、設計の選択と要件に応じて、CSSマスクやブレンドモードなどの標準を使用してオーバーレイを背景とブレンドすることもできます。

これらの標準を適用する方法に関するいくつかの基本では、次の記事を参照できます。「マスキングvs.クリッピング：それぞれを使用する時期」とサラドラスナーは、マスクの優れた紹介を提供します。また、この投稿でCSSハイブリッドモードについても書きました。ここでは、関連トピックを確認できます。

要素内の要素を調整およびスタックすることに気付くでしょう。同様のデザインを再現している場合は、アプリケーションに最適なレイアウトメソッドを使用して、デザインのさまざまな部分を揃えてください。この場合、<main></main>要素に単一の列グリッドを設定します。これにより、オーバーレイ、シャドウ、画像を中央に配置できます。 <main></main>

コンテナのすべての幅になるようにすることもできます。

main > div {
  grid-area: 1 / 1;
}

これにより、すべてが一緒に積み重ねられます。多くの場合、グリッド内の他の要素で要素をカバーすることを避けようとします。しかし、この例はこれに依存しています。 .slit-coverの幅を50％に設定しました。これは、以下の画像を自然に表示します。そこから、変換を設定してネガティブ方向に50％移動します。さらに、は、それが表示されていることを確認するために、少量の影（25px）を移動しました。

.slit-cover {
  width: 50%;
  transform: translatex(calc(-50% - 25px));
  /* etc. */
}

属性、box-shadowフィルター、またはSVGフィルターを使用して、同じシャドウ効果を取得することができます。 drop-shadow()

フィルターの値を変更します。オーバーレイとシャドウの形状も調整することができます。まっすぐな影の代わりに湾曲した影を作成し、コメントで私たちと共有できると思います。 blur()

以上がCSSを使用してフォルダー「スリット」効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。