Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Selectors
Webdesign

Cómo crear un simple componente de interruptor de conmutación con el truco checkbox de CSS

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

En este breve tutorial, aprenderemos a crear un componente de interruptor usando únicamente CSS y aprovechando la «técnica con el truco checkbox de CSS». Durante el proceso, también veremos otras implementaciones de interruptores en Codepen. ¿Te parece un buen reto?

Nuestro componente de interruptor

Esto es lo que crearemos durante este tutorial: una simple lista de tareas por hacer:

Como inspiración para el diseño utilizaremos Hngry UI Kit - Food Delivery UI Kit (Hngry, kit de UI - Kit de UI de entrega de alimentos) disponible en Envato Elements. Es compatible con Sketch, Figma y Adobe XD, viene con variantes claras y oscuras e incluye muchos más componentes de UI que solo estas casillas de verificación. ¡Échale un vistazo!

Hngry UI Kit - Food Delivery UI Kit
Hngry UI Kit - Food Delivery UI Kit: descárgalo en Envato Elements

1. Inicia con el marcado HTML

Para empezar, definiremos una simple lista ordenada con la clase switches. Cada elemento de la lista contendrá una casilla de verificación y su etiqueta asociada. Cada etiqueta incluirá dos spans. El primero contendrá el contenido del texto, mientras que el segundo vacío será responsable del interruptor de conmutación.

Poniéndolo todo junto, así es como se ve el marcado que se requiere:


2. Define los estilos

Lo primero de lo que tenemos que encargarnos en nuestros estilos es de ocultar visualmente la casilla de verificación:

A continuación, la lista tendrá un ancho máximo con contenido centrado de forma horizontal:

Para estilizar los números de nuestra lista exactamente como deseamos, nos desharemos de los estilos predeteminados del navegador y aprovecharemos los contadores CSS. Esto nos dará una lista de números al lado, todos generados con CSS:

Styling the ordered list numbers with CSS Counters

Aquí están los estilos relacionados:

Las etiquetas se comportarán como contenedores flexibles y sus hijos directos se distribuirán en los límites del eje principal:

Crea el interruptor

Para crear el interruptor, primero especificaremos algunas dimensiones fijas para el elemento span correspondiente (el último).

Start building the switch component

Luego, definiremos sus pseudoelementos ::before y ::after. El pseudoelemento ::before será un círculo, mientras que el pseudoelemento ::after tendrá un icono de cierre como imagen de fondo.

Defining the sudo-elementss of our switch component

Para lograr todo esto, aquí están los estilos correspondientes:


3. El truco de checkbox: alternar los interruptores

¡Ahora la parte interesante! Cada vez que hagamos clic en un interruptor, su apariencia cambiará del modo siguiente:

The checked state of our switch component

De manera más específica:

  • Su color cambiará.
  • La posición de su pseudoelemento ::before cambiará. Se moverá con una transición de deslizamientode izquierda a derecha.
  • La posición y la imagen de fondo de su pseudoelemento ::after cambiará. Ahora se colocará en el lado izquierdo de su contenedor e incluirá una marca de verificación como imagen de fondo.

Para satisfacer todos los requisitos anteriores, aprovecharemos la pseudoclase :checked y el combinador de hermanos adyacentes (+). Si necesitas un repaso de lo que hacen estos selectores, consulta los recursos al final de este tutorial.

Estos son los estilos que se encargan de esta funcionalidad:


Conclusión

¡Eso es todo, amigos! En este tutorial, aprovechamos la «técnica con el truco checkbox de CSS» y logramos crear un útil componente de interruptor de conmutación. Esperemos que hayan disfrutado de este ejercicio y que lo incorporen en un próximo proyecto.

Aquí hay un recordatorio de lo que creamos:

Como siempre, ¡muchas gracias por leer!

Inspiración con el truco checkbox en CodePen

¿Qué mejor lugar para ver otras implementaciones con interruptores que CodePen? Aquí hay algunos excelentes ejemplos para abrir el apetito:

Colorful Switch (interruptor colorido) por Nikolay Talanov

CSS Heart Switch (interruptor de corazón con CSS) por Aaron Iker

Toggle Switch (interruptor de conmutación) por Håvard Brynjulfsen

(S)CSS Toggle Switch (interruptor de conmutación de [S]CSS) por oobleck

Gender Toggle Switch (interruptor de conmutación de género) por Chintu Yadav Sara

Toggle Radial Effect (conmutación con efecto radial) por Florin Pop

Lectura adicional

Revisa estos tutoriales para conocer más acerca de las cosas que puedes crear con la técnica del truco checkbox de CSS:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.