Estampado de la camiseta
Una camiseta que cambia de estampado al instante: rayas marineras, lunares, vichy o cuadros escoceses.
Ajustes
Código
<fieldset class="uvq04-tee"><legend>Estampado</legend><div class="pv" aria-hidden="true"><svg viewBox="0 0 100 92"><defs><pattern id="uvq04-tee-st" width="8" height="8" patternUnits="userSpaceOnUse"><rect class="w" width="8" height="8"/><rect class="a" width="8" height="3.4"/></pattern><pattern id="uvq04-tee-dt" width="10" height="10" patternUnits="userSpaceOnUse"><rect class="r" width="10" height="10"/><circle class="w" cx="2.5" cy="2.5" r="1.7"/><circle class="w" cx="7.5" cy="7.5" r="1.7"/></pattern><pattern id="uvq04-tee-gn" width="10" height="10" patternUnits="userSpaceOnUse"><rect class="w" width="10" height="10"/><rect class="r h" width="10" height="5"/><rect class="r h" width="5" height="10"/></pattern><pattern id="uvq04-tee-tt" width="16" height="16" patternUnits="userSpaceOnUse"><rect class="r" width="16" height="16"/><rect class="a h" y="4" width="16" height="7"/><rect class="a h" x="4" width="7" height="16"/><rect class="y" y="13" width="16" height="1"/><rect class="y" x="13" width="1" height="16"/></pattern></defs><path class="sh" d="M34 6C39 12 61 12 66 6L88 15L97 36L81 42L79 87H21L19 42L3 36L12 15Z"/><path class="ln" d="M34 6C39 14 61 14 66 6M19 42L21 17M81 42L79 17"/></svg></div><div class="op"><label><input type="radio" name="uvq04-tee" checked><span class="sw st" aria-hidden="true"></span><span class="nm">Rayas</span></label><label><input type="radio" name="uvq04-tee"><span class="sw dt" aria-hidden="true"></span><span class="nm">Lunares</span></label><label><input type="radio" name="uvq04-tee"><span class="sw gn" aria-hidden="true"></span><span class="nm">Vichy</span></label><label><input type="radio" name="uvq04-tee"><span class="sw tt" aria-hidden="true"></span><span class="nm">Escocés</span></label></div></fieldset>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Radio buttons
Ver todos: Radio buttonsDónde usarlo
Este grupo de radios viste una camiseta SVG con el estampado que elijas. Cuatro muestras redondas de tela, rayas marineras, lunares, vichy y cuadros escoceses, van bajo la prenda, y cada una cambia el relleno de la camiseta por un patrón SVG a juego con un pequeño giro con rebote. Encaja en tiendas de ropa, impresión bajo demanda, uniformes y lookbooks.
El color principal manda en las rayas y en las bandas del escocés, y el secundario en los lunares y los cuadros. Para añadir un estampado define otro patrón SVG con id con prefijo y una muestra con degradados CSS que lo imite.