es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Generar botón de conmutación Pure CSS3 con On / Off FlipSwitch Generator

Si estás cansado de usar botones para activar o desactivar algo, tal vez puedas encontrar un soplo de aire fresco en un interruptor. Con la muy buena mejora del desarrollo web en la actualidad, la creación del interruptor de encendido / apagado, como lo que se ve en un sistema operativo móvil es muy fácil. Solo necesitas la herramienta adecuada para ello.

Presentamos la aplicación web On / Off FlipSwitch Generator que te ayudará a crear fácilmente cualquier estilo de sistema operativo móvil para tu botón personalizado de encendido / apagado. El botón también es compatible con la mayoría de los navegadores web modernos: Chrome, Firefox, Safari, Opera, IE9, Android e iOS también.

Empezando

Encendido / Apagado FlipSwitch Generator tiene una interfaz bastante simple e intuitiva. También hay disponible una vista previa en vivo para mostrar el estilo del resultado a medida que cambia las entradas disponibles. Vamos a ver.

Como puede ver en la siguiente captura de pantalla, On / Off FlipSwitch Generator ofrece 6 opciones de entrada principales: estilo, estado activo, estado inactivo, interruptor, etiquetas y tamaño.

En la sección Estilo, puede elegir qué tipo de estilo de botón desea de iOS4 / 5, Android y Windows 8. La opción Personalizado le permitirá construir el botón desde cero.

A continuación, hay dos enlaces útiles: el estilo aleatorio se usa para generar un botón aleatorio. Mientras que Restablecer a estado predeterminado se usa para restablecer todos los cambios que ha realizado desde otra entrada.

Debajo, tiene el aspecto de su botón en estado activo y estado inactivo . En las secciones, jugarás con el color de fondo, el color del texto y la etiqueta de texto del botón. Puede cambiar la etiqueta de texto de ENCENDIDO y APAGADO a algo completamente diferente, como Silenciar o Activar.

La entrada del interruptor lo ayuda a manipular el estilo del conmutador. Aquí puede ajustar el tamaño del interruptor, el fondo del interruptor y los colores del borde, y la posición predeterminada del interruptor. Para el color de cambio dual, puede elegir el color del interruptor para cambiar, en posiciones separadas volteadas.

También está disponible para personalización el estilo de etiqueta: tamaño de fuente y espaciado de texto; y el tamaño del botón: ancho, alto y radio del borde.

Obtener su botón

Feliz con el estilo que has creado? Ahora, tomemos los códigos para que pueda aplicar a su sitio o producto. Desplácese hacia abajo para ver los códigos resultantes del botón que creó. Los códigos se proporcionan en CSS y HTML, simplemente pulse el enlace Copiar al portapapeles para copiar el contenido y usar el botón.

Habilitar el soporte de IE8

En la página, se menciona que IE6-8 no admite el cambio generado en la página. Sin embargo, hay una solución con un pequeño código de JavaScript (traído a usted por uno de los On / Off FlipSwitch Generator team, anna.mi).

Para habilitar el soporte en IE8 Todo lo que necesita hacer es agregar un pequeño código CSS que cambiará el estado del botón basado en la clase .onoffswitch-checked como tal.

 .onoffswitch-checked .onoffswitch-inner {margin-left: 0; } .onoffswitch-checked .onoffswitch-switch {derecha: 0px; } 

Luego, para alternar la clase .onoffswitch-checked cuando esté marcada, agregue el siguiente .onoffswitch-checked JavaScript a su página:

Si se selecciona la opción "Activar por defecto", no olvide incluir también la clase .onoffswitch-checked en su html como tal

Pensamiento final

Verifique esto y avísenos si el generador de flipswitch funciona sin errores. Solo podemos ejecutar tantas combinaciones, pero al final del día, si la codificación está más allá de sus capacidades, tal vez comience con esta práctica herramienta antes de llevar las cosas al siguiente nivel. Háganos saber lo que piensas.

9 formas en que la impresión 3D está cambiando el mundo

9 formas en que la impresión 3D está cambiando el mundo

La impresión 3D Hobbyist es una de las tendencias más populares en el mundo de la tecnología, y la gente lo ha utilizado para crear todo tipo de cosas para entretenimiento, arte, trabajo, educación, necesidades médicas y más. Poco a poco nos estamos dando cuenta del potencial que los materiales impresos en 3D pueden traer a la superficie en múltiples industrias, incluidas la fabricación, la educación, el espacio e incluso el armamento.De hecho

(Consejos de tecnología y diseño)

50 kits gratuitos de interfaz de usuario web y móvil (2017)

50 kits gratuitos de interfaz de usuario web y móvil (2017)

Los gráficos son lo primero que los usuarios ven en un sitio web. Una interfaz de usuario buena y de alta calidad permitirá a los usuarios interactuar sin interrupciones con su sitio web . Además, al elegir entre dos sitios web o aplicaciones, los usuarios siempre buscarían el que se vea más estético y fácil de usar .Previa

(Consejos de tecnología y diseño)