CSS


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

  • Efeito “flutuante” ao passar o mouse em objeto com CSS

    Aplicando um efeito de flutuação ou de levitação em um elemento HTML. Neste efeito, o elemento que você aplicou o efeito sobe ao passar o mouse, e ao retirar o mouse de cima ele desce novamente. Não importa dentro de qual DIV ou outro elemento HTML pai ele esteja. O recurso do CSS a ser […] ... Continue a ler.

  • Configuração arquivo style.css para template (tema) wordpress

    Declaração básica arquivo “style.css” para tema wordpress REFERENCIA https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/Pagina oficial sobre o arquivo style.css do wordpress em wordpress.org ... Continue a ler.