Design for AINota adhesiva
Nota adhesiva: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
Ship the cards page before the styles gallery. Keep every snippet under 45 lines.
NikCSS
.card-085 {
position: relative;
width: 200px;
min-height: 200px;
padding: 28px 20px 20px;
background: linear-gradient(180deg,#fef3c7,#fde68a);
font-family: "Segoe Print","Bradley Hand",cursive;
color: #78350f;
box-shadow: 2px 6px 14px rgba(0,0,0,.18);
transform: rotate(-2deg);
transition: transform .2s,box-shadow .2s
}
.card-085::before {
content: "";
position: absolute;
left: 50%;
top: -8px;
width: 70px;
height: 20px;
transform: translateX(-50%) rotate(1deg);
background: rgba(255,255,255,.5);
box-shadow: 0 1px 2px rgba(0,0,0,.1)
}
.card-085:hover {
transform: rotate(0) scale(1.03);
box-shadow: 4px 10px 24px rgba(0,0,0,.22)
}
.card-085 p {
margin: 0 0 14px;
font-size: 15px;
line-height: 1.5
}
.card-085 span {
position: absolute;
right: 16px;
bottom: 12px;
font-size: 12px;
opacity: .7
}
HTML
<div class="card-085">
<p>Ship the cards page before the styles gallery. Keep every snippet under 45 lines.</p>
<span>Nik</span>
</div>Prompt
Construye una nota adhesiva cuadrada de 200px: degradado vertical de #fef3c7 a #fde68a, sin radio, una fuente estilo manuscrito (Segoe Print / Bradley Hand / cursive) en marrón #78350f, sombra 2px 6px 14px rgba(0,0,0,.18), rotada -2deg por defecto y enderezándose a 0deg con escala 1.03 en hover. Una tira de cinta blanca translúcida (70x20px, blanco al 50%) cruza el centro superior. Texto de nota 15px, y una pequeña firma 12px en la esquina inferior derecha al 70% de opacidad.