L
Lil Linden
New member
- Beiträge
- 2
- Punkte Reaktionen
- 0
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.
Hier der Code der HTML-Seite:
Hier der Code der HTML-Seite:
HTML:
<!DOCTYPE html>
<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>
<!-- ----- -->
<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> MPRESSUM </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>
Hier der Code der 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: 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: 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: 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: 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);
}
Ich habe eine sehr leichte Lösung gefunden: