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.

As Maiores Mentiras dos Clientes

Cliente é complicado…  acho que todos os que estão lendo este post já deve ter ouvido algumas ou todas mentiras citadas abaixo, exerto os mais novinhos na área então já fiquem espertos pra não cairem nessa…

As Mentiras:

– Faça esse de graça que no próximo a gente se acerta.

Todo freelancer cai nessa quando faz o 1º trabalho, mas o 2º nunca vem. Ainda tem a desculpa: “é só para saber se você é bom mesmo”.

Novos freelancers… jamais caia nessa, pelo amor de Deus… eu graças a Deus nunca passei por isso e se passasse eu no mínimo iria chingar o cliente. Aqui vai uma técnica: Procure saber qual é a profissão do cliente. Suponhamos que ele é um pedreiro… diga o seguinte: