Relógio Digital com efeito utilizando WordPress e Elementor Pro
Digital clock 00 : 00 : 00 Código HTML Digital clock 00 : 00 : 00 Vou explicar de forma super simples como o código atualizado funciona. Ele cria um relógio digital que mostra a hora atual e se atualiza a cada segundo.Estrutura do código <!DOCTYPE html> Define que o documento é uma página HTML5. <html lang=”pt”> Inicia o documento HTML e define o idioma como português. <head> Contém informações sobre a página, como o título. <meta charset=”UTF-8″ /> Define a codificação de caracteres como UTF-8. <title>Digital clock</title> Define o título da página que aparece na aba do navegador.Corpo da página <body> Contém o conteúdo visível da página. <div> Uma seção da página com a classe “hero” (geralmente usada para a parte principal). <div> Uma caixa dentro da seção “hero”. <div> A área onde o relógio é exibido. <span id=”hrs”>00</span><span>:</span><span id=”min”>00</span><span>:</span><span id=”sec”>00</span> Mostra horas, minutos e segundos inicialmente como 00:00:00.Script JavaScript <script> Inicia o bloco de código JavaScript. let hrs = document.getElementById(“hrs”); Seleciona o elemento de horas. let min = document.getElementById(“min”); Seleciona o elemento de minutos. let sec = document.getElementById(“sec”); Seleciona o elemento de segundos. setInterval(() => { … }, 1000); Cria uma função que é executada a cada 1000 milissegundos (1 segundo). let currentTime = new Date(); Obtém a hora atual. hrs.innerHTML = (currentTime.getHours() < 10 ? “0” : “”) + currentTime.getHours(); Atualiza as horas, adicionando um zero à esquerda se for menor que 10. min.innerHTML = (currentTime.getMinutes() < 10 ? “0” : “”) + currentTime.getMinutes(); Atualiza os minutos, adicionando um zero à esquerda se for menor que 10. sec.innerHTML = (currentTime.getSeconds() < 10 ? “0” : “”) + currentTime.getSeconds(); Atualiza os segundos, adicionando um zero à esquerda se for menor que 10. Resumindo, esse código HTML e JavaScript cria um relógio digital simples que exibe a hora atualizada a cada segundo, formatando os números para sempre mostrar dois dígitos (por exemplo, 08:05:09). Código CSS * { margin: 0; padding: 0; font-family: “Poppins”, sans-serif; box-sizing: border-box; } .hero { width: 100%; display: flex; align-items: center; justify-content: center; background: #2f363e; position: relative; } .box { position: relative; width: 300px; height: 150px; display: flex; align-items: center; justify-content: center; } .clock { border-radius: 10px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(40px); color: #6e7f92f6; z-index: 10; } .clock span { font-size: 45px; width: 50px; display: inline-block; text-align: center; position: relative; } .clock span::after { font-size: 16px; position: absolute; bottom: -10px; left: 60%; transform: translateX(-50%); } #hrs::after { content: “HOURES”; color: #0f0; font-weight: 600; margin-bottom: -10px; } #min::after { content: “MINS”; color: #0ff; font-weight: 600; margin-bottom: -10px; } #sec::after { content: “SEC”; color: #ff0; font-weight: 600; margin-bottom: -10px; } /*——Anemated Border———*/ .box::before { content: “”; position: absolute; inset: 0; background: repeating-conic-gradient( from var(–a), #0f0, #ff0, #0ff, #f0f, #0ff ); border-radius: 20px; animation: rotate 6s linear infinite; } .box::after { content: “”; position: absolute; inset: 0; background: repeating-conic-gradient( from var(–a), #0f0, #ff0, #0ff, #f0f, #0ff ); border-radius: 20px; animation: rotate 4s linear infinite; filter: blur(40px); opacity: 0.75; } .box style { position: absolute; inset: 4px; background: #2f363e; border-radius: 16px; color: #ff0; font-size: 20px; z-index: 1; display: flex; align-items: center; justify-content: center; } @property –a { syntax: “”; inherits: false; initial-value: 0deg; } @keyframes rotate { 0% { –a: 0; } 0% { –a: -360deg; } } Vou explicar de forma simples como funciona o código CSS que estiliza o relógio digital. Reset e Fonte * Remove margem e padding de todos os elementos. Define a fonte “Poppins” para todos os elementos. Ajusta o box-sizing para border-box, que inclui bordas e padding nas dimensões dos elementos. Estilo para .hero .hero Ocupa toda a largura da tela (width: 100%). Usa flexbox para centralizar seu conteúdo vertical e horizontalmente (display: flex, align-items: center, justify-content: center). Define um fundo cinza escuro (background: #2f363e). Define a posição como relativa (position: relative). Estilo para .box .box Define a posição como relativa (position: relative). Define as dimensões (width: 300px, height: 150px). Usa flexbox para centralizar seu conteúdo (display: flex, align-items: center, justify-content: center). Estilo para .clock .clock Define bordas arredondadas (border-radius: 10px). Usa flexbox para centralizar seu conteúdo (display: flex, align-items: center, justify-content: center). Aplica um filtro de desfoque ao fundo (backdrop-filter: blur(40px)). Define a cor do texto (color: #6e7f92f6). Define a posição na frente de outros elementos (z-index: 10). Estilo para .clock span .clock span Define o tamanho da fonte (font-size: 45px). Define a largura (width: 50px). Usa inline-block para comportar margens e padding (display: inline-block). Centraliza o texto (text-align: center). Define a posição como relativa (position: relative). Estilo para .clock span::after .clock span::after Define o tamanho da fonte para o texto adicional (font-size: 16px). Posiciona o texto abaixo do span (position: absolute, bottom: -10px). Centraliza o texto horizontalmente (left: 60%, transform: translateX(-50%)). Estilo para os spans de horas, minutos e segundos #hrs::after Adiciona o texto “HOURES” abaixo das horas (content: “HOURES”). Define a cor verde (color: #0f0). Define a fonte como negrito (font-weight: 600). #min::after Adiciona o texto “MINS” abaixo dos minutos (content: “MINS”). Define a cor ciano (color: #0ff). Define a fonte como negrito (font-weight: 600). #sec::after Adiciona o texto “SEC” abaixo dos segundos (content: “SEC”). Define a cor amarela (color: #ff0). Define a fonte como negrito (font-weight: 600). Animação da borda da .box .box::before e .box::after Cria elementos pseudo para a animação da borda. Define a posição como absoluta e ocupa toda a área da .box (position: absolute, inset: 0). Aplica um gradiente cônico que se repete em cores vibrantes (background: repeating-conic-gradient(…)). Define bordas arredondadas (border-radius: 20px). Aplica a animação de rotação (animation: rotate 6s linear infinite para before e rotate 4s linear infinite para after). Adiciona desfoque e opacidade ao elemento after (filter: blur(40px), opacity: 0.75). Estilo interno da .box .box style Cria uma camada interna com posição absoluta (position: absolute, inset: 4px). Define o fundo como cinza escuro (background: #2f363e). Aplica bordas arredondadas (border-radius: 16px). Define a cor do texto como amarelo (color: #ff0). Define o tamanho da fonte (font-size: 20px). Usa flexbox para centralizar o conteúdo (display: flex, align-items: center, justify-content: center). Define
Orçamento Online Gratuito – Blog
P ronto para Lançar seu Blog e Compartilhar Conteúdo de Qualidade? Solicite seu orçamento gratuito agora! Preencha o formulário abaixo e receba uma proposta personalizada para a criação do seu blog. Oferecemos soluções de alta qualidade adaptadas às suas necessidades, sem compromisso. Desde 2004 atuando com criação de sites de verdade!
Orçamento Online Gratuito – Loja Virtual
T ransforme seu Negócio com uma Loja Virtual Profissional! Solicite seu orçamento gratuito agora! Preencha o formulário abaixo e receba uma proposta personalizada para a criação da sua loja virtual. Oferecemos soluções de alta qualidade adaptadas às suas necessidades, sem compromisso. Desde 2004 atuando com criação de sites de verdade!
Orçamento Online Gratuito – Páginas de Captura
C onquiste Mais Leads com uma Página de Captura Eficiente! Solicite seu orçamento gratuito agora! Preencha o formulário abaixo e receba uma proposta personalizada para a criação da sua página de captura. Oferecemos soluções de alta qualidade adaptadas às suas necessidades, sem compromisso. Desde 2004 atuando com criação de sites de verdade!
Orçamento Online Gratuito – One Pages
D estaque-se com uma Página One Page Impactante! Solicite seu orçamento gratuito agora! Preencha o formulário abaixo e receba uma proposta personalizada para a criação da sua página One Page. Oferecemos soluções de alta qualidade adaptadas às suas necessidades, sem compromisso. Desde 2004 atuando com criação de sites de verdade!
Orçamento Online Gratuito -Landing Pages
A umente Suas Conversões com uma Landing Page Eficiente! Solicite seu orçamento gratuito agora! Preencha o formulário abaixo e receba uma proposta personalizada para a criação da sua landing page. Oferecemos soluções de alta qualidade adaptadas às suas necessidades, sem compromisso. Desde 2004 atuando com criação de sites de verdade!
Site para Educação
Conheça os modelos de sites para Ensino, Educação e Escolas. Desenvolva o seu site com RaphaelBarretoPro!
Site para Escolas
Conheça os modelos de sites para Ensino, Educação e Escolas. Desenvolva o seu site com RaphaelBarretoPro!
Site para Atletas
Conheça os sites desenvolvidos por Raphael Barreto para Atletas, lazer e turismo. Desenvolva o seu site com RaphaelBarretoPro!.
Site para Funerárias
Modelo de site para Funerária e serviços funerários. Desenvolva o seu site com RaphaelBarretoPro!
