CSS


  • Efeito Contorno Brilho Animado com CSS

    Neste post vou mostrar como você pode criar um efeito de brilho em movimento usando apenas o CSS para isso. Basta apenas adicionar o CSS customizado em sua página, e depois adicionar a CLASS shadow no elemento que você deseja personalizar. Segue abaixo código CSS customizado para adicionar na página: ... Continue a ler.

  • Botão “Leia Mais” Customizado p/ Parágrafos de Texto no Elementor (WordPress) com JavaScript (JS) + CSS

    Neste artigo, vamos criar um efeito “Leia Mais” em páginas construídas com o Elementor. Vamos implementar um código personalizado em JavaScript e CSS que permite alternar entre mostrar e ocultar o conteúdo de textos longos, utilizando dois botões distintos para abrir e fechar o conteúdo. Além disso, adicionaremos um gradiente invertido ao final do parágrafo […] ... Continue a ler.

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