Tag Archives: dicas de css

Criando botões com css3

Publicado em 3 de outubro de 2012 by derme| Deixe um comentário

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 »

» Fazer um comentário

Postado em css

Tagged , ,

Efeito de mosaico em imagens com css3

Publicado em 3 de setembro de 2012 by derme| 1 Comentário

imagem com efeito de mosaico em css3 - dicas de cssNesse pequeno tutorial css3 irei ensinar como criar um efeito bastante interessante aplicado a qualquer tipo de imagens e que terá como base o uso da tecnica de css sprites.

Será criado um mosaico da imagem, dividida em 9 divs independentes e montado em 3 linhas e 3 colunas, exibindo a imagem completa.

Serão aplicadas bordas arredondadas para cada parte da imagem para dar um efeito melhor, porém não aplicáveis ao IE infelizmente. Embora exista uma maneira de criar bordas arredondadas no IE usando um arquivo externo. Para mais detalhes você pode ler a seguinte postagem: Criando um formulário com cantos arredondados usando css3.

Continue lendo »

» 1 Comentário

Postado em css

Tagged , ,

Menu CSS3 com efeito de lente de aumento

Publicado em 15 de agosto de 2012 by derme| 3 Comentários

Menu css3 com efeito de lente de aumentoNesse tutorial irei ensinar como criar um menu  css3 com um efeito bem interessante e muito simples de se usar.

Montaremos o menu usando alguns ícones png e ao passar o mouse em cada um deles acontecerá um efeito de aumento da imagem.

O aumento da imagem acontecerá progressivamente deixando o nosso menu css com um efeito mais interessante.

Isso Ă© possĂ­vel apenas com css3 usando a propriedade “transition” que faz uma transição suave do efeito e tambĂ©m pode ser determinado um tempo para que a transição aconteça, mais ou menos rápido. A propriedade transition será usada entĂŁo aos pares “transition-property” que determina qual tipo de efeito que será aplicado e “transition-duration” que determina a duração do efeito atĂ© que seja completado.

Continue lendo »

» 3 Comentários

Postado em css

Tagged , ,

Menu css3 drop down

Publicado em 9 de agosto de 2012 by derme| Deixe um comentário

menu css drop down - dicas de cssNesse pequeno tutorial você irá aprender a criar um menu css3 drop down com efeito deslizante usando a propriedade transition para a altura, fazendo com que ele se desdobre suavemente para baixo. Esse Menu Drop Down com CSS 3 ficará fixo no topo da página, ou seja, você poderá rolar a página para além da primeira dobra que ele continuará lá.

Será um menu com cantos arredondados , efeitos de sombra e gradiente; e como já é de costume, até a versão 9 do IE esses efeitos não funcionam assim como o efeito deslizante ( fazer o que?) mas funciona perfeitamente no Google Chrome e no Fire Fox.

Continue lendo »

» Fazer um comentário

Postado em css

Tagged , ,

1234