CSS implementiert die Webkomponentenfunktion zum Verschieben des Nachrichtenfelds

Hallo zusammen, ich frage mich, ob ihr die gleiche Verwirrung habt wie ich. Obwohl der Einstieg in CSS einfach ist, hat es zu viel Inhalt. Viele Attribute scheinen wahr zu sein. Ich denke, ich verstehe sie, aber ich finde es schwierig, sie selbst zu verwenden. Ich weiß nicht, wo ich anfangen soll, wenn ich schöne Effekte sehe. Das liegt hauptsächlich daran, dass ich zu wenig Übung mit neuen Attributen habe und sie nicht flexibel anwenden kann. CSS lässt manche Leute immer das Gespür verlieren. Tatsächlich gibt es nicht viele Abkürzungen, um CSS richtig zu lernen. Genau wie bei der JS-Programmierung müssen Sie es ernst nehmen, mehr lesen und mehr üben, denn das CSS von heute ist nicht mehr das CSS von früher.

Diese beiden Bücher, „CSS Definitive Guide Fourth Edition“, sind beispielsweise mehr als 1.000 Seiten lang. Ich habe sie vor mehreren Monaten gekauft, aber ich habe sie immer noch nicht zu Ende gelesen. Der Text ist zu langweilig. Ich vergesse, was ich gelesen habe, nachdem ich fertig bin, und ich vergesse, weiterzulesen. Ich kann wirklich nicht weiterlesen. Ich frage mich, ob es Ihnen genauso geht?

Okay, ohne weitere Umschweife werden wir uns heute ein gängiges Beispiel ansehen: Auf der rechten Seite vieler Websites befindet sich ein festes schwebendes Nachrichtensymbol. Wenn wir auf dieses Symbol klicken, wird das Nachrichteninhaltsfeld seitwärts verschoben. Sie sagen vielleicht, das sei nicht so einfach und könne mit JQ problemlos erreicht werden. Was ich jedoch sagen möchte, ist, dass Sie im Hinblick auf die Leistung der Website möglichst auf JS verzichten sollten, wenn es mit CSS möglich ist, da CSS mittlerweile leistungsstark genug ist.

Im heutigen Beispiel verwenden wir reines CSS, um diesen Effekt zu erzielen. Hier verwenden wir die „CSS-Checkbox-Hack“-Technik. Der Effekt ist in der folgenden Abbildung dargestellt:

1. HTML-Struktur erstellen

Basierend auf dem obigen Effektdiagramm müssen wir drei Elemente erstellen: ein Kontrollkästchenelement und das entsprechende Beschriftungstag sowie ein Formularbereichselement.

Eine hier verwendete CSS-Funktion ist Ihre Aufmerksamkeit wert: Das for-Attribut des <label>-Tags wird verwendet, um anzugeben, mit welchem ​​Formularelement eine Verknüpfung hergestellt werden soll, wodurch der Klickbereich des Formularelements erweitert wird. Wenn wir auf die Markierung des Beschriftungselements klicken, wird das entsprechende Formularelement fokussiert und ausgewählt.

Diese Funktion ist eine der Techniken, die wir zur Implementierung dieses Falls verwenden. In Kombination mit dem CSS-Checkbox-Pseudoklassenselektor zum Anzeigen und Ausblenden des Nachrichtenfelds können wir JS loswerden, um diesen Fall zu implementieren.

Lassen Sie uns auf der Grundlage der oben genannten Ideen loslegen. Zuerst platzieren wir das Kontrollkästchen und die entsprechende Beschriftung und fügen schließlich das Formularfeld und die zugehörigen Formularelemente hinzu.

Wir verknüpfen das ID-Attribut des Formulars mit dem For-Wert des Label-Elements im Formular und erhalten schließlich die vollständige HTML-Struktur, wie im folgenden Code gezeigt:

<input type="checkbox" id="meinecheckbox">
<label für="mycheckbox" class="feedback-label">FEEDBACK</label>
<form class="form">
  <div>
    <label for="fullname">Vollständiger Name</label>
    <Eingabetyp="Text" id="vollständiger Name">
  </div>
  <div>
    <label for="email">E-Mail</label>
    <input type="E-Mail" id="E-Mail">
  </div>
  <div>
    <label for="comment">Kommentar</label>
    <textarea id="Kommentar"></textarea>
  </div>
  <div>
    <button type="submit">Senden</button>
  </div>
</form>

Der fertige Effekt ist wie folgt:

2. Definieren Sie den Grundstil

Nun beginnen wir, einige grundlegende CSS-Stile hinzuzufügen. Hier verwenden wir benutzerdefinierte CSS-Variablen, um globale Änderungen zu ermöglichen, sowie einige Reset-Regeln und grundlegende Regelstile des Formulars. Der Beispielcode lautet wie folgt:

