Não seria divertido criar seu próprio lindo Relógio Digital com tecnologias básicas da web? Este tutorial abordará como criar um relógio digital 3D falso com HTML, CSS e Vanilla JavaScript.
Vamos começar!
Estrutura HTML
A estrutura HTML consistirá em um contêiner retangular com uma exibição de hora dentro. A exibição da hora conterá elementos para a hora, minutos e segundos atuais.
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
Estilizando com CSS
Primeiro, vamos definir os estilos globais:
1 |
:root { |
2 |
--background: #dde1e7; |
3 |
--rectangle-background: rgb(227, 222, 231); |
4 |
--shadow-light: rgba(255, 255, 255, 0.45); |
5 |
--shadow-medium: rgba(94, 104, 121, 0.3); |
6 |
--shadow-dark:rgba(0, 0, 0, 0.45); |
7 |
--darkBlue:rgb(0, 0, 45); |
8 |
--time-text-light: #dde1e7; |
9 |
--textColor:#fff; |
10 |
}
|
Em seguida, estilizaremos o corpo para garantir que todos os nossos elementos estejam no centro da página.
1 |
body {
|
2 |
display: flex; |
3 |
justify-content: center; |
4 |
align-items: center; |
5 |
min-height: 100vh; |
6 |
background: var(--background); |
7 |
font-family: "Protest Guerrilla", sans-serif; |
8 |
} |
Efeito 3D falso
O próximo passo é criar um elemento retangular para abrigar nosso relógio digital. Para garantir que o retângulo pareça inclinado como na demonstração, aplicaremos o estilo transform: skewY(-5deg);. Também adicionaremos uma sombra de caixa à direita e as sombras de caixa superior e inserida em todos os lados.
1 |
.rectangle {
|
2 |
position: relative; |
3 |
width: 340px; |
4 |
height: 120px; |
5 |
transform: skewY(-5deg); |
6 |
border-bottom-right-radius: 16px; |
7 |
box-shadow: inset -5px -5px 9px var(--shadow-light), |
8 |
inset 5px 5px 9px var(--shadow-light), |
9 |
0px 10px 10px -10px var(--shadow-dark), |
10 |
10px 0px 10px -10px var(--shadow-dark); |
11 |
} |
O próximo passo é criar uma ilusão de profundidade à esquerda e no topo do retângulo; faremos isso adicionando pseudoelementos aos lados esquerdo e superior.
Vamos começar pelo lado esquerdo.
1 |
.rectangle::before { |
2 |
content: ""; |
3 |
position: absolute; |
4 |
top: 0; |
5 |
left: -30px; |
6 |
width: 30px; |
7 |
height: 100%; |
8 |
background: var(--background); |
9 |
transform-origin: right; |
10 |
transform: skewY(45deg); |
11 |
box-shadow: 0px 10px 10px -10px var(--shadow-dark), |
12 |
10px 0px 10px -10px var(--shadow-dark); |
13 |
}
|
Ao especificar a altura como 100%, queremos que o elemento cubra toda a altura do retângulo. Definindo transform: skewY(45deg) propriedade, ela distorce esse elemento em 45 graus ao longo do eixo Y, dando-lhe uma aparência inclinada.
O box-shadow propriedade adiciona um efeito de sombra a este elemento inclinado, realçando sua aparência tridimensional. Você pode brincar com os valores para obter a aparência desejada.
Neste pseudoelemento, também adicionamos uma sombra de caixa à direita e na parte inferior do elemento. O raio de propagação da sombra é definido com um valor negativo para garantir que a sombra se desloque em direção ao interior do elemento.
Também estamos usando o posicionamento absoluto para garantir que o elemento se encaixe exatamente no lado esquerdo do retângulo.
Para o pseudoelemento superior, temos o seguinte:
1 |
.rectangle::after { |
2 |
content: ""; |
3 |
position: absolute; |
4 |
top: -30px; |
5 |
left: 0; |
6 |
width: 100%; |
7 |
height: 30px; |
8 |
background: rgb(227, 222, 231); |
9 |
transform-origin: bottom; |
10 |
transform: skewx(45deg); |
11 |
box-shadow: -5px -5px 9px var(--shadow-light), |
12 |
5px 5px 9px var(--shadow-medium); |
13 |
}
|
O pseudoelemento esticará toda a largura dos retângulos e usará posicionamento absoluto para garantir que ele se encaixe precisamente no topo do retângulo quando inclinado. Estamos adicionando uma sombra de caixa com desfoque mínimo em todos os lados deste elemento.
Neste ponto, temos algo assim:
A Hora
Vamos trabalhar no elemento time aninhado, que contém o relógio.
1 |
.time { |
2 |
display: flex; |
3 |
font-weight: 900; |
4 |
justify-content: space-around; |
5 |
align-items: center; |
6 |
text-align: center; |
7 |
position: absolute; |
8 |
margin: 5px 25px 0 10px; |
9 |
width: 300px; |
10 |
height: 80px; |
11 |
top: 48.5%; |
12 |
left: 50%; |
13 |
transform: translate(-50%, -50%) skewY(-5deg); |
14 |
font-size: 40px; |
15 |
transform-origin: right; |
16 |
background-color: transparent; |
17 |
box-shadow: inset -5px -5px 9px var(--shadow-light), |
18 |
inset 5px 5px 9px var(--shadow-medium); |
19 |
}
|
Use o Flexbox para garantir que os elementos filhos estejam alinhados no centro e distribuídos uniformemente dentro do pai. Defina a fonte como negrito e especifique uma largura e altura para garantir que ela não ultrapasse o retângulo.
Também estamos distorcendo-o para garantir que o conteúdo flua com a forma do elemento envolvente. A sombra da caixa inserida em todos os lados cria uma ilusão de profundidade.
A peça final é estilizar o conteúdo.
1 |
.hours, |
2 |
.separator, |
3 |
.minutes, |
4 |
.seconds { |
5 |
background: var(--darkBlue); |
6 |
color: var(--textColor); |
7 |
margin-left: 10px; |
8 |
padding: 2px 10px; |
9 |
border-radius: 10px; |
10 |
font-weight: 900; |
11 |
}
|
12 |
.seconds { |
13 |
font-size: 15px; |
14 |
padding: 10px 4px; |
15 |
|
16 |
}
|
Ao realizar esta última etapa, aplicamos algumas margens e preenchimento para garantir espaçamento e legibilidade adequados e cor de fundo para tornar o texto visível.
Funcionalidade JavaScript
Vamos usar JavaScript para tornar o relógio funcional. Crie uma função chamada updateTime().
1 |
function updateTime() { |
2 |
|
3 |
});
|
Dentro da função, vamos primeiro obter todos os elementos que precisarão ser atualizados.
1 |
const hours = document.querySelector(".hours"); |
2 |
const minutes = document.querySelector(".minutes"); |
3 |
const seconds = document.querySelector(".seconds"); |
Crie uma variável chamada currentTime para armazenar a hora atual. A hora atual é obtida usando o novo Date() construtor, conforme mostrado abaixo.
1 |
const currentTime = new Date(); |
O embutido Date() O objeto possui vários métodos GET que podemos usar para componentes específicos, como o ano atual, o mês atual, a hora atual, os minutos atuais e assim por diante.
Precisamos dos seguintes métodos.
getHours(): retorna a hora atual (0-23).getMinutes(): retorna os minutos atuais (0-59).getSeconds(): retorna os segundos atuais (0-59).
Vamos obter a hora, minutos e segundos atuais e atualizar os elementos correspondentes.
1 |
hours.innerHTML = currentTime.getHours().toString().padStart(2, "0"); |
2 |
minutes.innerHTML = currentTime.getMinutes().toString().padStart(2, "0"); |
3 |
seconds.innerHTML = currentTime.getSeconds().toString().padStart(2, "0"); |
Atualizando a hora
O relógio agora mostra a hora atual, mas não está atualizando. Para atualizá-lo, usaremos o setInterval(). setInterval() é um método integrado que atualiza uma função após um intervalo de tempo específico; no nosso caso, queremos o UpdateTime() função a ser atualizada a cada 1 segundo (1000 milissegundos).
1 |
setInterval(updateTime, 1000); |
E aqui está a demonstração final!
Conclusão
Este tutorial abordou como usar CSS e JavaScript para construir um relógio digital 3D falso realista. Esperançosamente, isso servirá de inspiração para construir componentes mais avançados e atraentes.
