ホームページ > 記事 > ウェブフロントエンド > CSS3視覚効果の実装
今回は CSS3 の視覚特殊効果の実装についてお届けします。 CSS3 の視覚特殊効果を実現するための注意点は何ですか? 以下は実際のケースです。
1. 片面シャドウ
1. box-shadow 属性の適用、形式: h-shadow v-shadow ブラースプレッドカラー inset 属性値の導入 h-sahdow: 水平シャドウの位置、負の値を許可
①v-shadow: 垂直方向の影の位置、負の値も可能です
②blur: ぼかしの距離
③spread: 影のサイズ、拡張距離、負の数も可能です
④color:影の色
⑤インセット/アウトセット: 内部または外部の影
2. 影の拡張距離は 4 つの側面すべてに有効であり、1 つの側面だけに適用することはできません。
3. Box-shadow は、同時に有効になる複数の値のセットをサポートします
サンプルコード:
.wrap{ width: 200px; height: 120px; background: yellowgreen; box-shadow: 2px 0px 4px -2px black, -2px 0px 4px -2px black; }2. border- によって生成される形状。 radius は投影には適していますが、疑似要素や半透明の装飾が追加されると、影のパフォーマンスが非常に低下し、次のような状況で問題が発生します。
① 半透明の画像、背景画像
、または border-image② 要素は点線、点線、または半透明の境界線を設定しますが、背景はありません (またはbackground-clip はボーダーボックスではありません)
③要素内の小さな角は疑似要素を使用して生成されます解決策: svgのドロップシャドウを使用して実現しますサンプルコード:.wrap{ width: 200px; height: 120px; border: 6px dotted yellowgreen; --box-shadow: 0px 0px 4px 0px black; -webkit-filter: drop-shadow(2px 0px 2px rgba(0,0,0,1)) }3つ。 1. フィルターの実装に基づいて、フィルター属性の関連する値を適用して、画像の彩度、明るさ、その他の値を調整します
2. min-blend-mode、関数に基づいて実装します。要素コンテンツ、背景、および次の要素の出現を実現します。「Mix」
3. 基本的な背景ブレンドモードの実装、機能: 背景色と背景画像、背景画像と画像の混合を実現します のサンプルコード3 つの状況:
.wrap1{ width: 200px; height: 120px; overflow: hidden; } .wrap1 > img{ max-height: 100%; max-width: 100%; -webkit-filter: sepia(1) saturate(4) hue-rotate(150deg); } .wrap2{ width: 200px; height: 120px; background: hsl(335, 100%, 50%); overflow: hidden; } .wrap2 > img{ height: 100%; width: 100%; mix-blend-mode: luminosity; } .wrap3{ width: 200px; height: 120px; background-size: cover; background-color: hsl(335, 100%, 50%); background-image: url("../img/cat.png"); background-blend-mode: luminosity; }
4. 曇りガラス効果
主な実装原則: コンテンツ擬似要素の背景は、その下の背景の画像と同じであり、filter:blur ぼかしフィルターを追加します。ぼかしは、下にある背景や要素の背景には適用できません (これにより、要素自体がぼやけてテキストが見えなくなります)。また、擬似要素でのみ使用できることに注意してください。 。
コードは次のとおりです:
body{ background: url("../img/cat.png") no-repeat; background-size: cover; } .wrap{ position: relative; width: 500px; margin: 0px auto; padding: 10px; line-height: 1.5; background: hsla(0, 0%, 100%, .3); overflow: hidden; } .wrap::before{ content: ''; background: url("../img/cat.png") 0/cover fixed; position: absolute; top: 0; right: 0; bottom: 0; left: 0; filter: blur(20px); z-index: -1; margin: -30px; }
コードの説明: 1. body 疑似要素と Wrap 疑似要素の両方に同じ背景画像が適用されます
2. Wrap の
background-attachmentは固定に設定されているため、背景画像がスクロールに伴って移動しないこと
3. ラップ擬似要素を絶対位置に設定し、z インデックス レベルを背景よりも高く設定します
4. ブラーを使用してぼかしサイズを設定します。疑似要素をラップします。5. 負のマージン値を使用して幅を増やし、親要素にオーバーフローを使用してオーバーフローを非表示にし、ぼかした背景をよりリアルにします。 実装手順1. まず、linear-gradient を使用してコーナリング効果を実現します。2. 次に、linear-gradinet を使用して、三角形を生成し、その位置、幅、高さを設定します コードは次のとおりです。.wrap{ background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .4) 0) no-repeat 100% 0/2em 2em, linear-gradient(-135deg, transparent 1.4em, #58a 0); width: 200px; height: 120px; }注
1. 100% 0/2em 2em は背景要素の位置、幅、高さを配置します。特に 2em の幅と高さは背景要素の通常の幅です。 。
2. 2 番目の線形グラデーションの 1.4em は、グラデーション軸に沿って測定されます。これは、グラデーション軸から要素の上端までの距離です。この場合、それは、グラデーション軸から上端までの距離です。右端
3. 左下へは、左下隅からグラデーションが始まることを意味します
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、 の他の関連記事に注目してください。 PHPの中国語サイトです!
推奨書籍:
以上がCSS3視覚効果の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。