CSS


  • Ajustar tamanho da imagem no container (cover) CSS

    Para ajustar a largura e altura de uma imagem dentro de um container de tamanho especifico, opte em usar o recurso object-fit, como no exemplo abaixo: Veja exemplos reais do uso acessando: https://www.w3schools.com/css/css3_object-fit.asp ... Continue a ler.

  • Efeito flutuante infinito com CSS

    Com o código abaixo você consegue deixar um objeto flutuando infinitamente, apenas aplicando a class efeito-flutuante-infinito O código acima foi inspirado na publicação https://www.alanrezende.com.br/como-criar-uma-animacao-flutuante-em-css-e-utilizar-em-imagens-e-botoes-no-elementor/ Veja também: Caso queira apenas que o objeto flutue ao passar o mouse, você pode optar por este outro código: https://bruno.art.br/blog/efeito-flutuante-ao-passar-o-mouse-em-objeto-com-css/ ... Continue a ler.

  • Testando o plugin CodeMirror Blocks

    O CodeMirror Blocks é um plugin para WordPress que possibilita que você publique códigos de diferentes formatos, e eles sejam exibidos na pagina sem a sua execução. CodeMirror Blocks é útil para blog de desenvolvedores, site de tutorial onde exibir código formatado (destacado) de qualquer programa.Ele suporta mais de 100 linguagens de programação, script e […] ... Continue a ler.

  • Criar botão WhatsApp flutuante no site

    É possível criar um botão flutuante de WhatsApp para seu site de forma simples, apenas usando um pouco de HTML + CSS. Segue abaixo exemplo de botão com ícone: Pronto! OBS: Mude onde esta https://wa.me/5511900000000 para o seu numero de WhatsApp com DDD DICA: Caso o icone do whatsapp fique desalinhado com o texto, isso […] ... Continue a ler.

  • Grid layout com CSS

    CSS Grid Layout introduz um sistema bi-dimensional de grid (literalmente “grades”) para CSS. Grids podem ser usados para o design de layouts de grandes seções de uma webpage, assim como de pequenos elementos de interface. Esse artigo apresenta o CSS Grid Layout e a terminologia que é parte da especificação CSS Grid Layout Level 1. […] ... Continue a ler.

  • Efeito vidro (desfoque de fundo) com CSS

    Para aplicar o efeito vidro (desfoque de fundo ou Glassmorphism) em CSS, você deve adicionar o código abaixo na div ou seção de fundo ao texto: Você pode também acessar o site https://hype4.academy/tools/glassmorphism-generator e editar o efeito que você quer aplicar. ... Continue a ler.

  • Centralizar container com position fixed com CSS

    Para centralizar containers no meu da tela que estão fixados, use o código CSS abaixo: OBS: Não deixe de verificar a compatibilidade com os navegadores http://caniuse.com/#search=transform ... Continue a ler.

  • Inverter ordem das colunas/div com CSS

    É possível inverter a ordem do conteúdo na grade com CSS aplicando o código abaixo na class da div. Caso precise trocar a ordem da sua DIV somente em dispositivos mobile, use o código abaixo: Aplicando o código acima, o código abaixo: Terá o resultado como abaixo: ... Continue a ler.