Postagens

Mostrando postagens de Agosto, 2014

Introdução a animação com CSS3

Imagem
A CSS3 nos ajuda com algumas animações para Web. Vamos ver suas propriedades e como podemos usá-las.


- animation-duration:especifica quanto tempo uma animação leva para completar um ciclo.

Ex: div {

-webkit-animation-duration: 2s;/* Chrome, Safari, Opera */
    animation-duration: 2s;

}


- animation-timing-function: especifica como a animação irá se comportar na questão de velocidade.

Ex: div {

-webkit-animation-timing-function: linear;/* Chrome, Safari, Opera */
animation-timing-function: linear;
}
Para essa propriedade temos os seguintes valores:linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n)|initial|inherit;

- animation-delay: determina quanto tempo a animação leva para iniciar.

Ex: div {

-webkit-animation-delay: 2s;/* Chrome, Safari, Opera */
animation-delay: 2s;

}
Valores negativos são permitidos, -5s, a animação iniciará no tempo de 5s, por exemplo.

- animation-iteration-count: determina quantas vezes a animação irá acontecer.

Ex: div {

-webkit-animation-iteration-count: 3;/* Chrome, Safari, Oper…

Menu animado com CSS3

Imagem
Nessa aula vamos ver como construímos um menu animado usando as regras da CSS3.
Não vou entrar em detalhes quanto ao HTML, pois tenho várias aulas sobre menus no Blog :)

1. Construa o HTML do menu:












2. Agora, vamos formatar via css. Na regra para a tag , mudamos a cor do fundo e tirarmos as margens:

body {
background-color: #333;
margin: 0px;
}

- Na regra abaixo, formatamos a tag do menu.

nav ul {
font-family: Verdana, Geneva, sans-serif;
font-size: 1em;
list-style-type: none;
background-color: #CCC;
margin: auto;
width: 500px;
padding: 0px;
}

3. Na regra da ta < li > formatamos largura, altura, posição e colocamos as regras para animação.

nav li {
width: 500px;
height: 100px;
position: relative;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
-ms-transition: all 300ms ease;
}

4- Criamos uma regra para colocar um ícone dentro do item. Veja como ficou o HTML e a regra CSS.











#ico {
position: absolute;
visibility: visible;
height: 80px;
width: 80px;
top…