Postagens da categoria: css

Dicas, códigos e tutoriais da linguagem de folha de estilos css.

Menu css3 com fade in de cinza para colorido

Menu CSS com fade in de tons de cinza para coloridoVamos aprender como criar um menu css3 com efeito fade in nos botões que passarão de tons de cinza para colorido progressivamente usando as propriedades de opacidade e transição.

Não se trata aqui de apenas revezar uma imagem em tons cinza com outra colorida, pois a ideia é que o botão vá ganhando as cores de forma progressiva e não instantaneamente.

O truque consiste em criar um link com uma imagem de fundo que será a versão em tons de cinza, e dentro do link existirá uma imagem que será então a versão colorida do botão.

Continue lendo »

Menu css3 animado com gradiente

menu gradiente com css3 - tutorial cssVamos criar um menu css3 onde será aplicado um gradiente como background de cada botão que possibilitará a mudança gradativa de cores com o deslocamento progressivo do mesmo usando as propriedades transition-property e transition-duration.

O menu será composto de um conjunto de duas divs e um link para cada botão e possuirá três estágios, normal, com o link sobre e ao clicar no link.

Esse menu css foi testado com sucesso nos navegadores Chrome, Fire Fox e Safari. As propriedades referidas mais acima não funcionam no IE, o que não é nenhuma novidade.

Continue lendo »

Criando botões com css3

criando botões de menu com css3 - dicas de cssHoje vamos criar um menu horizontal em css manipulando uma lista html com propriedades css3 de forma que pareça conter botões feitos à partir de imagens.

Já foi ensinado aqui mesmo no blog como criar um menu css3 com efeito de botões em links também manipulando uma lista html com css3 para obter esse efeito, porém nesse tutorial vamos criar botões mais elaborados que usará quatro partes distintas para criar o nosso botão.

Esse efeito funciona perfeitamente no Google Chrome, Fire Fox e Safari, mas infelizmente dada a algumas incompatibilidades com o IE, não funciona corretamente nele.

Veja abaixo a aparência do nosso menu:

Continue lendo »

Menu de navegação por abas em CSS3

Menu CSS3 de navegação horizontal por abasNesse tutorial você irá aprender como se cria uma caixa de conteúdo com navegação em um menu disposto em abas agrupadas horizontalmente.

Ao posicionar o mouse sobre uma aba ela deslizará suavemente para exibir o seu conteúdo, que estará oculto inicialmente.

Serão usadas propriedades css3 de transição para que a caixa de conteúdo seja exibida progressivamente e propriedade de rotação para que os títulos das abas sejam rotacionados à 90º.

Efeitos que infelizmente não funcionam no Internet Explore, mas funcionam perfeitamente no Google Chrome, Fire Fox e Safari.

Continue lendo »