Wie mache ich einen Switch (switcher) mit CSS

Nachdem wir die HTML-Struktur des Schalters erstellt haben, können wir das Erscheinungsbild des Schalters mit CSS stylen. Wir können Selektoren verwenden id und class zum Auswählen von Optionsfelderelementen und Anwenden entsprechender Stile. Zum Beispiel können wir die Farbe und das Hintergrundbild von Schaltflächen mithilfe von Eigenschaften ändern background-color und background-image.

Verschiedene Arten von Schaltern

• Standardschalter: Dies ist ein klassischer Schalter mit quadratischer oder runder Form. Es hat zwei Zustände - ein und aus.
• Schalter-Schalter: Dieser Schaltertyp wird verwendet, um eine bestimmte Funktionalität oder einen bestimmten Modus zu aktivieren oder zu deaktivieren. Es kann durch eine Schaltfläche mit Text dargestellt werden, die seinen Status ändert, wenn sie gedrückt wird.
• Beschrifteter Schalter: Dies ist eine Kombination aus einem Schalter und einer Textbeschriftung. Es wird normalerweise verwendet, um dem Benutzer Informationen darüber zu übermitteln, was genau ein bestimmtes Element wechselt.
• Schalter mit Symbol: in einigen Fällen kann es hilfreich sein, anstelle von Text ein Symbol zu verwenden, um einen Schalter anzuzeigen. Zum Beispiel kann ein Glühbirnensymbol verwendet werden, um das Licht ein- oder auszuschalten.

Die Auswahl des Schaltertyps hängt vom Design und der Funktionalität der Website sowie von den Bedürfnissen der Benutzer ab. Es ist wichtig, einen geeigneten Stil zu wählen, der für die Benutzer verständlich und benutzerfreundlich ist und in das Gesamtkonzept des Website-Designs passt.

Grundlegende CSS-Prinzipien zum Erstellen von Optionsfeldern

Das Erstellen von Optionsfeldern in CSS mag für Anfänger eine entmutigende Aufgabe sein, aber es ist eigentlich ziemlich einfach, wenn Sie die grundlegenden Prinzipien von CSS verstehen. In diesem Abschnitt werden wir uns einige Prinzipien ansehen, mit denen Sie einen Schalter mit CSS erstellen können.

1. Verwenden Sie input[type="checkbox"] um einen Schalter zu erstellen. Mit diesem Selektor können Sie alle input-Elemente mit dem Typ "checkbox" auswählen.

2. Verwenden Sie die Eigenschaft :checked, um den aktiven Status des Schalters zu formatieren. Auf diese Weise können Sie die Stile des Schalters ändern, wenn er sich im aktiven Zustand befindet.

3. Verwenden Sie die Pseudoelemente ::after und ::before, um ein Schalterdesign zu erstellen. Diese Pseudoelemente können zusätzliche Elemente innerhalb des Schalters hinzufügen, die Sie nach Belieben stylen können.

4. Verwenden Sie die transition-Eigenschaft, um flüssige Animationen des Schalters zu erstellen. Auf diese Weise können Sie die Dauer und den Typ der Animation festlegen, wenn Sie die Schalterzustände umschalten.

5. Verwenden Sie Selektoren, um bestimmte Schalterzustände auszuwählen. Zum Beispiel könnten Sie verwenden :hover, um einen Schalter zu stylen, wenn sich der Cursor darüber befindet, oder :focus, um den Schalter zu stylen, wenn er aktiv ist.

6. Verwenden Sie die display-Eigenschaft, um den Anzeigetyp des Schalters festzulegen. Zum Beispiel können Sie display: block; um einen Schalter zu einem Blockelement zu machen, oder display: inline-block; um ihn zu einem Blockelement zu machen.

Wenn Sie diese grundlegenden Prinzipien befolgen, können Sie mit CSS einen stilvollen und funktionalen Schalter erstellen. Denken Sie daran, dass das Experimentieren mit verschiedenen CSS-Eigenschaften und -Werten zu einem einzigartigen und individuellen Schalterdesign führen kann, das Ihre kreative Absicht widerspiegelt und Ihren Bedürfnissen entspricht.

So erstellen Sie einen Basisschalter

In HTML und CSS können Sie mithilfe von CSS-Elementen und -Pseudoelementen einen Basisschalter erstellen.

Hier ist ein einfaches Codebeispiel:

 
Включено

In diesem Beispiel wird der Schalter als Checkbox dargestellt . Geben Sie ihm eine eindeutige ID über das id-Attribut ein.

Um den Schalter in CSS zu stylen, fügen Sie die folgenden Stile hinzu:

Diese Stile geben das allgemeine Aussehen und die Animation des Schalters an. Insbesondere werden die Abmessungen und Farben der Elemente sowie die Animation für die Ansicht des Ein- und Ausschaltzustands festgelegt.

