Postagens

Postagem em destaque

Estrutura básica de documento em HTML5

Imagem
O HTML5 veio com elementos semânticos, ou seja, elementos que possuem um significado para o desenvolvedor e para o navegador, descrevendo claramente para que serve.

Na maioria dos sites temos código HTML dessa forma:

para definir uma barra de navegação ou menu.
div id="nav"

ou

div id="header"

para definir o cabeçalho do site.

No HTML5 temos elementos semânticos que identificam claramente as partes de um site.

Observe a imagem:



- header: especifica o cabeçalho do site ou de uma parte do site;
- nav: define um conjunto de links de navegação;
- section: define uma seção de um documento html. De acordo com a documentação de HTML5 do W3C: "A seção é um agrupamento temático de conteúdo, geralmente com um título.";
- article: especifica um conteúdo independente do resto do site, por exemplo, um blog, um fórum de discussão ou um comentário;
- aside: define um conteúdo do site que ficará ao lado, como uma barra lateral;
- footer: especifica o rodapé do site ou de uma part…

Efeitos com Photoshop

Imagem
Veja como pode ficar seu resultado:


Aula 1:  
Aula 2:

Máscaras com Photoshop

Imagem
Pessoal, fiz algumas aulas para podermos trabalhar e entender um pouco mais de máscaras no Photoshop.

Nosso resultado ficará como segue:



Aula 1:


Aula 2:


Aula 3:


Máscara e Seleção no Photoshop

Imagem
Esse é o novo painel do Photoshop CS5.5. Vale a pena dar uma conferida :)




Layout com Grades

Imagem
Pessoal, desenvolvi uma aula contendo um layout e usando algumas ferramentas do Photoshop bem simples.

O resultado é muito bom :)





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…