Franja del día con cielo
Elige mañana, mediodía, tarde o noche y el cielo cambia de color mientras el sol o la luna se mueven.
Ajustes
Código
<fieldset class="uv-fdy"><legend>¿A qué hora?</legend><div class="sky" aria-hidden="true"><i class="orb"></i><i class="hz"></i></div><div class="op"><label><input type="radio" name="uv-fdy"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 17h16M7.5 17a4.5 4.5 0 0 1 9 0M12 6.5V9M5.6 10.3l1.6 1.4M18.4 10.3l-1.6 1.4"/></svg>Mañana</span></label><label><input type="radio" name="uv-fdy"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2.5V5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8"/></svg>Mediodía</span></label><label><input type="radio" name="uv-fdy" checked><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 15h16M8 15a4 4 0 0 1 8 0M7 19h10M12 5v3"/></svg>Tarde</span></label><label><input type="radio" name="uv-fdy"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19.5 14.5A7.5 7.5 0 0 1 9.5 4.5a7.5 7.5 0 1 0 10 10z"/></svg>Noche</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 Filtros
Ver todos: FiltrosDónde usarlo
Las reservas de restaurantes, visitas guiadas, clases y repartos suelen preguntar cuándo, no solo qué día. Este filtro convierte la elección en una pequeña escena: el cielo sobre las cuatro opciones pasa del rosa del amanecer al azul intenso, al naranja del atardecer y a la noche, mientras el sol recorre su arco y se vuelve luna con estrellas.
Los colores se animan con propiedades CSS registradas y la escena responde a los radios mediante :has, sin script. El color principal resalta la opción activa y funciona en páginas claras y oscuras.