Haftnotiz

Haftnotiz: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

sticky-notepaperrotatedhandwrittenyellow

Ship the cards page before the styles gallery. Keep every snippet under 45 lines.

Nik

CSS

.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

Baue eine 200px quadratische Haftnotiz: vertikaler Gradient #fef3c7 zu #fde68a, kein Radius, eine Handschrift-Schrift (Segoe Print / Bradley Hand / cursive) in Braun #78350f, Schatten 2px 6px 14px rgba(0,0,0,.18), standardmäßig um -2deg gedreht und beim Hover mit 1.03 Skalierung auf 0deg aufrichtend. Ein durchscheinender weißer Klebestreifen (70x20px, 50% Weiß) sitzt mittig über der Oberkante. 15px Notiztext und eine kleine 12px Signatur in der unteren rechten Ecke bei 70% Deckkraft.

Haftnotiz

Gleiches Regal