HTML + CSSInterrupteurs

Interrupteur store vénitien

Les lames d’un store s’inclinent l’une après l’autre et laissent entrer le soleil dans la pièce en bandes de lumière.

Réglages

16px
1x

Code

<label class="uvq03-bln"><input type="checkbox" role="switch"><span class="wn"><span class="vw"><i class="sn"></i><i class="hl"></i></span><span class="sl"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i></span><i class="rd"></i><i class="rs"></i></span>Lumière naturelle</label>

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.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Interrupteurs

Voir tout : Interrupteurs

Où l’utiliser

Cet interrupteur est une petite fenêtre dont le store vénitien fermé cache un paysage de ciel, de soleil et de colline verte. À l’activation, chaque lame pivote avec un léger décalage, la lumière s’ouvre de haut en bas, la tige d’orientation tourne et une lueur chaude entoure le cadre. Les lames utilisent rotateX en CSS. Il convient à l’éclairage de maison connectée.

La couleur principale est le ciel, la seconde le soleil. Un ciel pâle d’aube avec un soleil orange donne une ambiance matinale, un bleu plus sombre convient aux modes du soir. Gardez un libellé qui parle de lumière ou d’ombre.