CSS


  • Slide Infinito com o Widget Carrossel de Imagens do Elementor com WordPress

    Neste artigo disponibilizo um código CSS bem simples que pode lhe auxiliar a criar um carrossel de imagens com scroll (rolagem) infinita. É muito simples adicionar este efeito. 1 – Adicione o widget de carrossel em sua página, como mostra no exemplo abaixo: 2 – Edite as opções do carrossel do Elementor, para desativar e […] ... Continue a ler.

  • Grade com Informações de pagamento e frete em HTML e CSS para loja virtual

    Grade em HTML e CSS com informações de pagamento, frete e segurança, para sites e lojas virtuais. ... Continue a ler.

  • Popup Personalizado com CSS + JS

    Com este código abaixo é possível criar um popup personalizado rapidamente em sua pagina. ... Continue a ler.

  • Regra de 8 pontos (8-Point Grid)

    A 8-Point Grid é uma técnica de design que utiliza uma grade baseada em múltiplos de oito para garantir consistência, ritmo e alinhamento em layouts digitais. Essa abordagem facilita a criação de interfaces mais harmoniosas e visualmente agradáveis, já que todos os elementos, desde espaçamentos até tamanhos de fontes e imagens, seguem uma unidade comum […] ... Continue a ler.

  • [Download] Editor de Código Visual Online (Open Source)

    Baixe o Editor de Código Visual Online (Código Aberto): Agora você pode hospedar facilmente este editor em seu servidor e editar códigos HTML diretamente do seu navegador. Com apenas um arquivo, este editor é extremamente leve e prático para uso imediato. Veja o código fonte no GitHub: https://github.com/brunoalbim/editor-codigo-visual-online ... Continue a ler.

  • Criar Efeito de Flutuar Infinito com CSS

    Segue abaixo um código CSS simples para criar o efeito de flutuar infinito um objeto (neste exemplo, usamos a CLASS flutuar-infinito) de maneira pratica apenas usando a propriedade @keyframes do CSS: OBS: Adicione a CLASS .flutuar-infinito no objeto que deseja aplicar o efeito. ... Continue a ler.

  • [Download] Construa o Seu Próprio Cronometro Online com HTML, CSS e JS

    Neste artigo vou disponibilizar todo o código de um cronometro online que usa pouco código HTML, CSS e JavaScript para rodar. Ele pode ser instalado facilmente em qualquer hospedagem simples, e roda muito bem. Você pode testar ele online neste link: https://sites.projetosdeclientes.com.br/@drive/cronometro-online/ Segue os códigos abaixo para estudo e implementação: Arquivo (index.html): Arquivo (script.js): Arquivo […] ... Continue a ler.

  • Código para Copiar Texto ao Clicar e Mostrar Mensagem Personalizada com HTML, CSS, JS

    Você pode realizar essa tarefa usando um pouco de JavaScript junto com HTML. Aqui está um exemplo de como você pode fazer isso: Crie um elemento HTML onde o usuário possa clicar. Este elemento pode ser um parágrafo, um span, ou mesmo um botão. Utilize o método navigator.clipboard.writeText para copiar o texto desejado para a […] ... Continue a ler.

  • Efeito de Objeto Flutuando Suave com CSS

    Para criar um efeito de flutuação infinita suave usando CSS, você pode usar @keyframes para definir uma animação que alterna entre diferentes valores de translate para mover o elemento verticalmente de maneira suave. A seguir, um exemplo de código CSS que cria este efeito: Este código define uma animação chamada float que dura 3 segundos […] ... Continue a ler.