HTML + CSSFiltres
Filtre de moment de la journée avec ciel
Choisis matin, midi, après-midi ou nuit et le ciel change de couleur pendant que le soleil ou la lune se déplace.
Réglages
16px
1x
Code
<fieldset class="uv-fdy"><legend>À quelle heure ?</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>Matin</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>Midi</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>Après-midi</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>Nuit</span></label></div></fieldset>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Filtres
Voir tout : FiltresOù l’utiliser
Les réservations de restaurants, de visites, de cours et de livraisons demandent souvent quand, pas seulement quel jour. Ce filtre transforme le choix en petite scène : le ciel au-dessus des quatre options passe du rose de l'aube au bleu vif, à l'orange du couchant puis à la nuit, tandis que le soleil suit son arc et devient une lune étoilée.
Les couleurs s'animent grâce à des propriétés CSS enregistrées et la scène réagit aux boutons radio via :has, sans script. La couleur principale met en avant l'option active.