Aprendendo a mexer em Html - #Parte 2

Oi meus candys *o*

Pelo visto vocês gostaram da #Parte 1 né ? Obrigada mesmo, que bom que vocês estão gostando. Muitas pessoas praticamente me imploraram para postar logo a segunda parte, e estou aqui.

Outras coisa, eu vi que algumas pessoas se interessaram na ideia de um concurso aqui no Blog. Ainda estou pensando sobre o assunto, mas para o concurso rolar eu vou ter que ter no mínimo 4 pessoas participando, já que vai ter apens 1º e 2º lugar. Mas isso eu decido depois.

Vamos á nossa segunda aula ?

A segunda parte, vai se relacionar com o entendimento de códigos, efeitos e menus.

Vamos começar.

1º - ]]></b:skin>

Grave este código! Acredite, você vai usar muito ele quando for se tratar de Html. Praticamente todos os efeitos, menus, etc. Estão relacionados á essa Tag. Então já sabem, na maioria das vezes que vocês forem adicionar um efeito,menu, ou algo do tipo, terão que colocá-lo antes desta Tag.

2º - Entendendo os códigos

Bom, eu trouxe o menu que eu uso aqui no blog só para explicar, claro que não foi feito por mim ( créditos no final ), E vou explicar algumas coisas dele, claro que eu só vou ensinar o que vocês poderão mudar, mas no próximo post eu vou detalhando mais. Vamos ao código:

/*Inicio do menu Space by Chilli Lovers*/
Space{
color: #fff; /* cor da fonte quando passa o mouse */
text-align:center; font-size: 11px; /* Tamanho da fonte do menu */
text-transform:lowercase;
background: #FF4040 ; /* Fundo do menu */
padding: 2px;
float: left;
margin: 2px;
cursor: help; /*cursor */
width: 45%; /* tamanho do menu */
-webkit-transition-duration: .80s;
border:1px solid#FF0000; /* bordas */
border-radius: 2px; /*---- bordas arredondadas ----*/
}
Space:hover{
background:#FF4040; /* fundo do menu quando passa o mouse */
border:1px solid #FF0000; /* bordas quando passa o mouse */
color: #fff; /* cor da fonte quando passa o mouse */
-webkit-transition-duration: .80s; border-radius: 8px; /* bordas arredondadas */
}
/*Fim do menu Space by Chilli Lovers*/

Bom, no próprio código, além de já estar creditado, já esta tudo praticamente explicado, mas vamos lá.

No post anterior, eu dei uma pequena aulinha de traduções, se você não se lembra, aprendemos isso: background,center,left,right,solid,dashed e color. ( Me diga se eu esqueci de algum :$ ), e o código das cores.

Então vamos usar nosso sonhecimentos agora..Traduza as palavras e Aonde está os códigos das cores, substitua pelo código da cor de sua preferência. e aonde possui um número e depois 'px' é o tamanho.

Agora para o menu aparecer, adicione um Gagdget de Html/JavaScript e cole este outro código:

  <a href="Url da Página"><Space>Nome da Página</Space></a>

Mude de acordo com o que se pede, e pronto.

Agora eu quero fazer um desafio, quero que vocês coloquem esse menu no blog de vocês, pode ser um blog de teste ok ? ( é só para fazer um teste com vocês ) e faça esse menu todo preto e branco. Tire um print, e mande aqui nos comentários. E vamos ver quem fez o melhor menu preto e branco. O vencedor, vai ser divulgado na #Parte 3 ok ? sou uma ótima professora *o*.

Créditos do menu: www

Gostaram da aulinha ?

Beijos