de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Generate Reine CSS3 Toggle Button mit On / Off FlipSwitch Generator

Wenn Sie es satt haben, Knöpfe zu benutzen, um etwas ein- oder auszuschalten, finden Sie vielleicht stattdessen eine frische Luft in einem Kippschalter. Mit der sehr schönen Verbesserung der Web-Entwicklung heutzutage, ist das Erstellen von On / Off-Flip-Switches, wie Sie es in einem mobilen Betriebssystem sehen, sehr einfach. Sie brauchen nur das richtige Werkzeug dafür.

Einführung in die Web-App Ein / Aus-FlipSwitch-Generator, mit dem Sie ganz einfach einen mobilen OS-ähnlichen Stil für Ihre benutzerdefinierte Ein / Aus-Schaltfläche erstellen können. Die Taste ist auch mit den meisten modernen Webbrowsern kompatibel: Chrome, Firefox, Safari, Opera, IE9, Android und iOS.

Anfangen

Ein / Aus FlipSwitch Generator hat eine ziemlich einfache und intuitive Schnittstelle. Eine Live-Vorschau ist ebenfalls verfügbar, um den Ergebnisstil anzuzeigen, wenn Sie die verfügbaren Eingaben ändern. Lass uns einen Blick darauf werfen.

Wie Sie auf dem folgenden Screenshot sehen können, gibt es den FlipSwitch-Generator "Ein / Aus" mit 6 Haupteingabemöglichkeiten: Stil, aktiver Zustand, inaktiver Zustand, Schalter, Beschriftungen und Größenanpassung.

Im Style- Bereich können Sie unter iOS4 / 5, Android und Windows 8 auswählen, welche Art von Schaltflächenstil gewünscht wird. Mit der Option Benutzerdefiniert können Sie die Schaltfläche von Grund auf neu erstellen.

Unten finden Sie zwei nützliche Links: Random Style wird verwendet, um eine zufällige Schaltfläche zu generieren. While Reset to default state (Zurücksetzen auf den Standardzustand) wird zum Zurücksetzen aller Änderungen verwendet, die Sie von anderen Eingaben vorgenommen haben.

Darunter sehen Sie Ihre Schaltfläche in ihrem aktiven Zustand und in ihrem inaktiven Zustand . In den Abschnitten spielen Sie mit der Hintergrundfarbe, der Textfarbe und der Beschriftung der Schaltfläche. Sie können die Textbeschriftung von EIN und AUS auf etwas völlig anderes, wie Mute oder Unmute ändern.

Die Schaltereingabe hilft Ihnen bei der Manipulation des Switcher-Stils. Hier können Sie die Größe des Schalters, den Hintergrund und die Rahmenfarben des Schalters sowie die Standardposition des Schalters einstellen. Bei Dual-Switch-Farbe können Sie die Farbe des zu ändernden Schalters an separaten umgedrehten Positionen auswählen.

Für die Anpassung ist auch der Etikettenstil verfügbar: Schriftgröße und Textabstand; und die Größe der Schaltfläche: Breite, Höhe und Randradius.

Deinen Knopf erhalten

Glücklich mit dem Stil, den du geschaffen hast? Lassen Sie uns nun die Codes erfassen, damit Sie sich auf Ihre Website oder Ihr Produkt bewerben können. Scrollen Sie nach unten, um die resultierenden Codes der von Ihnen erstellten Schaltfläche zu sehen. Die Codes werden in CSS und HTML bereitgestellt. Klicken Sie einfach auf den Link In Zwischenablage kopieren, um den Inhalt zu kopieren und verwenden Sie die Schaltfläche.

Aktivieren Sie den IE8-Support

Auf der Seite wird erwähnt, dass der auf der Seite generierte Schalter auf IE6-8 nicht unterstützt wird. Es gibt jedoch eine Lösung mit einem kleinen JavaScript-Code (von einem der On / Off FlipSwitch Generator-Team, anna.mi) gebracht.

Um die Unterstützung in IE8 zu aktivieren, müssen Sie nur einen kleinen CSS-Code hinzufügen, der den Zustand der Schaltfläche basierend auf der .onoffswitch-checked Klasse wie folgt ändert.

 .onoffswitch-checked .onoffswitch-intern {margin-left: 0; } .onoffswitch-checked .onoffswitch-switch {rechts: 0px; } 

.onoffswitch-checked die .onoffswitch-checked Klasse zu .onoffswitch-checked wenn sie .onoffswitch-checked, fügen Sie Ihrer Seite das folgende Javascript hinzu:

Wenn die Option "Standardmäßig aktivieren" ausgewählt ist, vergessen Sie nicht, auch die .onoffswitch-checked Klasse in Ihr HTML aufzunehmen

Letzter Gedanke

Schauen Sie sich das an und lassen Sie uns wissen, ob der Flipswitch-Generator fehlerfrei funktioniert. Wir können nur so viele Kombinationen ausführen, aber am Ende des Tages, wenn die Programmierung über Ihre Fähigkeiten hinausgeht, beginnen Sie vielleicht mit diesem praktischen Tool, bevor Sie die Dinge auf die nächste Stufe bringen. Lass uns wissen was du denkst.

20 iOS 8 Neue Funktionen und Tipps, die Sie kennen müssen

20 iOS 8 Neue Funktionen und Tipps, die Sie kennen müssen

Wenn Sie ein iOS-Benutzer sind und kürzlich auf das neueste iOS 8 aktualisiert haben, sind Sie möglicherweise verwirrt, was eigentlich neu ist . Du bist nicht allein. Wie die meisten früheren Updates von Apple auf seinen Betriebssystemen, sei es für das Desktop- oder das mobile Betriebssystem, hat das neueste iOS 8 in Bezug auf seine Benutzeroberfläche nicht wirklich eine Generalüberholung erfahren.Es gi

(Tech- und Design-Tipps)

Materialise - Ein Material Design CSS Framework

Materialise - Ein Material Design CSS Framework

Google Material Design zielt darauf ab, gut im Web und auch in mobilen Apps zu funktionieren. Es wird immer beliebter bei Entwicklern und wenn Sie es auch übernehmen möchten, gibt es viele Möglichkeiten, Material Design auf Ihrer Website zu implementieren. Sie können Polymer oder Angular verwenden oder Materialise verwenden.Mat

(Tech- und Design-Tipps)