Projektpraxis zur Implementierung einer coolen Login-Umschaltung mithilfe von HTML+CSS

 <div class="container">
    <!-- Registrieren -->
    <div class="container-form container-signup">
        <form action="#" class="form" id="form1">
            <h2 class="form-title">Registrieren Sie ein Konto</h2>
            <input type="text" placeholder="User" class="input" />
            <input type="email" placeholder="Email" class="input" />
            <input type="password" placeholder="Password" class="input" />
            <button type="button" class="btn">Klicken Sie hier, um sich zu registrieren</button>
        </form>
    </div>
    <!-- Anmelden -->
    <div class="container-form container-signin">
        <form action="#" class="form" id="form2">
            <h2 class="form-title">Willkommen beim Anmelden</h2>
            <input type="email" placeholder="Email" class="input" />
            <input type="password" placeholder="Password" class="input" />
            <a href="#" class="link">Passwort vergessen?</a>
            <button type="button" class="btn">Anmelden</button>
        </form>
    </div>
    <!--Overlay part-->
    <div class="container-overlay">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <button class="btn" id="signIn">
                    Sie haben bereits ein Konto? Melden Sie sich direkt an</button>
            </div>
            <div class="overlay-panel overlay-right">
                <button class="btn" id="signUp">
                    Wenn Sie noch kein Konto haben, klicken Sie auf Registrieren</button>
            </div>
        </div>
    </div>
