Vim ensinar alguns comandos de HTML e CSS, eu vou explicar eles a vocês utilizando como nosso exemplo uma wishlist ou menu para tutos.
Primeiro sugira que se quiser testar crie um Tumblr segundario e siga as instruções abaixo:
Primeiro ponha em seu CSS: (entre <style> e </style>)
.contente2 a { text-align: left; display: block; width: 470px; font-family: Georgia; margin-right: 0px;background: #fcfcfc; padding: 4px; margin-bottom: 3px; font-size: 10px; color: #989b9c; -webkit-transition: all 0.7s ease; border-left: 10px solid #E3A8F7; border-right: 10px solid #E3A8F7;}
.contente2 a:hover { text-align: left; display: block; width: 490px; font-family: Georgia; margin-right: 0px; background: #fcfcfc; padding: 4px; margin-bottom: 3px; font-size: 10px; color: #989b9c; text-decoration: none; -webkit-transition: all 0.7s ease; border-left: 1px solid #F7A8C8; border-right: 1px solid #F7A8C8; text-shadow: 0 0 0.2em #F0F, 0 0 0.2em #0f0, 0 0 0.2em #F7A8C8;}
E no HTML: (entre <body> e </body>)
<div class="contente2"><a href="LINK">NOME DO LINK</a></div>
O alinhamento de texto (text-align) está para direita, acho mais bonito e fica mais organizado assim, mas voce pode mudar para: center (centro); right (direita), ficá a seu criterio.
A largura (width) é de 490px, arrume do jeito que ficar melhor para voce, recomendo que seja do tamanho da sua box de posts, mas por exemplo, se voce quiser que ele vire um menu de DUAS colunas, divida esse valor pela metade.
A fonte (font-family) dele é Georgia, eu amo essa fonte, ela fica clara de se ler e não precisa usar face-font ou Google fontes. Mas aqui também vai por sua preferencia, pode ser Tahoma, Arial ou Verdana.
O fundo (background) é um cinzinha, como você já viu no preview, mas aqui é algo que vem de cada theme.
Temos a distancia das bordas (nunca sei explicar direito o que é o padding, sorry!) de 4px esse é o “meu” padrão, emfim, é o que eu gosto de usar, se você quiser mais distante aumente esse valor, caso queira diminuir, diminua o valor.
A distancia entre eles (margin-bottom) é de 3px, você modifica a seu gosto.
O tamanho de fonte (font-size) é de 10px, nao ponha maior que isso, vai ficar feio.
A cor da letre (color) é um cinza mais escura, aqui eu acho legal cinza, pois o branco meio que some na cor do background e preto fica muito agrrecivo.
Eu botei um tempo de translação (transition) de 0.5s, acho que esse é um tempo legal, tempo de mais torná cansativo.
Aqui vem o grande segredo das bordas o “border-left: 10px solid #E3A8F7; border-right: 10px solid #E3A8F7;” border é borda, a definição left e right (esquerda e direita) faz com que a borda so seja aplicada na esquerda e na direita, ela tem uma largura de 10px e o tipo da borda é solida, não modifique esses valores, você pode mudar a cor.
Vamos ver o que faz o hover, no hover a largura (weight) é maior, para “compensar” a borda, que agora (no hover) passará a ser de 1px para cada lado.
Se usar,for útil e/ou baixar, dê like e credite!
