Tarjeta de Perfil Efecto Cristal

Vista previa

Emma Watson

Senior UI/UX Designer

128

Posts

12K

Followers

542

Following

Casos de uso y características

Panel de usuario: perfecto para ver el resumen del perfil de los usuarios que han iniciado sesión.
Presentación de los miembros del equipo: esto se puede utilizar cuando desee mostrar la información de los miembros de manera hermosa en una lista.
Plataforma social: actúa como una tarjeta de presentación digital con CTA como seguir y enviar un mensaje.
Características principales:
- Rico efecto de morfismo de vidrio con backdrop-blur-lg y color de fondo translúcido (bg-white/20).
- Diseño sofisticado que armoniza con la gradación de la espalda.

Puntos de diseño y UX

Atractivo visual del morfismo de vidrio: al hacer que el degradado de fondo sea transparente, le da a la interfaz de usuario profundidad y una impresión moderna.
Bordes y sombras delicados: la combinación de un borde delgado usando border-white/30 y una sombra profunda usando shadow-2xl hace que la tarjeta se destaque maravillosamente del fondo.
Garantizar la visibilidad: utilizamos blanco para el texto y mantenemos suficiente contraste para mantener la legibilidad mientras logramos una combinación de colores unificada.
Interacción: cambia ligeramente el brillo del fondo y las sombras al pasar el botón para mejorar la retroalimentación sobre las interacciones del usuario.

Cómo personalizar

Ajuste de la intensidad del desenfoque: al cambiar backdrop-blur-lg a backdrop-blur-sm o backdrop-blur-xl, puede controlar el grado de desenfoque del vidrio esmerilado.
Cambiar transparencia: Al cambiar la clase de opacidad de bg-white/20 a bg-white/10 o bg-white/30, puedes ajustar la transparencia de la tarjeta misma.
Compatible con temas oscuros: si el color de fondo es oscuro, puedes expresar el morfismo de vidrio adecuado para temas oscuros reemplazándolo con clases como bg-black/20 o border-white/10.

Código de implementación

<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">
<!-- Cuerpo de tarjeta de morfismo de vidrio -->
<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>
    
    <!-- acciónボタン -->
    <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>

Estado de compatibilidad del navegador

Chrome: compatible (filtro de fondo)
Safari: compatible (es posible que se requiera -webkit-backdrop-filter) -Firefox: compatible
Borde: Compatible