Mostrar el paso actual con contadores CSS

 

 

 


Índice
  1. HTML
  2. CSS

Digamos que tienes cinco botones. Cada botón es un paso. Si hace clic en el cuarto botón, estará en el paso 4 de 5 y querrá mostrarlo.

Este tipo de conteo y visualización podría estar codificado, pero no es divertido. JavaScript también podría hacer este trabajo. ¿Pero CSS? Mmmmm. ¿Puede? CSS tiene contadores, por lo que ciertamente podemos contar la cantidad de botones. Pero ¿cómo calculamos sólo hasta un determinado botón? Resulta que se puede hacer.

 

HTML

No tienen que ser botones; sólo necesita que haya algunos elementos hermanos que podamos contar. Pero seguiremos adelante y usaremos botones aquí:

div buttonShop/button buttonCart/button buttonShipping/button buttonCheckout/button buttonThank You/button div/div/div

El div vacío .messageserá donde enviaremos nuestros mensajes de pasos con contenido CSS.

CSS

El truco es que en realidad vamos a utilizar tres contadores:

  1. Un recuento total de todos los botones.
  2. Un recuento del paso actual.
  3. Un recuento de cuántos pasos restantes quedan después del paso actual
.steps { counter-reset: currentStep 0 remainder 0 totalStep 0;}

Ahora hagamos el conteo. Contar todos los botones es sencillo:

button { counter-increment: totalStep;}

A continuación, necesitamos otra cosa para contar que también cuente los botones. Podemos usar un pseudoelemento cuyo único propósito es contar botones:

button::before { content: ""; counter-increment: currentStep;}

El truco consiste en dejar de contar ese pseudoelemento en todos los elementos después del elemento activo. Si estamos usando una .activeclase que se parece a esta:

button.active ~ button::before { /* prevents currentStep from being incremented! */ counter-increment: remainder;}

Estamos contando el remainderallí, lo que también podría ser útil, pero como solo estamos incrementando el resto, eso significa que no estamos contando el currentStepcontador. Fantasía, fantasía. Todo para pelo rizado

Luego podemos usar los contadores para generar nuestros mensajes:

message::before { content: "Step: " counter(currentStep) " / " counter(totalStep);}

¡Aquí lo tienes!

Hay un poco de JavaScript allí para que puedas jugar moviendo el estado activo en el botón, pero el conteo y los mensajes son todos CSS.






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. ¿Cómo se hace el tamaño máximo de fuente en CSS?
  2. Cambiar el tamaño de los valores en pasos en CSS
  3. ¿Qué hace “revertir” en CSS?
  4. CSS4 es una mala idea

Mostrar el paso actual con contadores CSS

Mostrar el paso actual con contadores CSS

Índice HTML CSS

programar

es

https://pseint.es/static/images/programar-mostrar-el-paso-actual-con-contadores-css-1590-0.jpg

2024-06-13

 

Mostrar el paso actual con contadores CSS
Mostrar el paso actual con contadores CSS

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences