Carte de paiement en verre
Une carte transparente aux bords épais qui déforment les formes derrière ; touchez-la et elle se retourne dans un éclat.
Réglages
Code
<div class="uvq11-card"><div class="bg" aria-hidden="true"><i class="o1"></i><i class="o2"></i><i class="o3"></i><i class="o4"></i></div><button type="button" class="cd" aria-pressed="false" aria-label="Retourner la carte"><span class="fc fr"><span class="ed"></span><span class="tp"><b class="lg">AIMRAN</b><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8.5 8.5a5 5 0 0 1 0 7M12 6a8.5 8.5 0 0 1 0 12M15.5 3.5a12 12 0 0 1 0 17"/></svg></span><span class="chp"></span><span class="nu">4821 •••• •••• 0427</span><span class="bt"><span class="nm">LUCÍA MARTÍN</span><span class="ex">09/29</span></span></span><span class="fc bk"><span class="ed"></span><span class="ms"></span><span class="sg"><i></i><b>482</b></span><span class="fn">Carte de démonstration</span></span><span class="sw"></span></button></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Liquid Glass
Voir tout : Liquid GlassOù l’utiliser
Une carte de paiement transparente posée sur de grandes formes qui dérivent, pour que le verre ait quelque chose à déformer. La face utilise un léger flou d’arrière-plan, tandis qu’une bande masquée sur le bord floute et éclaircit davantage pour imiter la tranche épaisse et polie. Numéro, puce et symbole sans contact semblent gravés, et le dos montre piste, panneau de signature et code.
Changez les deux couleurs du fond et saisissez le nom du titulaire. Le retournement est un seul bouton bascule avec un balayage de lumière, idéal pour une page fintech, un aperçu de paiement ou une offre d’abonnement premium.