Abanico de muestras de pintura
Un muestrario de pintura abierto en abanico: la tira elegida se desliza hacia fuera y tiñe la pared del fondo.
Ajustes
Código
<fieldset class="uvq04-fan"><legend>Color de pared</legend><div class="fn"><label style="--a:-50deg;--c:#c4673f"><input type="radio" name="uvq04-fan"><span class="sw"><span class="nm"><b>Arcilla</b> R-214</span></span></label><label style="--a:-30deg;--c:#d9a53a"><input type="radio" name="uvq04-fan"><span class="sw"><span class="nm"><b>Mostaza</b> Y-108</span></span></label><label style="--a:-10deg;--c:#8fa98a"><input type="radio" name="uvq04-fan" checked><span class="sw"><span class="nm"><b>Salvia</b> G-322</span></span></label><label style="--a:10deg;--c:#2f6f8f"><input type="radio" name="uvq04-fan"><span class="sw"><span class="nm"><b>Océano</b> B-517</span></span></label><label style="--a:30deg;--c:#6e3a5e"><input type="radio" name="uvq04-fan"><span class="sw"><span class="nm"><b>Ciruela</b> V-640</span></span></label><label style="--a:50deg;--c:#aab4c0"><input type="radio" name="uvq04-fan"><span class="sw"><span class="nm"><b>Niebla</b> N-090</span></span></label><i class="rv" aria-hidden="true"></i></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
Seis tiras de pintura van unidas por un remache abajo y se abren como un muestrario de colores de verdad. Cada tira enseña tres tonos y un nombre con su código. La tira elegida se desliza hacia fuera siguiendo su propio ángulo y queda por encima de las demás, y la tarjeta del fondo toma un velo suave de ese color, como una prueba en la pared.
Los colores van en el estilo de cada tira, así que cámbialos por la paleta de tu marca, acabados de tela o tintes de madera. Con cinco a siete tiras el abanico se lee bien, y las flechas del teclado las recorren en orden.