玻璃质感个人资料卡

预览

Emma Watson

Senior UI/UX Designer

128

Posts

12K

Followers

542

Following

用例和功能

用户仪表板：非常适合查看登录用户的个人资料摘要。
团队成员介绍：当你想在列表中漂亮地展示成员信息时，可以使用此功能。
社交平台：充当带有 CTA 的数字First Name片，例如关注和发送消息。
主要特点：
- 具有“backdrop-blur-lg”和半透明背景颜色（“bg-white/20”）的丰富玻璃形态效果。
- 精致的设计与背面的渐变相协调。

设计和用户体验要点

玻璃形态的视觉吸引力：通过使背景渐变透明，它赋予 UI 深度和现代印象。
精致的边框和阴影：使用“border-white/30”的细边框和使用“shadow-2xl”的深阴影的组合使卡片从背景中脱颖而出。
确保可见性：我们使用白色作为文本，并保持足够的对比度以保持可读性，同时实现统一的配色方案。
交互：稍微改变按钮悬停时的背景亮度和阴影，以改善用户交互的反馈。

如何定制

模糊强度的调整：通过将backdrop-blur-lg更改为backdrop-blur-sm或backdrop-blur-xl，您可以控制毛玻璃的模糊程度。
更改透明度：通过将bg-white/20的不透明度等级更改为bg-white/10或bg-white/30，您可以调整卡片本身的透明度。
兼容深色主题：如果背景颜色为深色，您可以通过将其替换为“bg-black/20”或“border-white/10”等类来表达适合深色主题的玻璃形态。

实现代码

<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">
<!-- 玻璃晶质卡体 -->
<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">
  <!-- 装飾用の光彩効果 -->
  <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">
    <!-- プロフィール画像 -->
    <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>
    
    <!-- ユーザー情報 -->
    <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>
    
    <!-- 統計情報 -->
    <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>
    
    <!-- 行动ボタン -->
    <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>

浏览器兼容性状态

Chrome：支持（背景过滤器）
Safari：支持（可能需要-webkit-backdrop-filter）
火狐浏览器：支持
边缘：支持