Ein hochgradig detaillierter, illustrativer Schalter. Er simuliert einen Tag-Nacht-Zyklus mit Parallax-Effekten. Die Sonne transformiert rotierend in einen Mond (Krater faden fließend ein), während Wolken weich nach unten verschwinden und ein Sternenhimmel aufsteigt. Perfekt abgestimmte `cubic-bezier` Mikro-Animationen für einen extrem hochwertigen, plastischen Look. Komplett in CSS.
1<label class="scenery-toggle">2 <input type="checkbox" class="scenery-input" aria-label="Tag und Nacht umschalten">3 <div class="scenery-track">4 <!-- Sternenhimmel (Nacht) -->5 <div class="scenery-stars">6 <div class="star star-1"></div>7 <div class="star star-2"></div>8 <div class="star star-3"></div>9 <div class="star star-4"></div>10 </div>11 <!-- Wolken (Tag) -->12 <div class="scenery-clouds">13 <div class="cloud cloud-1"></div>14 <div class="cloud cloud-2"></div>15 </div>16 <!-- Der Schieberegler (Sonne / Mond) -->17 <div class="scenery-orb">18 <div class="crater crater-1"></div>19 <div class="crater crater-2"></div>20 <div class="crater crater-3"></div>21 </div>22 </div>23</label>Keine Installation, kein Build-Step — reine Standards, sofort einsatzbereit.
Klicke oben auf „Code kopieren“ — HTML und CSS landen in deiner Zwischenablage.
Füge das Markup an der gewünschten Stelle deiner Seite oder Komponente ein.
Übernimm den <style>-Block bzw. die Klassen in deine Stylesheet-Datei.
Aus derselben Kategorie oder mit passenden Tags.
Melde dich an, um zu kommentieren.
Ein absolutes Premium-Element mit extremen Mikro-Animationen. Die Wolken morphen durch flüssige Skalierung ihrer Pseudo-Elemente physisch in leuchtende Sterne (und zurück), während sie die Seite wechseln. Die Sonne hat eine weiche, mehrschichtige Corona (Glow), und der Mond rotiert beim Einrasten plastisch ins Bild, wobei tiefe, detaillierte Krater mit inneren Schatten sichtbar werden.
Ein ultra-hochwertiger, rein auf CSS basierender Schalter im modernen, taktilen "Dark Neumorphism"-Design. Der Fokus liegt extrem auf Mikro-Animationen: Eine federnde `cubic-bezier`-Kurve sorgt für ein physikalisches Einrasten, während sich der Regler beim Gedrückthalten elastisch verformt (Squish-Effekt). Der Status wird zusätzlich durch einen leuchtenden Neon-Indikator hervorgehoben.
Ein futuristischer Toggle-Switch mit starkem Neon-Glow-Effekt. Im inaktiven Zustand leuchtet er rot, beim Aktivieren wechselt er nahtlos zu einem leuchtenden Cyber-Türkis, inklusive leuchtendem Rahmen. Komplett freistehend. Wie gewünscht rein in CSS gelöst – JavaScript wird hierfür nicht benötigt.