Carte de profil Glass

Aperçu

Emma Watson

Senior UI/UX Designer

128

Posts

12K

Followers

542

Following

Cas d’utilisation et fonctionnalités

Tableau de bord utilisateur : parfait pour afficher le résumé du profil des utilisateurs connectés.
Présentation des membres de l’équipe : ceci peut être utilisé lorsque vous souhaitez afficher joliment les informations sur les membres dans une liste.
Plateforme sociale : agit comme une carte de visite numérique avec des CTA tels que suivre et envoyer un message.
Caractéristiques principales :
- Effet de morphisme de verre riche avec backdrop-blur-lg et couleur d’arrière-plan translucide (bg-white/20).
- Design sophistiqué qui s’harmonise avec le dégradé au dos.

Points de conception et d’UX

Attrait visuel du glassmorphisme : en rendant le dégradé d’arrière-plan transparent, cela donne à l’interface utilisateur de la profondeur et une impression moderne.
Bordures et ombres délicates : La combinaison d’une bordure fine utilisant border-white/30 et d’une ombre portée profonde utilisant shadow-2xl fait ressortir magnifiquement la carte de l’arrière-plan.
Assurer la visibilité : Nous utilisons du blanc pour le texte et maintenons un contraste suffisant pour maintenir la lisibilité tout en obtenant une palette de couleurs unifiée.
Interaction : modifie légèrement la luminosité de l’arrière-plan et les ombres lors du survol du bouton pour améliorer les commentaires sur les interactions de l’utilisateur.

Comment personnaliser

Ajustement de la force du flou : En changeant backdrop-blur-lg en backdrop-blur-sm ou backdrop-blur-xl, vous pouvez contrôler le degré de flou du verre dépoli.
Modifier la transparence : En changeant la classe d’opacité de bg-white/20 en bg-white/10 ou bg-white/30, vous pouvez ajuster la transparence de la carte elle-même.
Compatible avec les thèmes sombres : Si la couleur d’arrière-plan est sombre, vous pouvez exprimer le morphisme du verre adapté aux thèmes sombres en le remplaçant par des classes telles que bg-black/20 ou border-white/10.

##Code d’implémentation

<div class="flex items-center justify-center min-h-[400px] w-full rounded-xl bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-6">
<!-- Corps de carte Glassmorphisme -->
<div class="relative w-full max-w-sm overflow-hidden rounded-2xl bg-white/20 p-8 shadow-2xl backdrop-blur-lg border border-white/30">
  <!-- Effet de halo décoratif -->
  <div class="absolute -top-10 -right-10 w-32 h-32 bg-white/30 rounded-full blur-2xl"></div>
  <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-indigo-500/20 rounded-full blur-2xl"></div>
  
  <div class="relative z-10 flex flex-col items-center">
    <!-- Photo de profil -->
    <div class="h-24 w-24 rounded-full overflow-hidden border-2 border-white/50 shadow-inner mb-4">
      <img src="https://api.dicebear.com/7.x/notionists/svg?seed=Emma" alt="Profile avatar" class="h-full w-full object-cover scale-110 !m-0" />
    </div>
    
    <!-- Informations utilisateur -->
    <h2 class="text-2xl font-bold text-white mb-1">Emma Watson</h2>
    <p class="text-sm text-white/80 font-medium mb-6">Senior UI/UX Designer</p>
    
    <!-- Statistiques -->
    <div class="flex w-full justify-between px-4 mb-6">
      <div class="text-center text-white">
        <p class="text-lg font-bold">128</p>
        <p class="text-xs text-white/70">Posts</p>
      </div>
      <div class="text-center text-white">
        <p class="text-lg font-bold">12K</p>
        <p class="text-xs text-white/70">Followers</p>
      </div>
      <div class="text-center text-white">
        <p class="text-lg font-bold">542</p>
        <p class="text-xs text-white/70">Following</p>
      </div>
    </div>
    
    <!-- Boutons d'action -->
    <div class="flex w-full gap-3">
      <button class="flex-1 rounded-lg bg-white/20 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-white/30 hover:shadow-md transition-all duration-300 border border-white/30 backdrop-blur-sm">
        Message
      </button>
      <button class="flex-1 rounded-lg bg-indigo-600/80 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-600 hover:shadow-md transition-all duration-300 backdrop-blur-sm border border-indigo-500/50">
        Follow
      </button>
    </div>
  </div>
</div>
</div>

État de compatibilité du navigateur

Chrome : pris en charge (filtre de toile de fond)
Safari : pris en charge (-webkit-backdrop-filter peut être requis)
Firefox : pris en charge
Bord : pris en charge