Comment créer un effet de verre en verre avec CSS

Pour créer un effet de mimétisme en verre de CSS, vous devez utiliser le filtre de fond pour obtenir un flou d'arrière-plan, définir un arrière-plan translucide tel que RGBA (255,255,255,0.1), ajouter des bordures subtiles et des ombres pour améliorer le sens de la hiérarchie et garantir qu'il existe suffisamment de frontières et d'ombres pour améliorer le sens de la hiérarchie et assurer qu'il existe suffisamment de frontières visuelles derrière les éléments; 1. Utilisez le filtre de fond: Blur (10px) pour brouiller le contenu d'arrière-plan; 2. Utilisez RGBA ou HSLA pour définir le fond transparent pour contrôler le degré de transparence; 3. Ajouter 1px RGBA solide (255 255,255,0,3) Borders et Box-Shadow pour améliorer le sens tridimensionnel; 4. Assurez-vous que le conteneur a des arrière-plans riches tels que des images ou des textures pour présenter un effet de pénétration floue; 5. Fournir -Webkit-Backdrop-Filter et des couleurs d'arrière-plan alternatives lorsqu'elles ne sont pas prises en charge, et finalement obtenir un effet de verre à la fois moderne et lisible et des phrases complètes.

La création d'un effet de verre-morphisme avec CSS consiste à combiner la transparence, le flou et les frontières subtiles pour imiter un aspect en verre givré. Il est largement utilisé dans la conception de l'interface utilisateur moderne pour les superpositions, les cartes et les barres de navigation. Voici comment y parvenir efficacement.

1. Utilisez backdrop-filter pour un flou d'arrière-plan

La clé du verre de verre est de brouiller la zone derrière l'élément, pas l'élément lui-même. C'est là que backdrop-filter est en jeu.

 .verre {
  Filtre de toile de fond: Blur (10px);
}

Cela applique un flou à tout ce qui se trouve derrière l'élément - comme le contenu montrant à travers une surface translucide. Remarque: backdrop-filter ne fonctionne pas sur tous les navigateurs plus âgés (en particulier les versions plus anciennes de Firefox et de certains navigateurs mobiles), alors pensez aux secours.

2. Définissez un arrière-plan semi-transparent

Utilisez les couleurs rgba() ou hsla() pour rendre l'arrière-plan légèrement transparent afin que l'effet flou soit visible.

 .verre {
  Contexte: RGBA (255, 255, 255, 0,1);
  Filtre de toile de fond: Blur (10px);
}

Vous pouvez ajuster la valeur alpha (dernier numéro dans rgba ) pour contrôler la transparence:

• 0.1 → très transparent (look léger givré)
• 0.3 → plus solide mais toujours vitreux

Utiliser du blanc à faible opacité donne un aspect propre et moderne. Pour les thèmes sombres, essayez:

 Contexte: RGBA (255, 255, 255, 0,05);

Ou une teinte sombre:

 Contexte: RGBA (0, 0, 0, 0,2);

3. Ajouter une bordure et une ombre subtiles pour la profondeur

Une bordure mince et claire améliore le bord en forme de verre. Combinez-le avec une boîte à boîte douce pour soulever l'élément de l'arrière-plan.

 .verre {
  Contexte: RGBA (255, 255, 255, 0,1);
  Filtre de toile de fond: Blur (10px);
  -Webkit-BackDrop-Filter: Blur (10px); / * Pour safari * /
  Border: 1px RGBA solide (255, 255, 255, 0,3);
  Box-Shadow: 0 4px 30px RGBA (0, 0, 0, 0,1);
  Border-Radius: 12px;
}

• border : ajoute un bord foi qui reflète la lumière
• box-shadow : donne de la profondeur et de la séparation
• border-radius

4. Assurer un contexte approprié

Glassmorphisme ne fonctionne que lorsqu'il y a quelque chose derrière l'élément pour brouiller. S'assurer:

• Le conteneur a suffisamment de contenu visuel (images, motifs ou éléments en couches)
• L'élément de verre n'est pas sur un fond solide plat

Exemple de structure:

 <div class = "conteneur">
  <div class = "Glass"> Content </div>
</div>

 .Container {
  Contexte: URL ('background-iMage.jpg') Centre de centre sans répétition;
  rembourrage: 40px;
}

.verre {
  Contexte: RGBA (255, 255, 255, 0,1);
  Filtre de toile de fond: Blur (10px);
  -Webkit-BackDrop-Filter: Blur (10px);
  Border: 1px RGBA solide (255, 255, 255, 0,3);
  Box-Shadow: 0 4px 30px RGBA (0, 0, 0, 0,1);
  Border-Radius: 12px;
  rembourrage: 20px;
  Couleur: blanc;
}

Prise en charge du navigateur et secours

Étant donné que backdrop-filter n'est pas pris en charge partout:

• Utiliser -webkit-backdrop-filter pour Safari
• Fournir une couleur d'arrière-plan de secours pour les navigateurs non pris en charge

 .verre {
  Contexte: RGBA (255, 255, 255, 0,1);
  Filtre de toile de fond: Blur (10px);
  -Webkit-BackDrop-Filter: Blur (10px);
}

@Supports Not (Backdrop-Filter: Blur (10px)) {
  .verre {
    Contexte: RGBA (255, 255, 255, 0,5); / * Plus de repli Opaque * /
  }
}

Cela garantit la lisibilité même lorsque Blur n'est pas disponible.

Voilà - un effet de verre de verre propre et moderne en utilisant uniquement CSS. L'astuce est d'équilibrer la transparence, le flou et l'éclairage pour créer un sentiment de profondeur sans sacrifier lalacabilité.

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!