画像なしでCSS3ペーパーカールを作成する方法

このチュートリアルでは、画像なしでCSS3ペーパーカール効果を作成することを示しています。 以前のチュートリアルでは、CSS3の:beforeおよび:after

紙のカール効果は光学的な幻想であり、通常、要素の底に影で達成されます。 以前は、これに必要な画像編集ソフトウェアが必要でした。 CSS3は優れた代替品を提供します。 CSS3の使用の利点には、以下が含まれます。ブラウザの互換性（古いブラウザーで優雅に劣化）、バックグラウンドの独立性、スケーラビリティ、再利用可能なコード、簡単なカスタマイズ。

最初に、シンプルなHTML要素を作成します：

次に、

<code class="language-html"><div class="box">My box</div></code>

：

を使用して基本的な内側と外側のシェーディングを追加します box-shadow

<code class="language-css">.box {
  position: relative;
  width: 500px;
  padding: 50px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}</code>

カール効果は、2つの

と

pseudo-elementsで作成されます。これらは次のとおりです :before CSS3変換を使用して回転して歪んでいます 下端に配置されています。:after

。
1. が与えられます
3. box-shadow設定
擬似エレメントをメインボックスの後ろに配置し、影のエッジのみが表示されるようにします：

擬似要素のcss：z-index: -1

これは、より広範なブラウザーサポートにベンダープレフィックスを使用していますが、画像ベースのソリューションよりも効率的なままです。 効果は最新のブラウザで機能します。古いブラウザは、単に影を省略します。 デモンストレーションページが利用可能です（入力で提供されていないため、リンクは省略されています）。 CSSはHTML内に埋め込まれています。 IE6、7、および8は、影の効果を表示せずに優雅に劣化します。 純粋なCSS3の紙のカールに関するよくある質問（FAQ）は、元のテキストですでに適切に回答されているため、省略されています。

以上が画像なしでCSS3ペーパーカールを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。