:Wurzel {
  --weiß: weiß;
  --gradient: linearer Gradient (-45 Grad, #FFA600 0 %, #FF5E03 50 %);
  --form: #eeefef;
  --Randradius: 4px;
  --Formularbreite: 500px;
  --form-mob-Breite: 320px;
}
 
* {
  Polsterung: 0;
  Rand: 0;
  Box-Größe: Rahmenbox;
}

Körper {
  Schriftart: 20px/1,5 serifenlos;
  Hintergrund: var(--white);
}

h1 {
  Schriftgröße: 2rem;
  Textausrichtung: zentriert;
  Rand oben: 20vh;
}
 
Taste,
Etikett {
  Cursor: Zeiger;
}
 
Etikett {
  Anzeige: Block;
}
 
Taste,
Eingang,
Textbereich {
  Schriftfamilie: erben;
  Schriftgröße: 100 %;
  Rand: keiner;
}
 
Textbereich {
  Größenänderung: keine;
}

3. Definieren Sie die Stile für Formularelemente

1. Da das Kontrollkästchenelement in diesem Fall nicht angezeigt werden muss, verwenden wir nur seine Pseudoklasseneigenschaften in Kombination mit dem Label, um die Anzeige und Ausblendung des Nachrichtenfelds zu steuern. Daher müssen wir es aus dem sichtbaren Bereich verschieben. Denken Sie daran, dass das ausgeblendete Attribut (display:none) hier nicht verwendet werden kann. Der Beispielcode lautet wie folgt:

[Typ="Kontrollkästchen"] {
  Position: absolut;
  links: -9999px;
}

2. Als nächstes müssen wir diese CSS-Operationen hinzufügen:

• Verwenden Sie das Fix-Attribut, um das Beschriftungselement entsprechend dem Kontrollkästchen in der Mitte der rechten Seite zu fixieren.
• Zeigen Sie den Text „FEEDBACK“ zuerst vertikal an.
• Blenden Sie das Formularfeld aus. Wir verschieben es um 100 % seiner Breite nach rechts und zentrieren es vertikal.

Der entsprechende CSS-Code lautet wie folgt:

/*BENUTZERDEFINIERTE VARIABLEN HIER*/
.feedback-label,
.bilden {
  Position: fest;
  oben: 50 %;
  rechts: 0;
}
 
.feedback-label {
  Transform-Origin: oben rechts;
  transformieren: drehen (-90 Grad) verschieben (50 %, -100 %);
  Z-Index: 2;
}
 
.bilden {
  Breite: var(--form-width);
  max. Höhe: 90vh;
  transformieren: übersetzen(100 %, -50 %);
  Polsterung: 30px;
  Überlauf: automatisch;
  Hintergrund: var(--form);
  Z-Index: 1;
}

Tipps: 1. Was hier hervorgehoben werden muss, ist der Feedback-Label-Stil. Wenn es vertikal transformiert wird, drehen wir es zuerst gegen den Uhrzeigersinn, und die Richtung seiner x- und y-Achsen dreht sich ebenfalls mit, sodass es verschoben wird (50 %, -100 %), um es vertikal zu zentrieren.

2. Im Formularstil verwenden wir die Transformationsmethode „translate(100%, -50%)“, um es aus dem Seitenanzeigebereich zu verschieben.

3. Weiter geht‘s. Keine Sorge, wir sind bald fertig. Wir müssen die Seite noch schöner gestalten und ein paar Styles hinzufügen. Der Beispielcode lautet wie folgt:

/*BENUTZERDEFINIERTE VARIABLEN HIER*/
 
.feedback-label,
.Formulareingabe,
.form Textbereich,
.form button {
  Rahmenradius: var(--border-radius);
}
 
.feedback-label,
.form button {
  Hintergrund: var(--gradient);
  Farbe: var(--weiß);
}
 
.feedback-label:hover,
.form-Schaltfläche:hover {
  Filter: Farbton-Drehung (-45 Grad);
}
 
.feedback-label {
  Polsterung: 5px 10px;
  Rahmenradius: var(--border-radius) var(--border-radius) 0 0;
}
 
Form div:nicht(:letztes-Kind) {
  Rand unten: 20px;
}
 
Form div:letztes-Kind {
  Textausrichtung: rechts;
}
 
.Formulareingabe,
.form Textbereich {
  Polsterung: 0,5px;
  Breite: 100 %;
}
 
.form button {
  Polsterung: 10px 20px;
  Breite: 50%;
  maximale Breite: 120px;
}
 
.form Eingabe {
  Höhe: 40px;
}
 
.form Textbereich {
  Höhe: 220px;
}

Tipp: Hier verwenden wir linear-gradient() für die Hintergrundfarbe, um einen schönen Farbverlaufshintergrund zu erzielen. Es gibt eine weitere CSS3-Syntax, die Aufmerksamkeit erfordert: hue-rotate, der Farbtonrotationsfilter, der es uns ermöglicht, die aktuelle Farbe zu ändern.

4. Verwenden Sie CSS-Selektoren, um Formularfelder zu wechseln und auszublenden

Wir wechseln und zeigen das Nachrichtenfenster an, indem wir auf das Label-Tag klicken, das dem Kontrollkästchen entspricht. Hier verwenden wir die Pseudoklasse :checked sowie ~ (nachfolgender Geschwisterselektor) und + (benachbarter Geschwisterselektor), um Hilfselemente für die Stiltransformation auszuwählen. Der Beispielcode lautet wie folgt:

[Typ="Kontrollkästchen"]:aktiviert + .feedback-label {
  transformieren: drehen (-90 Grad) verschieben (50 %, berechnen ((var (--form-width) + 100 %) * -1));
}
 
[Typ="Kontrollkästchen"]:Fokus + .feedback-Label {
  Umriss: 2px durchgezogenes RGB (77, 144, 254);
}
 
[Typ="Kontrollkästchen"]:aktiviert ~ .form {
  transformieren: übersetzen(0, -50%);
}
 
.feedback-label,
.bilden {
  Übergang: alle 0,35 s Ein- und Ausfahren;
}

Es gibt ein paar Stilregeln, die wir hier besprechen müssen:

• translate(50%, calc((var(--form-width) + 100%) * -1)); Dieser Stil ist etwas komplizierter, aber nicht schwierig. Er addiert einfach die Breite eines Formularfelds. Nach der Drehung wird die Y-Achse zur horizontalen Achse. Eine Bewegung nach links entspricht einer Bewegung der Y-Achse nach oben, daher ist es ein negativer Wert und muss mit -1 multipliziert werden.
• Für den zweiten Selektor fügen wir nach der Auswahl ein Gliederungsattribut hinzu, hauptsächlich um Benutzern die Arbeit zu erleichtern, die an die Tastaturbedienung gewöhnt sind. Wenn sie die Tabulatortaste verwenden, um das Feedback-Beschriftungselement auszuwählen, und dann die Leertaste verwenden, um einfach das Nachrichtenfeld zum Umschalten zu öffnen.
• Im dritten Selektor verwenden wir transform: translate(0, -50%);, um die X-Achse auf 0 zu ändern und sie an ihre ursprüngliche Position zurückzusetzen, damit der Inhalt unseres Nachrichtenfensters angezeigt werden kann.

5. Umgang mit Reaktionsproblemen

Abschließend möchten wir betonen, dass wir bei der Seitenerstellung das Thema Seitenreaktion berücksichtigen müssen. Hier müssen wir einige Stilanpassungen für mobile Geräte vornehmen, z. B. die Breite des Formularfelds von den ursprünglichen 500 Pixeln auf 320 Pixel ändern und die anfängliche Schriftgröße auf 16 Pixel anpassen.

Der schließlich hinzugefügte Antwortcode lautet wie folgt:

/*BENUTZERDEFINIERTE VARIABLEN HIER*/
 
@media screen und (max-width: 600px) {
  Körper {
    Schriftgröße: 16px;
  }
 
  .bilden {
    Polsterung: 15px;
    Breite: var(--form-mob-width);
  }
 
  Form div:nicht(:letztes-Kind) {
    Rand unten: 10px;
  }
 
  [Typ="Kontrollkästchen"]:aktiviert + .feedback-label {
    transformieren: drehen (-90 Grad) verschieben (50 %, berechnen ((var (--form-mob-width) + 100 %) * -1));
  }
}

6. Abschnitte

Nun ist unser Fall abgeschlossen. Sie können Ihr Meisterwerk genießen. Es ist sehr einfach umzusetzen. Abschließend empfehle ich Ihnen noch, es selbst zu üben, damit Sie Ihr Verständnis der in diesem Fall verwendeten CSS-Eigenschaften vertiefen können.

Sie können auf die folgende URL klicken, um den endgültigen Effekt online zu erleben:

https://www.qianduandaren.com/demo/feedback/

Zusammenfassen

Oben sind die Details, wie CSS die Webkomponentenfunktion des seitlich verschiebbaren Nachrichtenfelds implementiert. Weitere Informationen zum seitlich verschiebbaren CSS-Feld finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!