nl.hideout-lastation.com
Genereer Pure CSS3 Schakelknop met Aan / Uit FlipSwitch Generator
Als u het beu bent om knoppen te gebruiken om iets in of uit te schakelen, is het misschien mogelijk dat u in plaats daarvan een frisse wind waait met een draaischakelaar. Met de zeer mooie verbetering van webontwikkeling tegenwoordig, is het maken van aan / uit-flip-switch, zoals wat je ziet in een mobiel besturingssysteem heel eenvoudig. Daar heb je gewoon de juiste tool voor nodig.
Introductie van de webapp On / Off FlipSwitch Generator waarmee u gemakkelijk elke mobiele OS-achtige stijl voor uw aangepaste Aan / Uit-knop kunt maken. De knop is ook compatibel met de meeste moderne webbrowsers: Chrome, Firefox, Safari, Opera, IE9, Android en iOS.
Ermee beginnen
Aan / Uit FlipSwitch Generator heeft een vrij eenvoudige en intuïtieve interface. Er is ook een live preview beschikbaar om de resultaatstijl weer te geven terwijl u de beschikbare ingangen wijzigt. Laten we kijken.
Zoals u kunt zien in het volgende screenshot, biedt Aan / Uit FlipSwitch Generator 6 belangrijke invoeropties: stijl, actieve status, inactieve status, switch, labels en formaat.
In het gedeelte Stijl kun je kiezen wat voor soort knopstijl je wilt van iOS4 / 5, Android en Windows 8. Met de optie Aangepast kun je de knop vanaf nul opbouwen.
Hieronder zijn er twee handige links: Willekeurige stijl wordt gebruikt om een willekeurige knop te genereren. Terwijl Reset naar standaardstatus wordt gebruikt voor het resetten van alle wijzigingen die u vanuit een andere invoer hebt aangebracht.
Hieronder ziet u het uiterlijk van uw knop in de status Actief en inactief . In de secties speel je met achtergrondkleur, tekstkleur en het tekstlabel van de knop. U kunt het tekstlabel van AAN en UIT wijzigen in iets heel anders, zoals Dempen of Dempen opheffen.
Schakelingang helpt u bij het manipuleren van de wisserstijl. Hier kunt u de grootte van de schakelaar, de achtergrond en randkleuren van de schakelaar en de standaardpositie van de klepschakelaar aanpassen. Voor Dual-schakelkleuren kunt u de kleur van de schakelaar kiezen om te veranderen, op afzonderlijke omgedraaide posities.
Ook beschikbaar voor maatwerk is de labelstijl: lettergrootte en tekstafstand; en de knopgrootte: breedte, hoogte en randradius.
Je knop ophalen
Blij met de stijl die je hebt gemaakt? Laten we nu de codes bekijken zodat u zich kunt aanmelden voor uw site of product. Blader omlaag om de resulterende codes van de knop die u hebt gemaakt te bekijken. De codes zijn te vinden in CSS en HTML, klik op de koppeling Kopiëren naar klembord om de inhoud te kopiëren en gebruik de knop.
Schakel IE8-ondersteuning in
Op de pagina wordt vermeld dat de op de pagina gegenereerde switch niet wordt ondersteund op IE6-8. Er is echter een oplossing met een kleine JavaScript-code (aangeboden door een van de On / Off FlipSwitch Generator-team, anna.mi).
Ondersteuning inschakelen in IE8 Het enige dat u hoeft te doen, is een kleine CSS-code toevoegen die de status van de knop zal wijzigen op basis van de klasse .onoffswitch-checked, zoals zo.
.onoffswitch-checked .onoffswitch-inner {margin left: 0; } .onoffswitch-checked .onoffswitch-switch {right: 0px; } Schakel dan de volgende JavaScript .onoffswitch-checked op uw pagina om de klasse .onoffswitch-checked wanneer deze is aangevinkt:
Als de optie "Standaard overschakelen" is geselecteerd, vergeet dan niet om ook de klasse .onoffswitch-checked aan uw html toe te .onoffswitch-checked zoals zo
Laatste gedachte
Bekijk dit eens en laat het ons weten als de flipswitch-generator foutloos werkt zonder een bug. We kunnen maar zoveel combinaties uitvoeren, maar aan het einde van de dag, als coderen buiten je mogelijkheden ligt, begin dan misschien met deze handige tool voordat je de dingen naar een hoger niveau tilt. Laat ons weten wat je denkt.
Waarom uw bedrijf de vierdaagse werkweek moet omarmen
Het gesprek over een vierdaagse werkweek bestaat al een tijdje, maar de laatste tijd zijn er steeds meer bedrijven die het adopteren en bloggers over de hele wereld hebben het erover. Slechts 4 dagen werken en 3 dagen vrij hebben is een paradijs voor werknemers, maar niet zozeer voor werkgevers die (nog) niet goed bekend zijn met de voordelen
20 Valentijnsdag Photoshop-handleidingen voor uw inspiratie
Het is weer die tijd van het jaar, waarin opwinding overal in de harten van geliefden ontstaat. Valentijnsdag is inderdaad een tijd voor velen om hun uiterste best te doen om hun betere helft speciaal te laten voelen . De gebruikelijke manier is om cadeaus te krijgen, wat niets is om over te klagen - wie houdt er niet van om bloemen of een nieuw paar oorbellen te krijgen
