CSS -Schalter

Der Switch in CSS wird verwendet, um dem Benutzer zwischen zwei Zuständen zu wählen: Ein- und Aus-. Wir verschieben auch den Schalter nach links oder rechts. Diese Switches finden Sie auf unseren Websites, mobilen Apps und Software. Schalter werden verwendet, wenn wir etwas ausschalten müssen oder eingeschaltet oder wenn wir Ja oder Nein auswählen müssen. Wir können Schalter verschiedener Formen und Größen in CSS erstellen.

Beispiel 1:

Wir entwickeln einige HTML -Codes, um die Switches zu erstellen und sie mit CSS zu stylen. Der Visual Studio -Code wird verwendet, um die vorgestellten Beispiele zu demonstrieren. Infolgedessen öffnen wir die neue Datei und wählen die „HTML“ als Sprache aus.Dies führt zur Herstellung einer HTML -Datei. Dann schreiben wir einen Code in der Datei, die erstellt wurde. Wenn wir fertig sind, speichern wir den Code mit dem “.HTML ”Dateierweiterung. Danach entwerfen wir in diesem Code einen Schalter, der aus oder auf angibt. Es ermöglicht uns, den Schalter ein- oder auszuschalten. Jetzt gehen wir zum CSS -Code, um diesen Wechsel mit einigen Designs zu geben.

Wir verwenden die Eigenschaft "Text-Align" für die "Körper". So wird der gesamte Körper des HTML im „Zentrum“ der Seite gerendert. Wir ändern auch die „Farbe“ unserer Überschrift in „Grün“. Dann stylen wir den "Umschalten". Wir tun dies, indem wir die Eigenschaften „Toggle“ und Styling verwenden. Die "Position" dieses Umschusses ist auf "Relativ" gesetzt. Wir verwenden den "Inline-Block" als "Anzeige". Die „Breite“ und „Höhe“ wurden ähnlich auf "100px" bzw. "52px" eingestellt. Die „Hintergrundfarbe“ dieses Toggle ist „rot“ und sein „Grenzradius“ ist „30px“, was darauf hinweist, dass seine Kanten gekrümmt sind.

Dann fügen wir einen "Rand" um diese Umschalttaste mit einer Breite von "2PX" und einer Farbe "grau" hinzu. Nachdem wir dies gestylt haben, verwenden wir den "After" -Segektor mit diesem "Umschalten". Wie wir alle wissen, müssen wir bei der Verwendung des "After" -Anterwählten in CSS einen „Inhalt“ haben."Wir setzen die" Position "dieses Inhalts auf" absolut "und die" Breite "und" Höhe "auf" 50px "jeweils. Diesmal ist die "Hintergrundfarbe" auf "grau" eingestellt.

Für jeden von ihnen setzen wir zusätzlich das „Top“ und „links“ auf „1PX“. Wir verwenden den „Übergang“ auf dieser „0.5s ”Umschalten. Das Styling für den „Toggle: After“ ist jetzt abgeschlossen. Wir verwenden zwei Eigenschaften in den lockigen Klammern von „P“, um den Absatz ein wenig weiter zu stylen. Wir aktualisieren einfach die "Schriftfamilie" des Absatzes auf "Arial" und verwenden die Eigenschaft "Schriftgewicht" zu "BOLD". Wenn dieser Umschalter überprüft wird, ändern wir die Eigenschaft "links" in "49px", damit sie auf "49px" bewegt wird. Wir verschieben auch seine Farbe auf „grün“. Setzen Sie außerdem "keine" für das "Anzeigen" des "Kontrollkästchens".

Der Schalter ist "aus" und die Farbe ist in diesem Screenshot "rot". Jetzt haben wir einen folgenden Screenshot:

Der Schalter ist eingeschaltet und ist im zweiten Screenshot „grün“ gefärbt. Das Wort "Aus" wird auf der linken Seite des Schalters gedruckt. Wenn wir es ausschalten wollen, klicken wir einfach darauf und verschieben es nach rechts.

