Pessoal, desenvolvi uma aula contendo um layout e usando algumas ferramentas do Photoshop bem simples.O resultado e muito bom :) Pessoal, fiz algumas aulas para podermos trabalhar e entender um pouco mais de mascaras no Photoshop.Nosso resultado ficara como segue: Aula 1: Aula 2:Aula 3: A CSS3 nos ajuda com algumas animacoes para Web. Vamos ver suas propriedades e como podemos usa-las.- animation-duration: especifica quanto tempo uma animacao leva para completar um ciclo.Ex: div { -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */ animation-duration: 2s;}- animation-timing-function: especifica como a animacao ira se comportar na questao 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 animacao leva para iniciar.Ex: div { -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */ animation-delay: 2s;}Valores negativos sao permitidos, -5s, a animacao iniciara no tempo de 5s, por exemplo.- animation-iteration-count: determina quantas vezes a animacao ira acontecer.Ex: div { -webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */ animation-iteration-count: 3;}- animation-direction: especifica a direcao da animacao.Ex: div { -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */ animation-direction: alternate;}Para essa propriedade temos os seguintes valores: normal|reverse|alternate|alternate-reverse|initial|inherit;- animation-play-state: especifica se a animacao esta em pausa ou em execucao.Ex:div { -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */ animation-play-state: paused;}Veja um exemplo do codigo de uma animacao funcionando:#animando{ width:200px;height:200px;background:red;position:relative;border-radius:100%;-webkit-animation-name: anima;-webkit-animation-duration: 5s;-webkit-animation-timing-function: ease;-webkit-animation-delay: 2s;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;-webkit-animation-play-state: running; animation-name: anima;animation-duration: 5s;animation-timing-function: ease;animation-delay: 2s;animation-iteration-count: infinite;animation-direction: alternate;animation-play-state: running; }@-webkit-keyframes anima { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;}}@keyframes anima { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;}} O painel Adobe Paper Texture e bem util em nossos trabalhos e pode ser baixado gratuittamente pelo link: http://www.russellbrown.com/PSW/images/tips_downloads/Adobe_Paper_Texture_Installer.zipVeja e video aula... Esse e o novo painel do Photoshop CS5.5. Vale a pena dar uma conferida :) Vale a pena dar uma conferida nesse filtro... Veja a video aula. Veja como pode ficar seu resultado: Aula 1: Aula 2: Nessa video aula vamos ver uma forma de deixar o item de menu selecionado. Essa tecnica e bastante util para nossos projetos em Web.A construcao do menu do exemplo esta na aula: http://www.anapaulaweb.com.br/2009/06/tutorial-de-um-menu-css-na-horizontal.html O HTML5 veio com elementos semanticos, ou seja, elementos que possuem um significado para o desenvolvedor e para o navegador, descrevendo claramente para que serve.Na maioria dos sites temos codigo HTML dessa forma:para definir uma barra de navegacao ou menu.div id="nav"oudiv id="header"para definir o cabecalho do site.No HTML5 temos elementos semanticos que identificam claramente as partes de um site.Observe a imagem:- header: especifica o cabecalho do site ou de uma parte do site;- nav: define um conjunto de links de navegacao;- section: define uma secao de um documento html. De acordo com a documentacao de HTML5 do W3C: "A secao e um agrupamento tematico de conteudo, geralmente com um titulo.";- article: especifica um conteudo independente do resto do site, por exemplo, um blog, um forum de discussao ou um comentario;- aside: