Dicas Básicas Sobre HTML

 

Boa tarde, povo.

Hoje vamos ter uma mini-aula sobre HTML, e antes de tudo queria dizer que não sou nenhuma profissional quando se trata disso, apenas sei algumas dicas básicas que podem ajudar. Vamos falar sobre algumas coisas bem simples, e se tiverem dúvidas é só comentar.

Bom, nós vamos falar sobre o que é hover, sobre opacidade, transição, sobre borda, sombra e alinhamento. Se tiverem algum assunto especifico com dúvida podem pedir na ask, de repente se for útil pra muitos posso postar. Espero que gostem.

1. O hover consiste como um estado de tal efeito. Quando você não passa o mouse nem nada, também é um estado do menu ou efeito. Existem usados pra links também, como o a:visited. Bom, não entendo muito desta parte, mas aqui temos um exemplo de um menu usando o hover de uma maneira simples:

.menu {

background: #FF69B4;

}

.menu:hover {

background: #B0C4DE

}

2. A opacidade é bem fácil de usar, pelo menos do jeito que eu conheço é. Você apenas deve criar seu CSS e dentro dele colocar:

opacity: 0.7;

 E você deve alterar o valor em negrito até ficar como quer. Se não me engano, 0.1 ficaria uma opacidade mais clara  e forte e 0.7, 0.9 mais fraca.

3. Transição:

Para usar a transição, você adiciona o seguinte trecho no seu css:

-webkit-transition: 0.4s;

 Como sempre, altere os valores em negrito. Eu gosto de usar 0.4 ou 0.7 nos meus efeitos.

Porém, essa transição geralmente só funciona no navegador chrome, e para isso temos um código útel a todos:

-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;

 Não conheço muito bem esse código, mas acredito que funcione, basta mudar os valores em negrito.

4. Borda:

Coisa que veem perguntando é como se coloca essa borda em baixo dos Títulos dos Post's do Kawaii, coisa que é SUPER simples. Siga os passos:

Primeiro você deve procurar a tag responsáveis pelos post's, que no nosso caso de quem usa o modelo travel é /* Posts. E você irá encontrar esse trecho aqui:

O h3.post-title { refere-se ao título do post após clicar,  o h3.post-title a { é o normal sem mouse e tudo, o estado inicial do link, e por fim temos h3.post-title a:hover { que é quando você passa o mouse no título do post. Pra você colocar a borda em baixo, é só adicionar em qualquer um dos três o seguinte:

border-bottom: 1px dotted #XXX;

O 1px é a espessura, recomendo deixar um mesmo. Dotted é o tipo da borda, recomendo esta ou solid, e por fim #XXX é a cor  da borda. p.s: Legal usar transition como ensinei lá em cima nos post's, substituir as cores e colocar outra fonte. ^-^

E pra fechar sobre bordas, legal citar que se vocês tiverem uma sidebar, algum efeito e tudo vai uma explicação se quiser por bordas em algo:

border-bottom: É a borda em baixo do objeto.

border-left: Borda a esquerda.

border-right: Borda a direita.

border-top: Borda em cima do objeto.

5. Alinhamento.

Se  você quiser alinhar alguma coisa, pode usar aquele tutorial de objeto flutuante no blog. Mas vou apenas explicar o que cada margin que conheço significa, que geralmente usamos em imagens, objetos, textos, na sidebar, data e por aí vai.

margin-top: Esse se você quiser elevar um objeto a cima.

margin-left: Se você quiser colocar um objeto a esquerda.

margin-right: Objeto a direita.

margin: Se você quiser dar um espaço entre os cantos de tal coisa, por exemplo se você por margin na sidebar ela desencosta do canto.  Assim com o título. (Dessa eu não tenho certeza :c)

Stephanie, como eu colocaria algo pra baixo?

Simples, existem os pontos negativos e positivos, ou seja no margin-top basta adicionar: -VALORpx; Ou então se a quantidade não for suficiente. As vezes você quer colocar num lugar sem o negativo teria que colocar uns 90px, e com o negativo talvez 9.

É isso gente. Agora tenho que cuidar de umas coisinhas e mais tarde volto. #Stephanie

Obs: Muitas informações podem estar erradas, pois como disse isso tudo eu tenho como minha forma de entender, portanto se você for bom no assunto me avise se achar algo errado. ;)