Postagens

Mostrando postagens de Junho, 2011

Menu com CSS

Imagem
Podemos estar criando um menu somente CSS sem Javascript. Isso deixa o menu mais flexível e compatível com a maioria dos navegadores, o que é extremamente recomendado pela W3C.

1 - No seu arquivo html, crie a estrutura com listas não ordenadas como mostra a imagem. É importante colocar os IDs de forma correta e construir o HTML como na imagem.



2 -Agora você irá escrever a CSS desse menu:

*{
    margin:0px;
    padding:0px;
}

Comentário: O seletor universal (*) tira as margens e preenchimentos das listas.

#navCima{
    list-style-type:none;
    font-family:Verdana, Geneva, sans-serif;
    font-size:0.7em;
    width:900px;   
}

Comentário: A regra #navCima tira os marcadores da lista , formata a fonte e define a largura do menu.

#navCima li{
    position:relative;
    float:left;
    text-align: center;
}

Comentário: Para o item da lista, definimos que eles flutuam a esquerda, que o seu texto fica ao centro e sua posição é relativa.

#navCima li ul{
    display:none;
    position:absolute;
    top:26px;
    f…

Bordas Estilizadas com a CSS3

Imagem
Uma opção muito interessante é podermos colocar uma imagem na borda de um determinado elemento html. Isso é possível com a CSS3...

Assista a vídeo aula e confira...

Estilizando uma Letra Capitular com CSS

Imagem
Essa é uma técnica interessante e conseguimos fazer coisas bem legais com ela...

Assista a vídeo aula para ver como fazer.

Formulário com HTML5

Imagem
Realmente o HTML5 a cada dia que passa está ficando melhor. Por que eu digo isso?

Assista a vídeo aula...

Usando divs com posicionamento absoluto

Imagem
O posicionamento absoluto não obedece o fluxo normal do documento, podendo ficar sobre outros elementos. Mas quando usado de forma adequada pode ser muito útil.

Assista a vídeo aula para ver...

Criando marca d'água no Photoshop CS5 com pattern

Imagem
Nessa vídeo aula vou demonstrar como criar uma ação bem simples no Photoshop CS5, usando pattern, para compor uma marca d'água.

Criando ações no Photoshop CS5

Imagem
Podemos criar com muita facilidade ações do Photoshop CS5 que podem ser úteis em nossos projetos.

Assista e vídeo aula para verificar...