Maison >interface Web >tutoriel HTML >Partage d'exemples graphiques d'utilisation de CSS3 pour fabriquer du verre dépoli

Partage d'exemples graphiques d'utilisation de CSS3 pour fabriquer du verre dépoli

零下一度original: 2017-06-24 14:27:121586parcourir

Faisant une pause dans mon emploi du temps chargé, j’ai récemment regardé beaucoup d’effets sympas. Il existe désormais de nombreux plug-ins basés sur jquery, mais la compatibilité de nombreux plug-ins n'est pas très bonne, donc les plug-ins natifs sont la voie à suivre. Dans la vie quotidienne, le verre dépoli n’est plus courant. Non, voici le verre dépoli :

Haha, passons aux choses sérieuses. Voyons d'abord l'effet final :

<.>

Bon, d'accord, commençons nos étapes :

Étape 1 : Construction de base de la page :

Je la mets sur le corps Un grand fond image, puis un div au milieu. Le code html est le suivant :

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

La majeure partie du texte consiste à étendre le div pour rendre l'effet plus évident

Le code CSS est le suivant :

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

Regardez le code de style ci-dessus, vh est la taille de la fenêtre, 100 est 100 % et l'arrière-plan. est défini sur une position fixe et est plein. L'élément entier ; dans le div, définissez la couleur d'arrière-plan au centre puis définissez son style de boîte :

Le petit verre transparent brillant sort comme ceci, alors commençons Traitons le verre dépoli

Étape 2 : Paramètres du verre dépoli en arrière-plan flou

En CSS, là est le même paramètre de flou, qui est

filtre : flou(20px);

La valeur suivante est le niveau de flou. Plus la valeur est grande, plus il est flou. Cependant, actuellement seulement px. est pris en charge, pas un pourcentage ;

Nous donnons directement div Il n'est pas possible d'ajouter ce style, car cela rendrait le sous-div flou. Pour le moment, nous pouvons utiliser des pseudo-éléments, à savoir ::before;

Avant d'utiliser des pseudo-éléments, nous devons ajouter un positionnement relatif au div. Puisque le pseudo-élément débordera de toute la boîte div après avoir utilisé le flou, afin d'être beau et élégant, nous devons le faire. ajouter overflow:hidden au div;C'est-à-dire:

  overflow: hidden;
  position: relative;

Le pseudo-élément du 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;
        }

Dans au-dessus du code CSS, nous pouvons voir que le flou défini chevauche le div et que l'image d'arrière-plan est la même que le corps. L'effet final est le suivant :

<.>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Points de connaissances importants sur CSS (1)Article suivant：Points de connaissances importants sur CSS (1)

Articles Liés

Voir plus