Curso de HTML5 – 13 – Menu com CSS3 – by Gustavo Guanabara

posted in: Curso cursosemvideo | 0

EXTRA! Download GRÁTIS dos pacotes para as aulas:
https://www.dropbox.com/sh/bpe3xjlnqw97j4f/AAB-ZiLvQprb3Ef398US8pM8a
Nos ajude com LEGENDAS para nossos vídeos: https://youtu.be/Yu3ItGEsYQk

Veja como criar um menu suspenso utilizando apenas HTML5 e CSS3 nessa aula do professor Gustavo Guanabara.

A partir do HTML5, a tag NAV é utilizada para criar áreas de navegação. Com o CSS3, podemos configurar posicionamento, cores, efeitos de transição e outros comportamentos. Nessa aula, veremos como transformar uma lista com demarcadores em um menu flutuante para o nosso site.

Para realizar essas configurações, aprenderemos alguns parâmetros de CSS3, como:

Modificar o formato da lista, eliminando os demarcadores com o LIST-STYLE
Utilizando o TEXT-TRANSFORM com o valor UPPERCASE, alteramos todas as letras de cada item para maiúsculas, independente da maneira que foram escritas.

Com a configuração DISPLAY com o valor INLINE-BLOCK, você vai conseguir alterar a posição de cada item da lista.

As propriedades BACKGROUND-COLOR e COLOR modificam a cor do objeto.

Com o PADDING, vamos configurar o espaço interno de cada objeto, enquanto o MARGIN vai definir o espaço externo de cada um deles.

O POSITION do CSS3, vai configurar qual será a base de movimentação em relação ao seu objeto container. Os valores aceitos são ABSOLUTE e RELATIVE.

As propriedades LEFT e TOP vão configurar a posição do objeto em suas grandezas em pixels para o lado esquerdo e borda superior, respectivamente.

Utilizando a propriedade DISPLAY com o valor NONE, podemos esconder determinados objetos utilizando CSS3.

Aula do Curso de HTML5 criado pelo professor Gustavo Guanabara para o portal CursoemVideo.com. Download de pacotes e curso com certificado GRÁTIS: http://cursoemvideo.com/course/curso-de-html5/

Curso em Vídeo
Site: http://www.cursoemvideo.com
YouTube: http://www.youtube.com/cursosemvideo
Facebook: http://www.facebook.com/cursosemvideo
Twitter: http://twitter.com/cursosemvideo
Google+: http://plus.google.com/112666558837414979080

Patrocínio
HOSTNET: http://www.hostnet.com.br
TRAINNING: http://www.trainning.com.br
TOY SHOW: http://www.toyshow.com.br