Brincando com CSS3

Quando eu estava trabalhando na nova versão do Abduzeedo, a atual, eu decidi aprender e usar CSS 3 para melhorar a parte visual de alguns elementos. Ao invés de usar imagens para criar sombras e cantos aredondados, eu usei CSS 3. Claro que eu sabia que seria compatível com todos os browsers, precisamente, o Internet Explorer.

A partir das estatísticas do site, sabemos que a maioria dos leitores usa Firefox (51.05%), seguido por Safari (25.38) e Internet Explorer com apenas 11.73. Então pensei que funcionaria bem, e para aqueles que usam outros browsers, conseguiriam acessar o site mas sem ver esses pequenos detalhes.

Então neste tutorial vou mostrar a vocês como eu criei alguns dos efeitos que você encontra no Abduzeedo UI. Nós vamos brincar com Box-Shadow, Round-Corners, Tex-Shadow e CSS gradients. A idéia é praticar, que na minha opinião, é a melhor maneira de aprender.

Resultado Final

Este é o resultado final que teremos no final do tutorial. A idéia é brincar um pouco com o CSS3 mesmo que isso não funcione bem no IE e Opera.

Clique na Imagem para ver a DEMO - Funciona apenas com Safari, Firefox e Chrome

Passo 1

A primeira coisa a fazer é criar o arquivo HTML com as informações. Vamos criar também o link para o nosso arquivo CSS (<link rel="stylesheet" href="tut.css" type="text/css" media="all">). Existem vários lugares legais para aprender mais sobre HTML e CSS, eu recomendo CSS Tricks, Nettuts, Smashingmagazine, W3C, 24ways, Woork e outros.

Abaixo você consegue ver a página sem nenhum estilo.

Passo 2

Aqui está o arquivo HTML, como você pode ver estamos usando HTML 5, para praticar. Isso é o melhor dos projetos pessoaism podemos praticar e aprender.

Nós temos basicamente uma seção chamada "Box" onde vamos posicionar o conteúdo. Depois temos a navigation (Nav), outra seção com o conteúdo (content) e então, dentro da content section temos as messages. Usamos tag article para elas.

Passo 4

Vamos começar trocando o estilo do "body". Então vamos definir a fonte, a largura dela, as margens, paddings e cor de background. É muito importante que você tenha algum conhecimento sobre CSS, especialmente sobre CSS Box Model para entender como funcionam Padding, Margins, Border e sizes. Eu recomendo esse artigo muito legal do Chris Coyer: The CSS Box Model

body{
    font: 14px/140% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    font-weight: lighter;
    margin: 0;
    padding: 0;
    background: #ddd;
}

Agora, para o box nós vamos brincar com uma nova propriedade do CSS 3, Box Shadow. Nós podemos adicionar shadows a elementos sem usar qualquer imagem. É muito simples de usar, basta ajustar Horizonal Lenght, Vertical Lenght, Blur and Color.

Exemplo: box-shadow: horizontal lenght vertical legnth blur color = box-shadow: 0px 0px 10px #666.

Para mais informações sobre Box-Shadow leia esse artigo: Box-shadow: shadow effect on elements in css3.

#box{
    display: block;
    position: relative;
    width: 500px;
    margin: 20px auto;
    border: 1px solid #666;
    -webkit-box-shadow: 0 0px 10px #666;
    -moz-box-shadow:0 0px 10px #666;
    box-shadow: 0 0px 10px #666;
}
    

Passo 5

Para navigation eu criei uma imagem PNG com 'alpha transparency' para então criar o bevel effect da navigation bar.

nav{
    position: relative;
    display: block;
    clear: both;
    background: #444 url(imgs/bg-gradient.png) repeat-x left -25px;
    height: 25px;
    padding: 10px 20px 10px 20px;
}

Eu recomendo que use RESET.CSS para seus projetos, mas aqui não estou usando, então vou apenas 'reset the UL and LI behaviors' para criar meus navigation buttons. Para entender porque fazemos isso com nosso CSS, leia esse artigo de Eric Meyer: CSS Tools: Reset CSS.

