CSS3新機能適用時の視覚効果-CSSチュートリアル-php.cn

CSS3新機能適用時の視覚効果

高洛峰

リリース： 2017-02-25 15:15:02

オリジナル

1353 人が閲覧しました

この記事では、片面シャドウ、不規則投影、染色体効果、すりガラス効果、コーナー効果などの CSS3 の新機能の視覚効果を紹介します。具体的な実装は次のとおりです。シャドウ

1. ボックス - シャドウ属性の適用、形式: h-shadow v-shadow ブラー拡散カラー inset 属性値の導入 h-sahdow: 水平方向のシャドウの位置、負の値が許可されます①v- shadow: 垂直方向の影の位置、負の値も可能です

②blur: ぼかしの距離

③spread: 影のサイズ、拡大距離、負の値も可能です

④color: 影の色

⑤インセット/アウトセット: 内部または外部の影

2. 影の拡張距離は 4 つの側面すべてに有効であり、単独で使用することはできません。片側に適用されます。

3. Box-shadow は、同時に有効になる複数の値のセットをサポートします

サンプルコード:

2. 不規則投影を使用します。 border-radius で生成される形状は非常に良好な影ですが、疑似要素や半透明の装飾を追加すると、影のパフォーマンスが非常に悪くなり、次のような状況で問題が発生します。

①半透明の画像、背景画像、またはボーダー画像

CSS3新機能適用時の視覚効果 ②要素に点線、点線、または半透明のボーダーが設定されているが、背景がない（または背景クリップがボーダーボックスではない場合）

③要素の中に何かがある小さな角は擬似要素を使って生成されている④クリップパスを通じて生成された形状

解決策: svgのドロップシャドウを使用して実現します

サンプルコード:

.wrap{
            width: 200px;
            height: 120px;
            background: yellowgreen;
            box-shadow: 2px 0px 4px -2px black,
                        -2px 0px 4px -2px black;
        }

ログイン後にコピー

3. 染色体効果

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

2. min-blend-mode の関数: 要素のコンテンツと背景、および次の要素の出現を実現する「Mix」

CSS3新機能適用時の視覚効果 3. 基本的な 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))
        }

ログイン後にコピー

four 、すりガラス効果

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

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

CSS3新機能適用時の視覚効果

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

ログイン後にコピー

コードの説明: 1. 同じ背景画像がボディとラップの両方の擬似要素に適用されます

2 ラップの背景アタッチメントは次のように設定されます。背景画像がスクロールに追従しないように修正します。一緒に移動します

3. ラップ擬似要素を絶対位置に設定し、Z インデックスレベルは背景よりも高いだけです

4. ブラーを使用してブラーを設定します。ラップ疑似要素のサイズ

CSS3新機能適用時の視覚効果 5. 親要素の幅を増やすには、負のマージン値を使用します。オーバーフローを非表示にし、ぼかした背景をよりリアルにするには、overflow:hidden を使用します。

5. コーナリング効果

実装手順

1. まず、linear-gradient を使用してコーナリング効果を実現します。2. 次に、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: &#39;&#39;;
    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. 100% 0/2em 2em は背景要素の位置と幅を配置します。特に 2em の幅と高さは背景要素の通常の幅です。背景要素。
2. 2 番目の線形グラデーションの 1.4em は、グラデーション軸に沿って測定されます。これは、グラデーション軸から要素の上端までの距離です。右上端
3. 左下は左下隅からグラデーションが始まることを意味します

以上がこの記事の全内容です。皆様の学習に役立つことを願っております。 PHP中国語ウェブサイト。新しい CSS3 機能の視覚効果に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。