Dark-Mode White-Mode Schalter Position verschieben?
Guten Abend, ich benötige Hilfe bei einer Website, die ich derzeit programmiere. Ich versuche einen "Dark-Mode" An-Aus Schalter hinzuzufügen. Dabei stoße ich derzeit auf ein Problem: Ich würde den betreffenden 'Knopf' zum ändern der Hintergrundfarbe gerne an den oberen, rechten Seitenrand verschieben, jedoch finde ich nicht den richtigen Befehl an der richtigen Stelle dazu. Ihr kennt euch sicherlich besser mit so etwas aus. Vielen Dank schon mal im Voraus.
(Entschuldigung für die fehlende Formatierung, die Nachricht hätte sonst zu viele Zeichen) + (CSS-Datei befindet sich in den Kommentaren)
Hier der Code der HTML-Seite:
<html lang="de">
<head>
<meta charset=utf-8>
<title>Test-Titel(Tab)</title>
<link rel="Stylesheet" href="TestSeite.css">
</head>
<body>
<form>
<!-- LOGO -->
<div class="Logo">
<a href="https://www.google.com/"> <img src="ImpressumsSymbol (sklein).png"> </a>
</div>
<!-- ----- -->
<!-- HIER BEFINDET SICH DIE FRAGE -->
<input id="dark-mode" class="toggle" type="checkbox" name="Dark mode" role="switch" value="on">
<div class="curtain"></div>
<!-- UEBERSCHRIFT -->
<div class="Ueberschrift">
<h1> <b> ÜBERSCHIRFT </b> </h1>
<h2> IMPRESSUM </h2>
</div>
<!-- ----- -->
<!-- BUTTONS -->
<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>
<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>
<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>
<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>
<!-- ----- -->
<!-- KONTAKT -->
<div class="Impressum">
<h2> <u> TEXT </u> </h2>
</div>
<center>
<p>
<strong>
TEXT
</strong>
<br>
TEXT
<br>
TEXT
</p>
<p>
TEXT
<br>
TEXT
</p>
<p> TEXT </p>
</center>
<!-- ----- -->
<!-- IMPRESSUM -->
<div class="Impressum">
<h2> <u> IMPRESSUM </u> </h2>
<h3>TEXT</h3>
<p> TEXT
<br>
TEXT
<br>
TEXT
</p>
<p> TEXT
<br>
TEXT
</p>
<p>
<strong>
TEXT
</strong>
<br>
TEXT
</p>
<h2>TEXT</h2>
<p> TEXT
<br>
TEXT
<br>
TEXT
</p>
<p>
<a href="https://www.google.com/" class="link">TEXT</a>
</p>
<p>
TEXT
</p>
<h3>Haftung für Inhalte</h3>
<p>
TEXT
</p>
<p>
TEXT
</p>
<h3>TEXT</h3>
<p>
TEXT
</p>
<p>
TEXT
</p>
<h3>TEXT</h3>
<p>
TEXT
</p>
<p>
TEXT
</p>
</div>
<!-- ----- -->
</form>
</body>
</html>
1 Antwort
Hier nochmal die CSS-Datei
body {
font-family: Verdana; /* Schriftart */
}
.Logo {
position: absolute; /* Textausrichtung */
}
.Ueberschrift {
text-align: center; /* Textausrichtung */
}
.link {
color: orange; /* Textfarbe */
background-color: transparent; /* Hintergrundfarbe */
text-decoration: underline; /* Textauszeichnung */
}
.link:visited {
color: darkorange; /* Textfarbe */
background-color: transparent; /* Hintergrundfarbe */
text-decoration: underline; /* Textauszeichnung */
}
.link:hover {
color: orangered; /* Textfarbe */
background-color: transparent; /* Hintergrundfarbe */
text-decoration: underline; /* Textauszeichnung */
}
.link:active {
color: orangered;
background-color: transparent; /* Hintergrundfarbe */
text-decoration: underline; /* Textauszeichnung */
}
h1 {
color: black; /* Farbe */
}
h2 {
color: black; /* Farbe */
}
h3 {
color:black; /* Farbe */
}
h4 {
color:black; /* Farbe */
}
summary {
color: black;
}
li {
color: black; /* Farbe */
}
th {
color: black; /* Farbe */
}
td {
color: black; /* Farbe */
}
p {
color:black; /* Farbe */
}
.b {
text-align: center; /* Textausrichtung */
}
.c {
text-align: center; /* Textausrichtung */
}
.d {
text-align: left; /* Textausrichtung */
}
.Impressum {
text-align: center; /* Textausrichtung */
}
.btn-flip {
opacity: 1; /* Transparenz */
outline: 0; /* Umriss */
color: #fff; /* Farbe */
line-height: 40px; /* Zeilenhöhe */
position: relative; /* Position */
text-align: center; /* Textausrichtung */
letter-spacing: 1px; /* Buchstaben-Abstand */
display: inline-block; /* Art der Darstellung */
text-decoration: none; /* Textauszeichnung */
font-family: "#"; /* Schriftart */
text-transform: uppercase; /* Groß- und Kleinbuchstaben */
}
.btn-flip:hover:after {
opacity: 1; /* Transparenz */
transform: translateY(0) rotateX(0); /* Element drehen, skalieren, schräg stellen oder übersetzen, (translate(y): Repositioniert ein Element Vertikal auf einer 2D Fläche)
(rotate(x): Rotiert ein Element auf der X-Achse) */
}
.btn-flip:hover:before {
opacity: 0; /* Transparenz */
transform: translateY(50%) rotateX(90deg); /* Element drehen, skalieren, schräg stellen oder übersetzen, (translate(y): Repositioniert ein Element Vertikal auf einer 2D Fläche)
(rotate(x): Rotiert ein Element auf der X-Achse) */
}
.btn-flip:before {
top: 0; /* Positionierung von oben */
left: 0; /* Positionierung von links */
opacity: 1; /* Transparenz */
color: #adadaf; /* Farbe */
display: block; /* Art der Darstellung */
padding: 0 30px; /* Innenabstand */
line-height: 40px; /* Zeilenhöhe */
transition: 0.5s; /* Übergang (Zeit) */
position: relative; /* Positionierung eines HTML-Elements */
background: #323237; /* Hintergrund (Farbe) */
content: attr(data-front); /* Erzeugt Content (Inhalte in einem Element) */
transform: translateY(0) rotateX(0); /* Element drehen, skalieren, schräg stellen oder übersetzen, (translate(y): Repositioniert ein Element Vertikal auf einer 2D Fläche)
(rotate(x): Rotiert ein Element auf der X-Achse) */
}
.btn-flip:after {
top: 0; /* Positionierung von oben */
left: 0; /* Positionierung von links */
opacity: 0; /* Transparenz */
width: 100%; /* Breite */
color: #323237; /* Farbe */
display: block; /* Art der Darstellung */
transition: 0.5s; /* Übergang (Zeit) */
position: absolute; /* Positionierung eines HTML-Elements */
background: #adadaf; /* Hintergrund (Farbe) */
content: attr(data-back); /* Erzeugt Content (Inhalte in einem Element) */
transform: translateY(-50%) rotateX(90deg); /* Element drehen, skalieren, schräg stellen oder übersetzen, (translate(y): Repositioniert ein Element Vertikal auf einer 2D Fläche)
(rotate(x): Rotiert ein Element auf der X-Achse) */
}
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--dur: 0.3s;
}
body, input {
color: hsl(0,0%,10%);
}
form, .toggle:before, .toggle:after {
background: hsl(0,0%,90%);
}
form, .toggle {
position: relative;
}
form {
display: ;
justify-content: right;
align-items: right;
height: 100vh;
}
.curtain, .toggle:before, .toggle:after {
position: absolute;
}
.curtain, .toggle:before, .toggle:after {
transition: transform var(--dur);
}
.curtain {
top: 0;
left: 0;
}
.curtain {
background: hsl(0,0%,100%);
mix-blend-mode: difference;
pointer-events: none;
width: 100%;
height: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
}
.sr {
clip: rect(1px,1px,1px,1px);
color: transparent;
width: 1px;
height: 1px;
position: relative;
}
.toggle {
background: currentColor;
border-radius: 0.75em;
cursor: pointer;
width: 3em;
height: 1.5em;
appearance: none;
}
.toggle:checked ~ .curtain {
transform: scaleX(1);
}