Contador regresivo: el CSS
Dando estilos a la página
En esta etapa vamos a darle el aspecto que queremos que tenga el widget dentro de la página de prueba.
La disposición de los bloques para los dígitos se hace con flex, es muy simple y facilita enromemente el centrado tanto horizontal como vertical. Podría usarse también grid
Podrías usar CSS también para efectos animados, en combinación con Javascript.
@charset "utf-8";
body{
font-family: "sans-serif";
}
#micontador{
display: flex;
justify-content: center;
align-items: center;
}
#micontador .num{
display: flex;
flex-direction:column;
border: 1px solid black;
margin: 0 8px;
}
#micontador .num .dig{
overflow: hidden;
padding: 10px;
}
#micontador .num .dig span{
font-family: "Arial Black";
font-size: 4rem;
font-weight: 800px;
position: relative;
}
#micontador .label{
text-align: center;
border-top: 1px solid black;
}
Con estos archivos conseguirás una página como la que puedes ver en esta muestra
Comentarios
Como es habitual los estilos CSS definirán el aspecto final de la página.
Copia estos estilos y guardalos en un archivo contador.css para ver el efecto en tu pa´gina web.