Iniciando com CSS3

imgcss3

Já faz algum tempo que o CSS3 foi lançando e eu ainda não falei nada sobre ele. Pois bem, vamos dar uma introdução ao CSS3. Antes de mais nada quero deixar bem claro que nem todos os navegadores tem suporte ao CSS3, não preciso nem citar o IE6 né :). Aqui vale apenas citar os que possuem suporte: Firefox 3+, Safari 4+ e Opera 9.5+. Vamos iniciar com a história do CSS:

A História do CSS

O Primeiro código CSS foi proposto por um cara chamado Hakon Lie em Outubro de 1994. Logo depois, em 1995, foi criado um workshop e com isso surgiu a W3C. Um ano se passou e o CSS1 começou a ser recomendado, exatamente em 1997. Muitos trabalhos e estudos foram feitos em cima do CSS1 e em meados de 1998, mas precisamente em Maio, o CSS2 tornou-se uma linguagem de marcação recomendada pela W3C. Desde então, apenas esboços foram apresentados como módulos em Junho de 1999 (CSS3).

Com essa pequena introdução, já percebe-se que o CSS3 vem sendo planejado a muito tempo. Chega de “papo furado” e vamos prosseguir.

Novidade do CSS3

Novidades são muitas… o melhor delas é que são úteis :). Veja a lista das principais propriedades que são novidades, com o surgimento do CSS3:

Menu Com Efeito Hover Perfeito Em Todos Os Navegadores!!!

Bom hoje eu vou postar um dos meus “macetes” que uso pra me ajudar na produção de sites… é o famoso “don’t repeat yourself”:

Demonstração / Download

Primeiro vamos ao conceito. Seria um modelo já produzido para agilizar o seu trabalho como webdesigner, por exemplo, você ta lá ganhando o pão de cada dia e se depara com um menu como este… não é mais facil usar o famoso CTRL+C e CTRL+V? Pois bem, este é o conceito… e acredite, sua produtividade vai aumetar e muito... chega de fica perdendo tempo escreve linhas e linhas de código, torrando a cabeça, ouvindo o chefe gritar no seu ouvido porque o job está atrasado… ok, eu apelei mais é essa a intenção.

É claro que cada menu é diferente um do outro e tals, enfim… o objetivo é ter em mãos um modelo propriamente feito, compatível com todos os navegadores, ai é só fazer o jogo do copiar e colar, um pouquinho de alteração aqui… outro ali… e voalá… menu certinho e produzido pelo menos na metade do tempo. Já deu pra entender né…

Como não te muito o que falar vamos logo ao bendito menu em css:

HTML:

<ul class="menu">
<li><a href="">Home</a></li>

<li><a href="">Contato</a></li>
<li><a href="">Serviços</a></li>
<li><a href="">Musica</a></li>
<li><a href="">Teste</a></li>
</ul>

O codigo HTML é só isso mesmo, uma lista simples, nada demais…

CSS:

ul.menu li {
float:left;
background: #333;
padding:0px;
line-height: 30px;
border-style: solid;
border-width: 1px;
border-color: #404040 #1a1a1a #1a1a1a #505050;
}
ul.menu li a{
display: block;
padding: 5px 30px;
color: #fff;
font-size:17px;
font-family:Arial,Helvetica,sans-serif;
text-decoration: none;
font-weight: bold;
}
ul.menu li a:hover, ul.menu li:hover{
color: #fff;
background: #4698ca;
border-top-color: #5db1e0 !important;
border-left-color: #5db1e0;
}

Se você fizer o download dos arquivos verá que quase todas as linhas de códigos do CSS (algumas seria idiotisse comentar) estão comentadas explicando o funcionamento de cada uma.

Até a próxima.

Diferença Entre ID (#) e Classes (.)

Bom eu estava “dando aula” pra um amigo meu pelo Skype e surgiu essa pergunta: Qual é  a diferença entre ID (#) e Classes (.)? E é este tema que será abordado neste post:

Intrudução
É comum haver confusões entre IDs e Classes, utilizados e necessários em XHTML, CSS e Javascript. Há muitos tutoriais na internet explicando alguns pontos básicos e algumas dicas, que não são o suficiente. Resultado: as dúvidas persistem e a diferença entre ID e Classe ainda não é “desvendada”. Vamos acaber com esse mitério de uma vez por todas…