CSS


  • 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.

  • Adicionar Automaticamente Botão de “Inscreva-se” Abaixo dos Vídeos do Youtube nos Posts do WordPress

    Com este código abaixo, será possível adicionar um botão automaticamente logo abaixo dos vídeos do YouTube adicionados nas publicações do seu site WordPress, como mostra a imagem abaixo: Exemplo abaixo: Desse jeito, sempre que você adicionar um video dentro do seu post wordpress, ele vai carregar esse botão em vermelho, chamando o usuário a se […] ... Continue a ler.

  • Transformando Checkbox em Switch Personalizado nos Formulários do WordPress com Elementor

    Para transformar visualmente o checkbox em switches sem alterar a estrutura HTML do formulário Elementor, você pode usar um pouco de código CSS personalizado, como mostra a imagem abaixo: Abaixo está um exemplo de como você pode fazer isso. Esse método mantém a estrutura HTML do formulário Elementor original intacta, mas usa CSS para ocultar […] ... Continue a ler.

  • Botão Personalizado CSS para Landing Pages em Elementor com Efeito Pulsar Sombra para Destaque

    Se você quer criar um botão personalizado que chame a atenção do usuário para uma determinada ação (CTA), este código pode lhe ajudar. Este código CSS abaixo, personaliza os botões CTA da página criada com Elementor, trazendo uma estética totalmente diferente. Alem de deixar o botão com 3 tipos de cores em degradê (gradient), ele […] ... Continue a ler.