Design for AIBaralho em leque
Baralho em leque: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
3 drafts
Hover to fan the pile.
CSS
.card-088 {
position: relative;
width: 240px;
height: 150px;
font-family: system-ui,sans-serif
}
.card-088 span,.card-088__top {
position: absolute;
inset: 0;
border-radius: 14px;
background: #fff;
border: 1px solid #e5e7eb;
box-shadow: 0 4px 12px rgba(0,0,0,.08);
transition: transform .35s cubic-bezier(.2,.8,.2,1)
}
.card-088__back {
transform: translateY(-12px) scale(.92);
background: #f3f4f6
}
.card-088__mid {
transform: translateY(-6px) scale(.96);
background: #f9fafb
}
.card-088__top {
padding: 20px 22px;
color: #111827
}
.card-088:hover .card-088__back {
transform: translate(-18px,-14px) rotate(-6deg)
}
.card-088:hover .card-088__mid {
transform: translate(18px,-8px) rotate(6deg)
}
.card-088:hover .card-088__top {
transform: translateY(4px)
}
.card-088 h3 {
margin: 0 0 4px;
font-size: 18px
}
.card-088 p {
margin: 0;
font-size: 13px;
color: #6b7280
}
HTML
<div class="card-088">
<span class="card-088__back"></span>
<span class="card-088__mid"></span>
<article class="card-088__top"><h3>3 drafts</h3><p>Hover to fan the pile.</p></article>
</div>Prompt
Crie uma pilha de cartas de 240x150px: três cards brancos posicionados de forma absoluta com raio de 14px, borda de 1px #e5e7eb e sombra suave. O card de trás é deslocado 12px para cima e escalado para .92 em #f3f4f6, o do meio 6px para cima em .96 em #f9fafb, o da frente contém um título 18px e texto 13px #6b7280. No hover o card de trás desliza 18px para a esquerda e rotaciona -6deg, o do meio desliza 18px para a direita e rotaciona 6deg, e o da frente desce 4px, abrindo a pilha em leque (easing elástico de 350ms).