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

迷茫
リリース: 2017-03-25 14:29:25
オリジナル
1407 人が閲覧しました

目次

  • 背景と枠線パート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種類 状況のサンプルコード:

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!