CSS -Kippschalter
Beispiel 1
Wir schreiben einen HTML -Code zum Erstellen und Styling -Toggle -Switches in CSS. Um die angegebenen Beispiele zu demonstrieren, verwenden wir Visual Studio Code. Infolgedessen öffnen wir die neue Datei und wählen die Sprache „HTML“ aus, die beim Erstellen einer HTML -Datei folgt. Dann schreiben wir den Code in die hier erstellte Datei. Wir müssen diesen Code speichern, wenn er fertig ist, und das “.Die Dateierweiterung der HTML ”wird dem Dateinamen automatisch hinzugefügt. Wir erstellen auch einen Text, den wir fett präsentieren möchten, also verwenden wir “"Und schreiben Sie die Zeile in diese"”Öffnen und Schließen von Tags. Danach erstellen wir hier in diesem Code einen Kippschalter hier in diesem Code, der aus oder auf. Es ermöglicht uns, den Schalter auszuschalten oder auf. Jetzt bewegen wir uns auf den CSS -Code zu.
Zunächst richten wir alle Körperelemente mit „Text-Align“ auf das „Zentrum“ aus und wenden diese Eigenschaft auf den „Körper an.”Ändern Sie dann die„ Farbe “der Überschrift in„ grün “, um sie attraktiv zu machen. Jetzt müssen wir den „Schalter stylen."Wir verwenden" Toggle "und dann die Styling -Eigenschaften hier. Das "Display", das wir hier verwenden, ist "Inline-Block"."Wir setzen auch seine" Breite "und" Höhe "auf" 100px "bzw." 52px ". Die „Hintergrundfarbe“ dieses Umschusses ist „rot“ und der „Grenzradius“ ist „30px“, sodass seine Kanten gekrümmt sind.
Dann setzen wir auch einen „Rand“ um diese Umschalttaste mit der Breite „2px“ in „soliden“ Typ und auch in „grauer“ Farbe. Nachdem wir dies gestylt haben, werden wir den "After" -Anterwählten mit diesem "Schalter" verwenden und wie wir wissen, dass wir "Inhalte" haben müssen, wenn wir diesen "After" -Sektor in CSS verwenden. Nach diesem Inhalt setzen wir hier seine „Position“ auf „Absolute“, und die „Breite“ und „Höhe“ beträgt jeweils „50px“. Diesmal ist die "Hintergrundfarbe" "grau."Wir haben auch seine" Top "und" links "für jeden von ihnen auf" 1PX "gesetzt. Wir wenden den „Übergang“ auf diesen Umschalter von „0 an.5s ”. Das Styling für den „Toggle: After“ ist hier abgeschlossen, und wir werden den Absatz ein wenig mit zwei Eigenschaften in den lockigen Klammern von „p stylen.”
Wir ändern nur seine „Schriftfamilie“ in „algerisch“ und dann in diesem Absatz „fett“ mit der Eigenschaft „Schriftgewicht“. Wir setzen die "links" auf "45px", damit es "45px" bewegt. Und seine Farbe ändert sich zu „Grün."Legen Sie diese" Anzeige "des" Kontrollkästchens "auf" None "fest.”
Wir zeigen diesen Schalter auch in der folgenden Ausgabe und in der ersten Ausgabe können Sie feststellen, dass wir hier in diesem Switch zwei Möglichkeiten haben. In diesem Screenshot ist der Schalter "aus" und seine Farbe "rot.”
Im zweiten Screenshot ist dieser Switch "eins" und ist „grün“ in der Farbe. Der Ausgang ist auf der rechten Seite des Schalters geschrieben. Wenn wir diesen Switch ausschalten möchten, klicken wir auf diesen Schalter, um ihn auf die rechte Seite zu diesem Switch zu verschieben.
Beispiel 2
Im zweiten Beispiel werden wir zwei verschiedene Kippschalter erstellen. Wir erstellen zwei Switches. Ein Switch heißt "abonnieren" und der andere Switch wird hier als "Newsletter" bezeichnet. Dann stylen wir diese Switches in der CSS -Datei.
Wir stylen den „Körper“ der HTML, also setzen wir seine „Rand“ und „Polsterung“ auf „0“, und die Hintergrundfarbe dafür ist „schwarz“, wie hier ist „#151515“ der Code für das Schwarze.Wir setzen das Div, das als "Zentrum" bezeichnet wird. Das „Obere“ und „unten“ des Absolut-Positionszentrums werden für jeden „50px“ eingestellt, und dann verwenden wir die Eigenschaft "Transforms-Translate" auf "(-50px, -50px)" ".
Wenn wir all dies verwenden, werden alle Elemente vertikal und horizontal in der Mitte festgelegt. Dann stylen wir mit dieser. Der „Rand“, den wir dafür verwenden, ist "10px" und "Relativ" in "Position"."Die" Breite "dieses Kontrollkästchen ist" 120px "und" 40px "in seiner Höhe. Wir setzen auch seine „Webkit-Aquarie“ auf „keine."Wir verwenden seinen" Hintergrund "in der Form" Lineargradient ". Die "Umrisse" dafür ist auch "keine", und für die Herstellung seiner Kantenkurve verwenden wir hier das Eigentum "Border-Radius" und setzen es auf "20px", um sie auf "20px" zu setzen. Wir wenden die "Box-Shadow" an und setzen seinen Wert auf "0 0 0 4px". Dann stylen wir das Kontrollkästchen, wenn es überprüft wird, und setzen seinen „Hintergrund“ auf „linear-Gradient“, dh „0deg“ und „Orange."Wir verwenden hier das gleiche" Box-Shadow ", wie wir oben verwendet haben, und dies ist für den" N-ten vom Typ (1) ". Das „N-ten Typ“ ist ein Selektor zur Auswahl eines oder mehrerer Elemente. Wir stylen auch das überprüfte Kontrollkästchen für den „N-ten Typ (2)“ und setzen seinen „Hintergrund“ auf den „linearen Gradienten“ von „0deg“ und „Blue.”Wir stylen auch das Kontrollkästchen, wenn es nicht überprüft wird. Hier verwenden wir den "Vorher" -Ausokustiker, und der "Nachher" oder "Vorher" muss ein "Inhalt" verfügen."Die" Position ", die wir hier setzen."Es ist" 80px "in seiner" Breite "und" 40px "in" Höhe "."Wir verwenden wieder den" linear Gradienten "für den" Hintergrund "."Diesmal verwenden wir" schwarz "und" grau "Farbe. Wir verwenden auch die Eigenschaft "Transformation" und "skalieren" nach x, y als "0".98, 0.96 ”. Wir setzen seine „Übergangseigenschaft“ auf „0.5s ”. Das "Links" ist auf "40px" eingestellt, bevor er überprüft wird. Wir verwenden auch den "After" -Sähler und stylen dies auch.
In dieser Auswahl "After" haben wir zuerst den "Inhalt" und seine "Position" als "absolut" festgelegt."Seine" Top "setzt" 50% - 2px "und" links "" 70px ". Wir setzen auch seine „Breite“ und „Höhe“ auf "4px" jeweils. Wir setzen seinen „Hintergrund“ und verwenden hier wieder „linear Gradient“. Die „50%“ des „Grenzradius“ werden hier angewendet, sodass seine Kanten in einer Kurvenform erscheinen. Die Eigenschaft "Übergang" ist ebenfalls auf "0" gesetzt.5s “, der zur Steuerung einer Animationsgeschwindigkeit von 0 verwendet wird.5sec. Im "After" -Alektor ist das "linke" auf "110px" eingestellt.
Wir möchten die Überschriften mit „H1“ stylen und hier einige Eigenschaften verwenden. Der "Rand" ist "0" und die "Polsterung" auch "0". Wir verwenden die „sans-serif“ „Schriftfamilie“ für diese Überschriften. Richten Sie diese Überschriften auch auf das „Zentrum an."Die Schriftart" Farbe "dieser Überschriften ist" weiß "und" 16px "in Größe. Wir stellen auch die obere und untere „Polsterung“ auf „15px“ und „0PX“ für links und rechts ein. Wir verwenden „obere Fälle“, sodass der Überschriftentext in den Großbuchstaben umgewandelt wird und der „Buchstabenabstand“ für alle Überschriften „4px“ ist.
Wir haben hier zwei Screenshots als Ausgabe zur Verfügung gestellt. Die erste Ausgabe zeigt vor, bevor dieser Kippschalter überprüft wird, und der zweite Screenshot ist, wenn wir beide Toggle -Switches überprüft haben.
Abschluss
Wir haben diese Anleitung vorgestellt, um den Kippschalter in CSS zu erläutern und den Kippschalter in CSS zu entwerfen und zu stylen. Wir haben besprochen, dass wir den Toggle -Switch verwenden, wenn wir zwischen Ein- und Ja/Nein wählen möchten. Wir haben hier zwei Codes untersucht und alle Eigenschaften erläutert, die wir in unseren Codes im Detail verwenden. Nachdem Sie die Codes in diesem Handbuch ausprobiert haben, erfahren Sie, wie diese Kippschalter in CSS funktionieren und wie Sie Schalter auf Ihrer Website oder Projekte entwerfen.