Dicas Básicas Sobre HTML

 ♥Oi amores meus ♥

Gatinhos e gatinhas *-* Thucos (by: Fanny)

Bom , muitos por aí estão sem oquê fazer , e estão dizendo que a blogosfera está piorando cada vez maior .

eu não concordo com isso , apenas está aumentando o volume de pessoas *-* (what ?) está evoluindo cada vez mais , até porquê muitos estão revoltados por causa dessa coisa de HTML LUV , porquê as donas dessed tumblr acho que são meias Putas , porquê também né me polpe PUTA QUE PARIU , estou muito aborrecida com o caralho desse negócio de plágio ...ISSO DESTRÓI A BLOGOSFERA , então deve ser por isso que tem muitas blogueiras largando os seus blogs por aí ...

Bom .. vamos esquecer esse tumblr de HTMLLUV e um avisinho rápido para a dona desse tumblr ; eu já apaguei a postagem que você pensa que é plágio 3Bjs/*

vamos lá meus amores vamos aprender mais sobre HTML'S isso vai evoluir muito , e principalmente ajudar as pessoas que são nova na blogosfera.

CRÉDITOS : KAWAII WORLD

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)

Valéria, 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. #Valéria

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. ;)