nav ul, nav ul li{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

O objetivo de uma 'reset stylesheet' é reduzir as inconsistencias do browser em coisas como alturas de linhas default, margens e tamanho de fontes em headings, etc.

Passo 6

Para os botões vamos usar round corners, box-shadow e text shadow para criar um efeito legal. Dê uma olhada no código abaixo. Text-shadow é quase igual ao box-shadow mas para o texto, é a mesma syntax. Agora, a parte de round corners é diferente e é um dos efeitos mais desejados. Nós não precisaremos adicionar muito markup e as imagens para criar esse efeito.

Eu recomendo 2 artigos sobre Round Corners: Border-radius: create rounded corners with CSS! e Have a Field Day with HTML5 Forms. O último vai cobrir outro HTML 5 e CSS 3 novas características.

nav ul li{
    float: left;
    background: #555 url(imgs/bg-gradient.png) repeat-x left -35px;
    padding: 0 10px;
    margin: 0 10px 0 0 ;
    color: #fff;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    font-size: 13px;
    cursor: pointer;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0 -1px 1px #333;
    -moz-box-shadow:0 1px 1px #333;
    box-shadow:0 1px 1px #333;
    text-shadow: #000000 0 -1px 1px;
}

Passo 7

Quando o usuário passar o mouse pelo botão, vamos trocar a cor do background, fonte e efeitos.

nav ul li:hover{
    background-color: #ccc;
    box-shadow: 0 -1px 1px #fff;
    -webkit-box-shadow: 0 -1px 1px #fff;
    -moz-box-shadow: 0 -1px 1px #fff;
    color: #333;
    text-shadow: #fff 0 1px 1px;
}

Passo 8

Para o campo de busca vai ser quase igual, no entanto vamos usar outra imagem para o background, o magnifying glass icon, e posicionaremos na direita.

input{
    background: #ddd url(imgs/mglass.png) no-repeat 135px 2px ;
    outline: none !important;
    position: absolute;
    right: 20px;
    display: block;
    padding: 5px 10px;
    top: 9px;
    border: none;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    box-shadow: 0 -1px 1px #333;
    -moz-box-shadow: 0 -1px 1px #333;
    -webkit-box-shadow: 0 -1px 1px #333;
}

Para o focus state vamos trocar apenas a cor do background.

input:focus{
    background: #fff;
}

Passo 9

Para content, vamos brincar com gradientes via CSS3. Isso vai funcionar apenas em Webkit based browsers (Safari, Chrome, Webkit). Basicamente nós setamos 2 ou mais cores que vão criar o gradiente. Recomendo que a leitura desse artigo: Introducing to CSS Gradients. Apenas Webkit browsers vão mostrar o gradiente que adicionei 2 backrounds, o primeiro é cinza (#ddd) e vai funcionar em outros browsers que vão ignorar o gradiente.

section#content{
    display: block;
    position: relative;    
    background: #ddd;
    background: #ddd -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(100, 100, 100, .5)), to(rgba(90, 90, 90, .1)));
    padding: 20px 20px 10px 20px;
}

.clear{
    clear: both;
}

Passo 10

Para os thumbnails vamos mais uma vez usar Round Corners e Box Shadow. Além disso use FLOAT:LEFT para alinhar eles a esquerda e 3px solid white border.

#thumb img{
    float: left;
    border: 3px solid #fff;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0px 3px #333;
    -moz-box-shadow:0 0px 3px #333;
    box-shadow:0 0px 3px #333;
}

Passo 11

A idéias para as messages é criar uma dialog box. Aplique Round-corners em todos os lados menos no superior esquerdo. Também adicionei Box Shadow e CSS Gradient.

div.msg{
    float: right;
    width: 320px;
    padding: 20px;
    background: #f0f0f0 -webkit-gradient(linear, 0% 0%, 0 90%, from(rgba(100, 100, 100, 0)), to(rgba(90, 90, 90, .2)));
    
    -webkit-box-shadow: 0 0px 5px #333;
    -moz-box-shadow:0 0px 5px #333;
    box-shadow:0 0px 5px #333;
    
    margin-top: 40px;
    
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-bottomright:10px;
    -moz-border-radius-topleft:0;
    -moz-border-radius-topright:10px;
    
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    
}

Como eu não fiz o reset do meu CSS, o H3 estava usando o estilo browser default para isso. Então precisei mudar a margem para 0 e para o padding eu troquei o topo, direita e esquerda para 0 apenas adicionando 10 pixels na parte de baixo do padding.

h3{
         padding: 0 0 10px;
         margin: 0;
}

Passo 12

Uma das coisas mais legais do CSS 3 é que podemos brincar com shadows e também criar brilhos apenas trocando a cor do box-shadow.

div.msg:hover, #thumb img:hover{
    -webkit-box-shadow: 0 0px 5px #0cf;
    -moz-box-shadow:0 0px 5px #0cf;
    box-shadow:0 0px 5px #0cf;
}

Conclusão

Mais uma vez, a idéia desse tutorial rápido é mostrar as possibilidades. Tem muito mais para aprender e tudo deve ser testado para garantir que funcione em diferentes browsers. É tudo uma questão de praticar.

Clique na imagem para ver a DEMO - Funciona apenas no Safari, Firefox e Chrome

Download dos Arquivos usados nesse Tutorial

Clique aqui para fazer o download dos arquivos usados nesse tutorial