On/Off, un sitio para poder crear y personalizar nuestro propio switch con HTML y CSS

Hoy les presento una página muy buena para poder usar los stwitches tan famosos en los dispositivos móviles. En realidad los switches son una implementación de los checkboxes, pero debido a que quizá no es tan claro el UX al decirle al usuario que esa opción está apagada o encendida pues en Apple (quien fue quien lo puso originalmente) pensaron que sería una mejor usabilidad si se le diera un mensaje mucho más claro. De hecho, el switch representa al switch de la luz, lo que hace perfecta una analogía de la vida real con la virtual.

En fin, el sitio que les presento hoy se llama On/Off, un sitio para poder crear y personalizar nuestro propio switch. Y como les decía, el switch es una extensión del checkbox, y por esa razón el sitio lo crea a partir de eso.

On/Off nos ofrece en primera instancia 5 diferentes estilos. El primero es el único donde podemos personalizar todo el aspecto visual de nuestro switch, pero los otros 4 son un template de las diferentes versiones que ha tenido tanto en iOS como Android o Windows 8.

Una vez escogido el template a usar, podemos ya jugar con las demás opciones, y ver el resultado final directamente después de modificarlas.

No necesita nada de Javascript o jQuery, todo funciona por medio de CSS y por el mismo comportamiento del checkbox, así que si están buscando darle un uso mucho más creativo a sus formularios les recomiendo este sitio para hacerlo.

Sitio web On/Off