Você quer dar um up na forma que mostra seu portifólio em seu site? Utilize CSS3 para isso. Utilizando box-shadow e as pseudo-classes :after e :before você pode conseguir um efeito tridimensional nas sombras que envolvem as imagens, e o resultado final é bem elegante, como você pode ver nesse exemplo.
Com alguns truques de CSS pode-se criar várias coisas interessantes, e uma delas que irei mostrar aqui é de como criar um banner apenas com CSS sem a utilização de imagens.
Nesse novo experimento resolvi criar uma galeria com os vídeos de um usuário qualquer do youtube com o efeito de polaroid criado só com CSS3, que ao você clicar no thumbnail ele abre seu respectivo vídeo em um lightbox. Mas atenção, devido a utilização de propriedades avançadas do CSS essa galeria só vai funcionar corretamente em browsers modernos (WebKit e Firefox).
Criar animações com CSS3 hoje em dia é extremamente simples, basta um pouco de criatividade e um browser descente. Nesse exemplo, você verá que é extremamente simples criar um efeito de smooth no background da página. O CSS responsável pelo efeito é o seguinte:
@-webkit-keyframes rainbow {
0% { background-color: #4c88c7; }
25% { background-color: #f44545; }
50% { background-color: #c29fd1; }
75% { background-color: #22b573; }
100% { background-color: #4c88c7; }
}
body {
-webkit-animation-direction: normal;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: rainbow;
-webkit-animation-timing-function: ease;
}
Se você é aficionado por otimização, a declaração na tag body acima, pode ser resumida da seguinte forma:
body {-webkit-animation: rainbow 5s ease infinite normal}
Um exemplo pode ser visto nesse link. Como podem ver, ocorre uma transição da cor do background, se você estiver usando um browser descente, claro (Safari/Chrome).
Durante essa semana está acontecendo no W3C Brasil o curso de HTML5 e CSS3, e se você não foi um dos escolhidos para participar do curso, não fique triste, todo o conteúdo que será utilizado está sendo distribuído de forma gratuita na web.
