CSS3 新機能の適用における視覚効果の詳細な解釈

目次

• 背景と枠線パート1

• 背景と枠線パート2

• 図形

• 視覚効果

• タイポグラフィ

• ユーザーエクスペリエンス

• 構造とレイアウト

• トランジションとアニメーション

• ソースコードダウンロード

1. 片面シャドウの適用

• box-shadow属性、形式：h-shadow v-shadow ブラースプレッドカラーインセット属性値はじめに

• h-sahdow: 水平方向の影の位置、負の値が許可されます

• v-shadow: 垂直方向の影の位置、負の値が許可されます

• blur:ぼかし距離

• spread: 影のサイズ、拡張距離、負の値も可能

• color: 影の色

• inset/outset: 内部または外部の影

• 拡張影の距離は 4 つの側面すべてに有効であり、1 つの側面だけに適用することはできません。

• 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がborder-boxではありません）

  selement要素内の小さな角は、擬似要素を使用して生成されます。クリップパスソリューションで生成された形状：SVGのドロップシャドウを使用して、サンプルコードを達成します。

• 3. 染色体効果

• はフィルターに基づいて実装され、フィルター属性の関連する値を適用し、
画像
• の彩度、明るさ、その他の値を調整します。

min-bl
• end

  -modeに基づく 実装、機能: 要素コンテンツと背景、および以下の要素の「混合」を実現する

基本的なbackground-blend-mode実装、機能: 混合を実現する背景色と背景画像、背景画像と画像

の3種類 状況のサンプルコード:

• .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))        
   }

4. すりガラス効果

• 主な実装原理: コンテンツ疑似要素の背景は、下の背景と同じ画像を追加し、フィルターを追加します。ぼかしフィルター。ぼかしは、下にある背景や要素の背景には適用できません (これにより、要素自体がぼやけてテキストが見えなくなります)。また、疑似要素でのみ使用できることに注意してください。

  。

• コードは次のとおりです:

  .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;
          }

• コードの説明:

bodyとwrapの両方の擬似要素は同じ背景画像を適用します

wrapのbackground-attachmentはfixedに設定されているため、背景画像はスクロールに追従しません アニメーション

ラップ擬似要素は

絶対位置

に設定されており、Zインデックスレベルは背景よりも高いだけです

ブラーを使用してぼかしサイズを設定します

• ラップ擬似要素

• 幅を増やすには負のマージン値を使用し、親要素はオーバーフローを非表示にし、ぼかした背景をよりリアルにするために overflow:hidden を使用します。

• 5. コーナー効果

  実装手順

• まず、linear-gradientを使用してコーナー効果を実現します

• 次に、linear-gradinetを使用して三角形を生成し、その位置、幅、高さを設定します

コードは次のとおりです:

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;
}

• 注

• 100% 0/2em 2em は背景要素の位置と幅を配置します。特に 2em の幅と高さは標準です。背景要素の幅。

• 2 番目の線形グラデーションの 1.4em は、グラデーション軸に沿って測定されます。これは、グラデーション軸から要素の上端までの距離です。この場合、それは、グラデーション軸から要素までの距離です。右上端

から左下へは、グラデーションが左下隅から始まることを意味します

以上がCSS3 新機能の適用における視覚効果の詳細な解釈の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。