Beispiel #2:

In diesem Beispiel erstellen wir zwei Switches. Diese unterscheiden sich von dem vorherigen Schalter, den wir im ersten Beispiel erstellt haben. Wir machen hier zwei Schalter.

Wir stylen den Körper, indem wir die verschiedenen Eigenschaften verwenden. Wir setzen die "Boxgröße" auf "Border-Box" und verwenden die Eigenschaft "Schriftfamilie" und verwenden die Schriftart "Arial" dafür. Wir setzen auch die Größe auf "100%" fest. Wir verwenden die "*" mit "After" und "Bevor" Selektoren, sodass es alle Elemente auswählt und die angegebene Eigenschaft auf alle anwendet. Wir "erben" die "Boxgröße". Und die "Polsterung" und "Rand" sind beide auf "0" gesetzt. Jetzt stylen wir die „Mid“, indem wir die Eigenschaft "Anzeige" als "Flex" verwenden. Wir verwenden das „Zentrum“ sowohl für "Align-Item" als auch für "Justify-Content". Wir setzen die Schriftgröße "1EM" für die "Padding-Top".

Dann stylen wir den „Rocker“, der der erste Schalter ist. Das "Display" dafür ist "Inline-Block" und seine "Position" ist "relativ". Die "Schriftgröße" für den ersten Schalter ist "2EM" und ist in seinem "Schriftgewicht" zu "fett". Das "Text-Align" ist SE zu "Zentrum" und die "Text-Transformation" ist auf die "Großbuchstaben" eingestellt. Die "Farbe" ist auf "grau" eingestellt. Die "Breite" und "Höhe" sind auf "7EM" bzw. "4EM" eingestellt. Das "Überfluss" ist "versteckt". Das "Grenzboden" ist "0".5em ”. Und Twe setzen die „weiße“ Farbe auf „feste“ Typ.

Dann kommt der „Rocker-Small“, der die zweite Taste ist. Dafür setzen wir die "Schriftgröße" auf "0".75em ”und sein„ Rand “in" 1EM ". Wir nutzen den "Before" -Auskörper mit unserem ersten Switch "Rocker". Und setzen Sie den „Inhalt“ ein, weil er während der Verwendung des "Before" und "After" Selektor obligatorisch ist. Dann setzen wir seine "Position" auf "absolut". Sein "Top" ist auf "0" gesetzt.5em ”. Die "links", "rechts" und "unten" sind alle auf "0" gesetzt. Sein "Hintergrund" ist "grau", der "Grenze" ist "weiß", die Breite "0".5em ”und„ solide “im Typ. Das "untere Grad" ist "0".

Jetzt verwenden wir den „Rocker -Eingang“. Dafür setzen wir die "Deckkraft", "Breite" und "Höhe" auf "0". Jetzt stylen wir die "Switch-Links" und "Switch-Rechts" in denselben lockigen Klammern. Wir setzen seinen "Cursor" auf "Zeiger" und die "Position" ist "absolut". Das "Display", das wir festlegen, ist "Flex". Das "Align-Item" und die "Justify-Incontent" sind beide auf das "Zentrum" gesetzt. Die „Höhe“, die wir hier einstellen, lautet „2.5em ”und die„ Breite “ist" 3em ". Wir müssen den „Übergang“ dafür auf „0 setzen.2s ”.