</div>

 Körper {
    Höhe: 100 Vh;
    Hintergrund: #e7e7e7 url("./img/background.jpg") Zentrum ohne Wiederholung behoben;
    Hintergrundgröße: Cover;
    Hintergrundfilter: Unschärfe (5 Pixel);
    Anzeige: Flex;
    rechtfertigen-Inhalt: Mitte;
    align-items: center;
}
/* Body-Div-Stil*/
.container {
    Hintergrundfarbe: #e7e7e7;
    Randradius: 0,7rem;
    Kastenschatten: 0 0,9rem 1,7rem rgba(0, 0, 0, 0,25),
        0 0,7rem 0,7rem rgba(0, 0, 0, 0,22);
    Höhe: 420px;
    maximale Breite: 750px;
    Überlauf: versteckt;
    Position: relativ;
    Breite: 100 %;
}
/* Login- und Registrierungsbox-Teil*/
.container-form {
    Höhe: 100 %;
    Position: absolut;
    oben: 0;
    Übergang: alle 0,6 s Easy-in-out;
}
/* Login-Box-Standardebene ist hoch*/
.container-signin {
    links: 0;
    Breite: 50 %;
    Z-Index: 2;
}
/* Registrierungsfeld – Standardstufe ist niedrig – Transparenz 0 */
.container-signup {
    links: 0;
    Deckkraft: 0;
    Breite: 50 %;
    Z-Index: 1;
}
/* Formularstil*/
.bilden {
    Hintergrundfarbe: #e7e7e7;
    Anzeige: Flex;
    align-items: center;
    rechtfertigen-Inhalt: Mitte;
    Flexrichtung: Spalte;
    Polsterung: 0 3rem;
    Höhe: 100 %;
    Textausrichtung: Mitte;
}
.form-title {
    Schriftstärke: 300;
    Rand: 0;
    Rand unten: 1,25rem;
}
.link {
    Farbe: #333;
    Schriftgröße: 0,9rem;
    Rand: 1,5rem 0;
    Textdekoration: keine;
}
.input {
    Breite: 100 %;
    Hintergrundfarbe: #fff;
    Polsterung: 0,9rem 0,9rem;
    Rand: 0,5rem 0;
    Grenze: keine;
    Gliederung: keine;
}
.btn {
    Hintergrundfarbe: #f25d8e;
    Box-Shadow: 0 4px 4px rgba(255, 112, 159, .3);
    Randradius: 5px;
    Farbe: #e7e7e7;
    Grenze: keine;
    Cursor: Zeiger;
    Schriftgröße: 0,8rem;
    Schriftstärke: fett;
    Buchstabenabstand: 0,1rem;
    Polsterung: 0,9rem 4rem;
    Texttransformation: Großbuchstaben;
    Übergang: Transformation 80 ms Easy-In;
}
.form>.btn {
    Rand oben: 1,5rem;
}
.btn:aktiv {
    transform: Skala(0,95);
}
/* ---------- Teilstil überlagern------------- */
.container-overlay {
    Höhe: 100 %;
    links: 50 %;
    Überlauf: versteckt;
    Position: absolut;
    oben: 0;
    Übergang: Transformation 0,6 s Ease-in-out;
    Breite: 50 %;
    Z-Index: 100;
}
.overlay {
    Breite: 200 %;
    Höhe: 100 %;
    Position: relativ;
    links: -100 %;
    Hintergrund: URL("./img/background.jpg") No-Repeat Center behoben;
    Hintergrundgröße: Cover;
    Übergang: Transformation 0,6 s Ease-in-out;
    transform: TranslateX(0);
}
.overlay-panel {
    Höhe: 100 %;
    Breite: 50 %;
    Position: absolut;
    oben: 0;
    Anzeige: Flex;
    rechtfertigen-Inhalt: Mitte;
    align-items: center;
    Flexrichtung: Spalte;
    transform: TranslateX(0);
    Übergang: Transformation 0,6 s Ease-in-out;
}
.overlay-left {
    transform: TranslateX(-20%);
}
.overlay-right {
    rechts: 0;
    transform: TranslateX(0);
}
/* Die Position des Overlays, wenn das Design aktiviert ist*/
.panel-active .overlay-left {
    transform: TranslateX(0);
}
.panel-active .container-overlay {
    transform: TranslateX(-100%);
}
.panel-active .overlay {
    transform: TranslateX(50%);
}
/*Legen Sie den Speicherort und die Transparenz der Login-Registrierungsebene fest, wenn diese aktiviert ist*/
.panel-active .container-signin {
    transform: TranslateX(100%);
}
.panel-active .container-signup {
    Deckkraft: 1;
    Z-Index: 5;
    transform: TranslateX(100%);
}

 Körper {
  height: 100vh; /* Definieren Sie die Seitenhöhe als Ansichtsfensterhöhe*/
  Hintergrund: #e7e7e7 url("./img/background.jpg") center no-repeat behoben; /* Definieren Sie den Seitenhintergrund als grau und fügen Sie ein Hintergrundbild hinzu*/
  Hintergrundgröße: cover; /* Definieren Sie die Größe des Hintergrundbilds, um die gesamte Seite abzudecken*/
  Hintergrundfilter: Blur(5px); /* Definieren Sie den Hintergrundunschärfeeffekt*/
  display: flex; /* Definiere die Seite als flexible Box*/
  justify-content: center; /* Definieren Sie die Ausrichtung der Hauptachse als zentriert */
  align-items: center; /* Querachsenausrichtung als zentriert definieren */
}

 .container-form {
  height: 100 %; /* Definieren Sie die Containerhöhe auf 100 % */
  position: absolute; /* Definieren Sie den Container, der absolut positioniert werden soll*/
  top: 0; /* Definieren Sie den Abstand von der Oberseite des Containers bis 0 */
  Übergang: alle 0,6 s Ease-in-out; /* Übergangseffekt definieren*/
}
.container-signin {
  left: 0; /* Definieren Sie das Anmeldefeld auf 0 von links */
  width: 50 %; /* Definieren Sie die Breite des Anmeldefelds auf 50 % */
  z-index: 2; /* Definieren Sie die Login-Box-Ebene auf 2 */
}
.container-signup {
  left: 0; /* Definieren Sie den Abstand des Registrierungsfelds nach links als 0 */
  Deckkraft: 0; /* Definieren Sie die Transparenz des Registrierungsfelds auf 0 */
  width: 50 %; /* Definieren Sie die Breite des Registrierungsfelds als 50 % */
  z-index: 1; /* Definieren Sie die Registrierungsboxebene als 1 */
}

 .bilden {
  Hintergrundfarbe: #e7e7e7; /* Definieren Sie den Formularhintergrund als grau*/
  display: flex; /* Definiere das Formular als flexibles Feld*/
  align-items: center; /* Querachsenausrichtung als zentriert definieren */
  justify-content: center; /* Definieren Sie die Ausrichtung der Hauptachse als zentriert */
  Flex-Richtung: Spalte; /* Definieren Sie die Hauptachsenrichtung als vertikale Richtung*/
  padding: 0 3rem; /* Definieren Sie die inneren Ränder des Formulars links und rechts als 3rem */
  height: 100 %; /* Definieren Sie die Formularhöhe auf 100 % */
  text-align: center; /* Definieren Sie die Ausrichtung des Formulartexts auf die Mitte*/
}
.form-title {
  Schriftstärke: 300; /* Definieren Sie die Schriftstärke des Titels auf 300 */
  margin: 0; /* Definieren Sie den Titelrand auf 0 */
  margin-bottom: 1.25rem; /* Definieren Sie den unteren Rand des Titels auf 1.25rem */ }
  .link { color: #333; /* Definieren Sie die Linkfarbe auf Schwarz/ Schriftgröße: 0,9rem; / Definieren Sie die Link-Ränder auf 1,5rem rem für oben und unten, links und rechts Jeweils 0 / text-decoration: none / Links zum Entfernen von Unterstreichungen definieren*/ }
  .input { width: 100%; /* Definieren Sie die Breite des Eingabefelds als 100 % / Hintergrundfarbe: #fff; / Definieren Sie den Hintergrund des Eingabefelds als weiß / padding: 0,9rem 0,9rem; oben und unten 0,9rem, 0,9rem links und rechts / Rand: 0,5rem 0; / Definieren Sie den äußeren Rand des Eingabefelds als 0,5rem oben und unten, 0 links und rechts / border: none; / Definieren Sie das Eingabefeld so, dass es keinen Rand hat / Umriss: none / Definieren Sie das Eingabefeld so, dass es keinen Umriss hat*/ }
  .btn { background-color: #f25d8e; /* Definieren Sie den Button-Hintergrund als rosa/box-shadow: 0 4px 4px rgba(255, 112, 159,.3); / Definieren Sie den Button-Schatteneffekt/ border-radius: 5px; / Definieren Sie den Eckenradius der Schaltfläche auf 5px / Farbe: #e7e7e7; / Definieren Sie die Textfarbe der Schaltfläche auf Weiß / Rand: keine; Definieren Sie die Schaltfläche als randlos/cursor: pointer; / Definieren Sie die Schaltfläche als Zeigertyp / Schriftgröße: 0,8rem; / Definieren Sie die Schriftgröße der Schaltfläche als 0,8rem / Schriftgröße: fett; Gewicht soll fett sein / Buchstabenabstand: 0,1rem; / Definieren Sie den Buchstabenabstand der Schaltfläche auf 0,1rem / Polsterung: 0,9rem 4rem; Definieren Sie den inneren Rand der Schaltfläche auf 0,9 rem für die Ober- und Unterseite und 4 rem für die linke und rechte Seite / Texttransformation: Großbuchstaben / Definieren Sie den Schaltflächentext als Großbuchstaben / Übergang: Transformation 80 ms Ease-In; der Tastenübergangseffekt*/ }
  .form>.btn { margin-top: 1.5rem; /* Definieren Sie den oberen Rand der Schaltfläche auf 1.5rem */ }
  .btn:active { transform: scale(0.95); /* Definieren Sie den Skalierungseffekt, wenn die Schaltfläche aktiviert ist*/}

 .container-overlay {
    Höhe: 100 %;
    /* Definieren Sie die Höhe des Containers auf 100 % / links: 50 %; / Definieren Sie den Abstand des Containers nach links auf 50 % / Überlauf: Ausgeblendet / Definieren Sie den auszublendenden Überlaufteil des Containers / Position : absolut; / Definieren Sie den Container, der absolut positioniert werden soll / oben: 0 / Definieren Sie den Abstand des Containers von oben nach 0 / Übergang: transformieren 0,6 s Ease-In-Out / Definieren Sie den Übergangseffekt / Breite: 50 % ; / Definieren Sie die Breite des Containers auf 50 % / Z-Index: 100; Definieren Sie den Container-Level als 100 */
}
.overlay {
    Breite: 200 %;
    /* Definiere die Overlay-Breite als 200 % / Höhe: 100 %; / Definiere die Overlay-Höhe als 100 % / Position: relativ; / Definiere das Overlay als relative Positionierung / links: -100 %; / Definiere den Overlay-Abstand nach links als -100 % / Hintergrund: url("./img/background.jpg") no-repeat center behoben; / Definieren Sie den Overlay-Hintergrund als Hintergrundbild und richten Sie ihn in der Mitte aus / background-size: cover; Definieren Sie die Größe des Overlay-Hintergrunds, um die gesamte Seite abzudecken/Übergang: transform 0,6s easy-in-out; / Definieren Sie den Übergangseffekt/transform: TranslateX(0);
}
.overlay-panel {
    Höhe: 100 %;
    /* Definieren Sie die Höhe des Overlay-Panels auf 100 % / Breite: 50 %; / Definieren Sie die Breite des Overlay-Panels auf 50 % / Position: absolut / Definieren Sie das Overlay-Panel so, dass es absolut positioniert ist / oben: 0; / Definieren Sie den Abstand von der Oberseite des Overlay-Panels als 0 / display: flex; / Definieren Sie das Overlay-Panel als flexibles Feld / justify-content: center / Definieren Sie die Ausrichtung der Hauptachse als zentriert/ align-items: center; Definieren Sie die Ausrichtung der Querachse als zentriert/ Flex-Richtung: Spalte; / Definieren Sie die Hauptachsenrichtung als vertikale Richtung / transform: TranslateX(0); Übergangseffekt*/
}
.overlay-left {
    transform: TranslateX(-20%);
    /* Definieren Sie die Position des linken Overlay-Panels, um es um 20 % nach links zu verschieben */
}
.overlay-right {
    rechts: 0;
    /* Definiere den Abstand des rechten Overlay-Panels nach rechts als 0 / transform: translatorX(0); / Definiere die Position des rechten Overlay-Panels als 0 */
}
/* Die Position des Overlays, wenn das Design aktiviert ist/ .panel-active.overlay-left { transform: translatorX(0); / Definiere die linke Overlay-Panel-Position als 0 */
}
.panel-active.container-overlay {
    transform: TranslateX(-100%);
    /* Definiere den Containerabstand nach links als -100 % */
}
.panel-active.overlay {
    transform: TranslateX(50%);
    /* Definieren Sie die Overlay-Position, um 50 % nach rechts zu verschieben */
}
/* Position und Transparenz der Login-Registrierungsebene festlegen, wenn aktiviert/ .panel-active.container-signin { transform: TranslateX(100%) / Definieren Sie die Position der Login-Registrierungsebene, um 100 % nach rechts zu verschieben */
}
.panel-active.container-signup {
    Deckkraft: 1;
    /* Definieren Sie die Transparenz der Registrierungsebene als 1 / Z-Index: 5; / Definieren Sie die Ebene der Registrierungsebene als 5 / transform: TranslateX(100%) / Definieren Sie die Position der Registrierungsebene als 100 % nach rechts verschoben */
}