Tenho trabalhado no novo design do Abduzeedo e com isso tive a chance de brincar mais com o CSS 3, mesmo que alguns browsers ainda não tenham suporte para ele nós já podemos usar algumas features legais como round corners, text-shadow, box-shadow, transitions e transformations. O maior problema ainda é o Internet Explorer, mas parece que o IE 9 terá um suporte melhor ao CSS 3 e essas features.

Acredito que eventualmente o HTML 5 e o CSS 3 vão substituir o Flash, e nós podemos perceber que a comunidade do design tem falado bastante sobre isso, Smashingmagazine, um dos maiores sites sobre web design publicou vários artigos sobre isso e inclusive lançou uma competição, o CSS 3 contest, para incentivar os designers a brincarem mais com o CSS 3.

Então nesse post vou mostrar a vocês alguns experimentos que tenho feito com CSS 3, especialmente com animations usando transitions e transformações como scale e rotate.

*The demo and code will only work with Webkit browsers like Safari and Chrome.

CSS Buttons and Thumbs

Nesse exemplo vou mostrar a você como criar uma barra de navegação legal usando apenas CSS. Eu usei gradients, transitions e shadows. Também usei um Flickr Javascript badge para carregar algumas imagens do Flickr e o CSS para fazer scale up quando o usuário faz hover na imagem.

HTML Code

CSS for the Navigation Bar

Para a barra de navegação usei CSS para criar o gradiente, a syntax do gradiente é -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*). Para mais informações sobre CSS Gradients recomendo que confiram o site http://webkit.org e esse artigo em especial http://webkit.org/blog/175/introducing-css-gradients/.

Um site bastante util para gerar códigos CSS 3 é o http://css3generator.com/ especialmente pelo código extra que precisamos adicionar para dar suporte ao Mozilla e Opera.

#menu{
position: relative;
display: block;
margin: 20px auto;
width: 600px;
height: 60px;
padding: 0 20px;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(82,82,82)), color-stop(1, rgb(125,124,125)));
-webkit-box-shadow:#000 0 1px 2px;
-webkit-border-radius:2px;
}

CSS for the Navigation Buttons

Para os botões usei novamente CSS gradients e também Text-shadow, e CSS transition para quando o usuário fizer hover no botão, a cor do background vai mudar com animation.

ul li{
list-style-type: none;
margin: 15px 0;
float: left;
height: 30px;
line-height: 30px;
}
ul li a{
background: #666 -webkit-gradient( linear, left bottom, left top, color-stop(0.5, rgb(40,40,40)), color-stop(0.5, rgb(80,80,80)) );
display: block;
padding: 0;
text-decoration: none;
color: #fff;
font-size: 12px;
font-weight: bolder;
text-shadow: #000 0 -1px 1px;
width: 90px;
text-align: center;
border-bottom: 1px solid #666;
border-top: 1px solid #222;
border-left: 1px solid #666;
border-right: 1px solid #222;
-webkit-transition:text-shadow .7s ease-out, background .7s ease-out;
}
ul li:first-child a{
-webkit-border-top-left-radius:20px;
-webkit-border-bottom-left-radius:20px;
}
ul li:last-child a{
-webkit-border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
}

ul li a:hover{
text-shadow: #f5fc39 0 0 10px;
background: #222;
}

Animated Flickr Images

Aqui usei o mesmo efeito hover que apliquei nas imagens do meu novo site pessoal http://fabiosasso.com. Então quando o usuário passa o mouse nos thumbs a imagem fica maior usando -webkit-transition and -webkit-transform:scale(). Abaixo você pode ver os códigos, a transition é aplicada no código da imagem, enquanto o transform vai apenas no hover state.

#flickr_badge_uber_wrapper{
width: 550px;
position: relative;
display: block;
margin: 0 auto;
margin-top: 100px;
}
.flickr_badge_image{
float: left;
}
.flickr_badge_image img{
margin: 10px;
border: 3px solid #fff;
display: block;
position: relative;
-webkit-border-radius:5px;
-webkit-box-shadow: #000 0 0 2px;
-webkit-transition: -webkit-transform .2s ease-in-out, -webkit-box-shadow .2s ease-in;

}
.flickr_badge_image img:hover{
-webkit-transform:scale(1.2);
z-index: 10;
-webkit-box-shadow: #666 0 5px 10px;
}


Click on the image to see the demo.

90s design with CSS

A possibilidade de girar e escalonar elementos HTML permite a criação de diferentes composições que antes seriam possíveis apenas usando imagens ou Flash.

Então tive essa ideia de brincar apenas com CSS e tipografia básica para criar um design inspirado em David Carson. Eu basicamente apenas adicionei alguns retângulos e tipografia, reduzindo alturas de linhas e girando alguns textos. Depois com transitions eu animei toda a composição para girar e escalonar os cliques dos usuários no texto "Who am I".

Abaixo você pode conferir o resultado final desse experimento. O trabalho ainda não está finalizado, mas você pode ter uma ideia das coisas que pode fazer com CSS3.


Click on the image to see the Demo


CSS Scale and Rotate - Click on the image to see the Demo

Artigos Recomendados

Download

Clique aqui para fazer o download dos arquivos CSS e Html usados nesse tutorial

About the author of this post

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. Of course there are other softwares conteplated like Pixelmator, Fireworks, and web design tutorials.