Design for AIBrutalista con sombra dura
Brutalista con sombra dura: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
No gradients allowed
Thick black lines, flat yellow, and a shadow that does not blur.
CSS
.card-032 {
width: 280px;
padding: 22px;
background: #fef08a;
border: 3px solid #000;
border-radius: 0;
box-shadow: 8px 8px 0 #000;
font-family: system-ui,sans-serif;
color: #000;
transition: transform .12s,box-shadow .12s
}
.card-032:hover {
transform: translate(4px,4px);
box-shadow: 4px 4px 0 #000
}
.card-032 h3 {
margin: 0 0 8px;
font-size: 22px;
font-weight: 900;
letter-spacing: -.01em
}
.card-032 p {
margin: 0 0 16px;
font-size: 14px;
line-height: 1.5
}
.card-032 button {
padding: 10px 18px;
border: 3px solid #000;
background: #fff;
font-weight: 800;
font-size: 13px;
text-transform: uppercase;
cursor: pointer;
box-shadow: 4px 4px 0 #000;
transition: background .12s,color .12s,box-shadow .12s
}
.card-032 button:hover {
background: #000;
color: #fef08a;
box-shadow: 2px 2px 0 #000
}
.card-032 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<article class="card-032">
<h3>No gradients allowed</h3>
<p>Thick black lines, flat yellow, and a shadow that does not blur.</p>
<button>Read it</button>
</article>Prompt
Construye una tarjeta neobrutalista: 280px, fondo amarillo plano #fef08a, borde negro sólido de 3px, sin radio, sombra dura desplazada 8px 8px 0 #000 (sin blur). En hover la tarjeta se desplaza 4px a la derecha y abajo mientras la sombra se reduce a 4px 4px, para que parezca pulsada. Título negro 22px peso 900, texto 14px, y un botón blanco en mayúsculas con borde negro de 3px y su propia sombra dura de 4px que se invierte a negro con texto amarillo en hover.