Armindo Aulas

Oi, gente! Tudo bem com vocês? Antes de qualquer coisa só queria avisar que a série de posts ensinando a criar um layout no WordPress foi adiada porque o primeiro post acabou sendo excluído sem querer por causa de problemas técnicos aqui no CDB. Eu irei voltar com a série – o quanto antes -, mas acabei não tendo tempo pra refazer o primeiro post. O tutorial de hoje é ensinando como personalizar links no HTML com CSS. Eu sei que é um tutorial bem simples, mas vale tanto pra Blogger quanto pra WordPress, e para quem está começando vale a pena ver as possibilidades que o CSS nos oferece <3 1. Peronalizando todos os links do seu blog Quando criamos um blog e fazemos uma postagem com links, normalmente esses links veem com uma personalização padrão. Para fazer com que esse padrão combine com o nosso layout, precisamos fazer mudanças no css. Para fazer isso, basta adicionar o seguinte código no seu css: a { personalização } a:hover { personalização } /* Quando pass...

Estilização de links Publicado em: 12/12/2003 Atualizações: 11/03/2011 - 16/11/2017 Introdução CSS possibilita definir uma variedade infinita de layouts e efeitos para um link ou um conjunto de links. O limite é a sua imaginação! Um link visitado, não visitado, ativo ou no estado hover (quando você passa o mouse sobre ele) pode assumir aspectos (cores, fundos, etc...) diferentes através de CSS . Abordarei neste tutorial as técnicas básicas de manipular os quatro seletores de link. Pseudo classes Os efeitos em links são possíveis através de declarações de regras de estilo para as pseudo-classes do elemento <a> do HTML . As pseudo-classes são usadas em CSS , para adicionar efeitos diferentes a alguns seletores, ou a uma instância de alguns seletores. Sintaxe A sintaxe das pseudo-classes é conforme mostrada a seguir: seletor:pseudo-classe {propriedade: valor} As classes em CSS podem também ser usadas com pse...

Customizar Navegação do Blog #1 Alterar Tamanho do Logo .banner .op-logo img { max-width: 200px; /* Padrão 250px */ } #2 Alterar Espaçamento Superior e Inferior do Logo .banner .op-logo { padding: 25px 0; /* Padrão 40px */ } #3 Alterar a Margem Superior do Menu de Navegação body #nav-side.navigation #navigation-alongside { margin-top: 25px; /* Padrão 40px */ } #4 Editar o Espaçamento Lateral dos Links do Menu /* Menu principal */ body .navigation ul li a { line-height: 1em; /* Padrão 1.1em */ padding: 0.5em 1.1em; /* Padrão 1.1em 1.2em */ text-decoration: none; } /* Sub-menu */ body .navigation ul ul li a { height: auto; min-width: 120px; /* Padrão 180px */ padding: 0.5em 1.1em; /* Padrão 1.2em 1.5em */ text-align: left; } #5 Mudar Cor de Fundo do Menu de Navegação Quando o Mouse Está em Cima body #nav-side.navigation ul#navigation-alongside li:hover a { background-color: #F5F5F5; /* Edita...