CSS3 を使用してすりガラスを作成するグラフィック例を共有する-htmlチュートリアル-php.cn

CSS3 を使用してすりガラスを作成するグラフィック例を共有する

零下一度

リリース： 2017-06-24 14:27:12

オリジナル

1585 人が閲覧しました

忙しいスケジュールの合間を縫って、最近クールなエフェクトをたくさん見ています。現在、jquery ベースのプラグインは数多くありますが、多くのプラグインは互換性があまり良くないため、ネイティブのプラグインが最適です。日常生活の中で、すりガラスが当たり前になったのは一昔前のことです。いいえ、これがすりガラスです:

はは、これ以上おしゃべりはやめて、本題に取り掛かりましょう。最初に最終的な効果を見てみましょう:

さて、わかりました、手順を始めましょう:

最初のステップ: ページの基本構成:

本文に大きな背景画像を設定し、中央に div を設定します。 HTML コードは次のとおりです:

<body>
<div >
    iPhone 7 dramatically improves the most important aspects of the iPhone experience. It introduces advanced new camera systems. The best performance and battery life ever in an iPhone. Immersive stereo speakers. The brightest, most colorful iPhone display. Splash and water resistance.1 And it looks every bit as powerful as it is. This is iPhone 7.
</div>
</body>

ログイン後にコピー

テキストの大部分は次のとおりです。 divを開いて作成します。効果はより明白です

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

   body {
            min-height: 100vh;
            box-sizing: border-box;
            margin: 0;
            padding-top: calc(50vh - 6em);
            font: 150%/1.6 serif;
            background: url("http://www.jackzxl.net/wp-content/MyFile/2016/09/iphone.jpg") fixed 0 center;
            background-size: cover;
        }
        div {
            margin: 0 auto;
            padding: 1em;
            max-width: 30em;
            border-radius: 0.3em;
            box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
            0 .5em 1em rgba(0, 0, 0, 0.6);
            text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
            background: hsla(0,0%,100%,.3);
        }

ログイン後にコピー

上記のスタイルコードを見てください。本文では、vhはビューポートのサイズ、100は100%、背景を固定位置に設定し、 div で要素全体をカバーし、中央に背景色を設定してから、次のようになります:

明るい小さな透明なガラスが出てきます。それでは、曇りガラスの処理を始めましょう

ステップ 2: 背景をぼかした曇りガラスの設定

CSS にも、同じぼかし設定があります。

filter: Blur(20px);

後ろの値はぼかしですサイズ。値が大きいほどぼやけますが、現在はピクセルのみがサポートされていません。

サブディビジョンがぼやけてしまうため、このスタイルを div に直接追加することはできません。今回は、疑似要素、つまり::before; を使用できます。疑似要素を使用する前に、blur を使用した後に疑似要素が div ボックス全体をオーバーフローするため、div に相対位置を追加する必要があります。美しく上品にするには、 div に overflow: hidden を追加する必要があります。つまり:

  overflow: hidden;
  position: relative;

ログイン後にコピー

div の疑似要素:

   div::before{
            content: &#39;&#39;;
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            z-index: -1;
            filter: blur(20px);
            margin: -20px;
            background: url("http://www.jackzxl.net/wp-content/MyFile/2016/09/iphone.jpg") fixed 0 center;
            background-size: cover;
        }

ログイン後にコピー

上記の CSS コードから、設定したブラーは div と重なり、背景画像はボディと同じになります。最終的な効果は次のとおりです。

以上がCSS3 を使用してすりガラスを作成するグラフィック例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。