Jetzt verwenden wir separat die "Switch-links" und "Switch-Rechts", in der wir die Eigenschaft "Transformation" verwenden. Dafür setzen wir zuerst die "Höhe", "Breite", "links" und "unten" auf "2".4em ”,„ 2.75em ”,„ 0.85em ”und„ 0.4em ”, jeweils. Wir fügen die "Hintergrundfarbe" zu "#ddd" hinzu. Und wir verwenden die Eigenschaft "Transform" und "drehen" sie zu "15DEG" und "schief" auf "15 Grad". Jetzt haben wir das „Switch-Recht“ und entwerfen diese, indem wir die „richtige“ Eigenschaft auf „0) einstellen.5em ”und setzen Sie seinen„ Boden “auf„ 0 “. Der "Hintergrund" ist auf "rot" eingestellt. Auf dem „roten“ Hintergrund setzen wir die „weiße“ Eigenschaft für die Schriftart „Farbe“. Wir verwenden den "Vorher" -Auskörper sowohl mit "Switch-Left" als auch mit "Switch-Light". Für diesen "Vorher" -Auswähler verwenden wir also den "Inhalt". Seine "Position" ist auf "absolut" eingestellt.

Dann setzen wir auch seine „Breite“, „Höhe“ und „unten“. Die "Hintergrundfarbe" hier ist "#CCC" und wir verwenden die Eigenschaft "Transform" und "Skewy (-65 Grad)". Jetzt setzen wir die Eigenschaft "links" auf "-0).4EM ”im Inneren, indem Sie den Selektor" vor "mit dem" Switch-Links "verwenden. Wir verwenden auch den "Vorher" -Sähler mit dem "Switch-Rechts" getrennt und setzen den „richtigen“ Eigenschaft auf „-0.375em ”. Seine "Hintergrundfarbe" ist "transparent" und wir verwenden die "Transformation" zu "schief" zu "65 Grad".

Jetzt erstellen wir einen Effekt, wenn es „überprüft“ ist. Die "Hintergrundfarbe" ist "transparent" und seine Breite, wenn es überprüft wird, ist auf "3" gesetzt.0833em ”. Dann verwenden wir "geprüft" mit "Switch-Left" und "Switch-Light". Wir entwerfen oder stylen dies, indem wir die „Hintergrundfarbe“ und die Schriftart „Farbe“ hinzufügen und sie als „#DDD“ und „#888“ einstellen. Hier werden die Selektoren „Bottom“ und „Right“ auf "0) gesetzt.4em “und„ 0.8em ”. Dann verwenden wir die Peropertien "Transformation" und "drehen" und "verzerren" auf "-15de" für beide. Wir verwenden das Eigenschaft "geprüft" sowohl mit "Switch-Left" als auch mit "Switch-Light". Und verwenden Sie den "Before" Selector in den lockigen Klammern und stellen Sie seine "Hintergrundfarbe" auf "#CCCC" ein. Dann setzen wir die „Farbe“ der Schriftart auf „weiß“, wenn sie überprüft und „grau“ ist, bevor sie überprüft wird.

Der Ausgang rendert zwei Switches: Der erste Schalter hat ein/aus und der zweite Schalter hat Ja/Nein. Im ersten Bild können Sie sehen, dass der erste Schalter „Eingeschaltet“ ist und seine Farbe „grün“ ist, während der zweite Schalter auf der „Nein“ und seine Farbe „rot“ ist, ist „rot“.

Im zweiten Bild überprüfen wir den ersten Schalter auf "Aus" und den zweiten Schalter auf "Ja". Der erste Schalter erscheint also "aus" und "rot". Der zweite Schalter ist diesmal „Ja“ und erscheint „grün“.

Abschluss

Wir haben dieses Tutorial erstellt, um Ihnen zu zeigen, was ein Switch ist und wie ein Switch in CSS gestaltet und gestylt wird. Wie bereits erwähnt, wird der Switch verwendet, um zwischen ein- und auszuwählen sowie Ja/Nein zu wählen. Wir haben uns die beiden bisher verschiedenen Beispiele angesehen und alle Eigenschaften durchlaufen. Nachdem Sie mit den Codes in diesem Tutorial experimentiert haben, können Sie verstehen, wie Switches in CSS funktionieren und wie Sie Schalter für Ihre Website oder Projekte mit Leichtigkeit konstruieren können.