Wenn Sie auf den Schalter klicken, ändert sich der Checkbox-Status, die toggle-input:checked-Klasse wird ausgelöst und die entsprechenden Stile werden angewendet, einschließlich der Animation für den Schieberegler.

Dies ist ein grundlegendes Beispiel für einen Schalter, der weiter verbessert und an die Projektanforderungen angepasst werden kann, indem verschiedene Zustände, Animationen und Effekte hinzugefügt werden.

Hinzufügen von Stilen und Effekten zu einem Optionsfeld

Nachdem Sie den grundlegenden HTML-Code für den Schalter erstellt haben, ist es an der Zeit, Stile und Effekte hinzuzufügen, um ihn attraktiver und interaktiver zu gestalten.

Erstellen Sie zuerst eine neue CSS-Datei oder fügen Sie der vorhandenen CSS-Datei Stile hinzu. Weisen Sie dann mit den Klassen- oder ID-Selektoren den gewünschten Schalterelementen Stile zu.

Um beispielsweise die Hintergrundfarbe eines Schalters zu ändern, wenn Sie darauf klicken, können Sie den folgenden CSS-Code verwenden:

In diesem Beispiel definieren wir, dass der Standardhintergrund des Schalters die Farbe #ccc hat. Wenn der Schalter jedoch markiert ist (im Status "checked"), ändert sich der Hintergrund des Schalters in Rot (#ff0000).

Sie können auch Übergangseffekte hinzufügen, um die Eigenschaften eines Schalters reibungslos zu ändern, wenn Sie den Mauszeiger darüber bewegen:

In diesem Beispiel fügen wir die CSS-Eigenschaft "transition" mit dem Wert "background-color 0.3s ease" hinzu. Dies bedeutet, dass Änderungen in der Hintergrundfarbe des Schalters reibungslos (innerhalb von 0.3 Sekunden) mit einem reibungslosen Effekt (ease) erfolgen.

Sie können auch andere Stile und Effekte hinzufügen, z. B. das Ändern der Textfarbe oder das Hinzufügen von Schatten, um dem Schalter noch mehr Attraktivität zu verleihen. Verwenden Sie Ihre Fantasie und experimentieren Sie mit verschiedenen Stilen und Effekten, um das gewünschte Ergebnis zu erzielen.

Erstellen eines animierten Schalters

Sie benötigen HTML, CSS und ein wenig JavaScript, um einen animierten Switch zu erstellen. Beginnen wir mit HTML:

Hier erstellen wir einen Container mit der Klasse "toggle", in dem sich das Attribut type="checkbox" und die eindeutige ID "toggle-checkbox" befinden, sowie das Attribut for="toggle-checkbox".

Um den Schalter zu animieren, fügen Sie CSS-Stile hinzu:

In CSS definieren wir Stile für den Container .toggle, für den Schalter selbst .toggle input[type="checkbox"] und Markierungen .toggle label.

In JavaScript müssen wir auf die Statusänderungen des Schalters warten:

var checkbox = document.getElementById('toggle-checkbox'); checkbox.addEventListener('change', function() < // код, выполняемый при изменении состояния переключателя >);

Innerhalb einer Funktion, die als Argument an die addEventListener-Methode übergeben wird, können Sie Code hinzufügen, der ausgeführt wird, wenn sich der Status des Schalters ändert. Sie können beispielsweise die Hintergrundfarbe eines Containers ändern oder versteckte Inhalte anzeigen.

Jetzt haben Sie eine Grundlage, um einen animierten Switch auf Ihrer Webseite zu erstellen. Verwenden Sie diese Beispiele als Ausgangspunkt und passen Sie das Aussehen und die Animation des Schalters so an, dass sie Ihren Bedürfnissen und dem Stil Ihrer Website entspricht.

Verfügbarkeit und Verbesserung des Schalters für den Benutzer

Eine Möglichkeit, die Verfügbarkeit eines Schalters zu verbessern, besteht darin, Benachrichtigungsmeldungen über seinen Status hinzuzufügen. Wenn Sie beispielsweise den Status eines Schalters ändern, können Sie eine Textnachricht hinzufügen, die daneben angezeigt wird. Dadurch kann der Benutzer leichter verstehen, was nach seiner Aktion passiert ist.

Es ist auch eine Überlegung wert, den Schalter über die Tastatur zu steuern. Dazu können Sie dem Optionsfelderelement ein Tabindex-Attribut hinzufügen und die entsprechenden Tasten definieren, um es zu steuern.

Für Benutzer, die Screenreader verwenden, ist es wichtig, entsprechende Attribute wie aria-checked und role hinzuzufügen. Dadurch können die Screenreader den Status des Schalters korrekt lesen.

Durch die Verbesserung der Verfügbarkeit des Schalters wird die Website für alle Kategorien von Benutzern, einschließlich Menschen mit Behinderungen, freundlicher und benutzerfreundlicher. Beachten Sie beim Erstellen eines Schalters, wie wichtig es ist, diese für alle Benutzer zu verbessern.