CSS3 Text Gradient

Antes de tudo: por que esta é a melhor forma?
Existem muitas maneiras de se obter o text gradient. Mas eu prefiro esta porque ela não requer nenhuma alteração no codigo HTML. Não é preciso ficar enchendo o código de tags ou propriedades como data-text só para se conseguir um efeito que daqui há 6 meses ou um ano pode não ser mais desejado.

Então tudo o que você precisa para aplicar o efeito em um título <h1> é:

h1 {
background-image: -webkit-gradient(
linear,
left top, left bottom,
from(rgba(0, 0, 0, 1)),
to(rgba(243, 255, 114, 1))
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size:120px;
}

Como você já deve ter percebido, as cores são definidas nas linhas from(rgba(0, 0, 0, 1)) e to(rgba(243, 255, 114, 1)). Basta trocar os valores RGBA (RGB + Alpha) pelos das cores do seu gradiente. E pronto. Lembrando claro que o efeito só será visível em browsers compatíveis com CSS3.

Com certeza esta não é a única forma de conseguir o text gradient e se você souber de alguma outra, por favor, compartilhe conosco. Abraço!

Link para instalação da Firebug: http://getfirebug.com/

Como funciona

A mecânica é simples: a função jQuery identifica o elemento onde deve ser aplicado o efeito e insere dentro dela uma tag <span>, que é quem realmente receberá o Fade. Tudo o que você precisa saber e fazer é colocar um pequeno trecho javascript na sua página, ajustar seu CSS e adicionar uma classe ao botão que receberá o efeito.

É exatamente o mesmo efeito que está aplicado aos botões de Download e Demo no início do post. Você também pode acessar a demonstração e baixar os arquivos para visualizar melhor o código.

O Javascript

O primeiro passo é importar o jQuery normalmente. Depois é só inserir a função abaixo. Perceba que logo no início do código, na segunda linha, você deve colocar a classe dos botões que receberão o efeito (nesse caso: efeito_fade). Todos os elementos com essa classe serão animados.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.efeito_fade').append('').each(function () {
        var $span = $('> span.hover', this).css('opacity', 0);
        $(this).hover(function () {
            $span.stop().fadeTo(500, 1);
        }, function () {
            $span.stop().fadeTo(500, 0);
        });
    });
});
</script>

O CSS

No CSS, a primeira coisa a fazer é criar um botão comum, com a técnica clássica de image replacement para diferenciar o estado normal (“apagado”) do estado :hover (“aceso”). Ou seja, criar uma imagem que contenha os dois estados do botão e então estilizá-lo usando a propriedade background-position para fazer a troca de um estado para o outro quando o usuário passa o mouse sobre ele.
A única diferença é que ao invés de estilizar o estado :hover em si, você irá estilizar a tag <span> que será criada dentro do botão como se fosse o :hover, com algumas pequenas mudanças:
A primeira é posicionar o botão relativamente (position:relative), para que o <span> fique corretamente colocado dentro dele. A segunda é posicionar o <span> absolutamente (position:absolute) e repetir as mesmas propriedades do botão, ajustando apenas o background. Eu sei, parece complicado, mas veja como o código não tem nada demais:

/* botao 1 */
#seu_botao {
	clear: both;
	position:relative;
	display:block;
	height: 64px;
	width: 570px;
	background:url(images/botao.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}
#seu_botao span.hover {
	position: absolute;
	display: block;
	height: 64px;
	width: 570px;
	background: url(images/botao.png) no-repeat;
	background-position: bottom;
}

/* botao 2 */
#outro_botao {
	clear: both;
	position:relative;
	display:block;
	height: 64px;
	width: 570px;
	background:url(images/outro.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}
#outro_botao span.hover {
	position: absolute;
	display: block;
	height: 64px;
	width: 570px;
	background: url(images/outro.png) no-repeat;
	background-position: bottom;
}

O HTML

Como eu disse, a única coisa que você precisa fazer no seu HTML é atribuir a classe indicada na função javascript em todos os elementos que receberão o fade. Nesse caso a classe é a “efeito_fade”. Veja o código dos dois botões desse exemplo:

<a href="#" id="seu_botao" class="efeito_fade"></a>
<br />
<a href="#" id="outro_botao" class="efeito_fade"></a>

Veja abaixo como ficam os botões desse exemplo e perceba que, por ter um código HTML extremamente simples e deixar toda a mágica para o javascript e CSS, os botões podem ser facilmente aplicados a qualquer parte do seu site. Uma dica é experimentar usar essa técnica não apenas para botões, mas também para menus, imagens e outros elementos interativos, tomando sempre cuidado para não exagerar na dose.

.centralizado {
width: 600px;
height: 300px;
position: absolute;
top: 50%;
margin: -150px 0 0 0;
}

Entenda o que fizemos em cada uma das linhas:

width: 600px : configuramos a largura do elemento que queremos centralizar;
height: 600px : configuramos a altura do elemento que queremos centralizar;
position: absolute : deixamos o elemento posicionado absolutamente na página;
top: 50%; : posicionamos o topo do elemento no meio da página, verticalmente;
margin: -150px 0 0 0; : para compensar, colocamos uma margem superior com a metade da altura;

Pronto, basta adicionar a classe “centralizado” ao seu elemento e ele ficará posicionado no centro vertical da sua página.
E claro, você pode usar o mesmo princípio se quiser centralizar também na horizontal, basta fazer duas pequenas alterações no código, colocando a propriedade left e alterar a margem esquerda. Veja:

.centralizado {
width: 600px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -300px;
}

O que alteramos do código anterior:

left: 50% : posicionamos a borda esquerda do elemento no meio da página, horizontalmente;
margin: -150px 0 0 -300px : para compensar, colocamos uma margem esquerda com a metade da largura;

É isso aí, agora o elemento ficará posicionado bem no centro da página, horizontalmente e verticalmente. Veja aqui o exemplo publicado.

Vantagens em usar JS para zebrar uma tabela:

• Se a sua tabela for extensa, com muitas linhas, isso vai poupar bastante tempo.
• Se os dados vêm de uma base dinâmica, você não precisará alterar a maneira como sua tabela é montada.
• Maior liberdade para mover linhas acima e abaixo sem se preocupar em manter a ordem das classes.
• Se depois o código tiver que ser editado por alguém sem muita intimidade com HTML, você não corre o risco de ficar com a tabela desconfigurada.
• Se você mudar de idéia e quiser tirar o fundo de todas as linhas basta deletar a função, ao invés de ter que editar a tabela toda.

O código da função:

<script>
function zebra(id, classe) {
var tabela = document.getElementById(id);
var linhas = tabela.getElementsByTagName("tr");
for (var i = 0; i < linhas.length; i++) { 
((i%2) == 0) ? linhas[i].className = classe : void(0);
}
}
</script>

Basicamente, funciona da seguinte forma: a função aceita dois parâmetros, o id da tabela na qual será aplicada a ‘zebra’ e o nome da class que você definiu no seu css. Então um loop percorre toda a tabela, atribuindo a classe definida em todas as linhas ímpares.

O código CSS:

tr.zebra td {background:#eee;}

E para usá-la, basta incluir a seguinte linha após a tabela:

<script> zebra('minhatabela', 'zebra'); </script>

Veja o exemplo

Então segue aqui uma tabela que eu costumo usar na hora de decidir estes dois fatores, largura e altura:

Alguns bons links onde procurar mais informações sobre o assunto:
Jakob Nielsen – Screen Resolution and Page Layout
Screen Resolutions and Better User Experience – Smashing Magazine
Methodologie Browser Size Test

Não vou colocar aqui simplesmente como aplicar bordas em imagens, isso todo mundo já sabe. O que pouca gente sabe é que também é possível aplicar padding e background em imagens via CSS. A princípio, pode parecer estranho aplicar fundo em imagens, mas isso pode ser usado de maneira bastante versátil, veja os exemplos abaixo:

Como funciona?

Simples: nestes exemplos as bordas em si são apenas a última parte do ‘contorno’ das imagens, são os traços mais finos (sólido na primeira e tracejado na segunda). O que vemos no espaço entre as bordas e as imagens é o background e o tamanho deste espaço é determinado pelo valor do padding. Veja o esquema:

Como disse, nada demais. Agora o código CSS:

.efeito1 { border:1px solid #ccc; background:#fff; padding:12px; }
.efeito2 { border:4px dashed #97915f; background:#e1dc69; padding:10px; }
.efeito3 { border:1px dotted #d5d5cb; background:url(bg_stripes.png); padding:12px; }
.efeito4 { border:1px solid #d5d5cb; background:url(bg_pattern.gif); padding:12px; }

Dessa forma podemos combinar todas as variações de borda (cores, sólida, tracejada, pontilhada, etc) com o background, no qual podemos usar cores, como nos dois primeiros exemplos, ou imagens, como nos dois últimos.

Faça o download dos arquivos.

Estas são amostras simples do que é possível fazer, lembre-se que usamos apenas 3 propriedades. Podemos combiná-las com muitas outras para alcançar resultados ainda melhores, no próximo post trarei mais idéias.

Primeiro: o Firefox também tem seus bugs, a própria Mozilla Foundation mantém uma página exclusivamente dedicada à eles, a Bugzilla. Claro, é verdade que se o erro for apenas no Firefox, é possível simplesmente corrigir o CSS para ele e usar um hack do IE para que as coisas fiquem perfeitas nos dois browsers.
Porém, a questão é: O Firefox 3 interpreta algumas propriedades diferentemente do Firefox 2, o que hora ou outra pode causar problemas. E nesses casos é preciso alterar o CSS para apenas uma das versões.

Segundo: Em alguns casos é necessária uma correção urgente, que não demande tempo para vários testes, alterações no HTM ou várias linhas de CSS. Se o seu site tem milhares de acessos por hora, o ideal é corrigir primeiro, refinar depois.

Seguem então algumas soluções que venho usando:

CSS Hack apenas para Firefox 2

Se o seu site está apresentando erro apenas no Firefox 2, agradeça. É o cenário mais simples de resolver, basta usar o seguinte hack:

#meudiv { background:red; } /* todos os navegadores */
#meudiv[id=meuDiv] { background:green; }/* só Firefox 2 */

Como funciona: usamos o seletor de atributos entre chaves para selecionar todos os elementos que tenham id = ‘meuDiv’. Porém perceba que o ‘D’ está maiúsculo. Só o Firefox 2 é case-insensitive, ignorando letras maiúsculas e minúsculas. Ou seja, para o Firefox 2 meudiv é igual a meuDiv, para todos os outros navegadores não.

CSS Hack para Firefox 3

O problema só aparece no Firefox 3? Bem, aqui as coisas complicam um pouco. Isso porque todos os hacks específicos para esta versão não são totalmente confiáveis em todas as plataformas [windows, mac, linux]. O único hack para FF3 que se comporta de maneira constante em todos os sistemas tem um porém: é reconhecido também pelo IE7:

#meudiv { background:red; } /* todos os navegadores */
#meudiv, x:-moz-any-link, x:default { background:yellow; } /* Firefox 3 e IE7 */

Então é preciso, ao final, adicionar uma linha para restabelecer o valor para o IE7:

#meudiv { background:red; } /* todos os navegadores */
#meudiv, x:-moz-any-link, x:default { background:yellow; } /* Firefox 3 e IE7 */
#meudiv { *background:red; } /* Restabelece valor para o IE7 */

E, só pra relembrar: ‘Hack’ para qualquer Firefox

Se o problema está aparecendo nas duas versões do Firefox, a solução mais simples é corrigir o CSS focando este erro e, caso o erro venha a ocorrer no IE após a correção, utilizar hacks para o navegador da Microsoft:

background-color:red; /* Corrige o problema no FF */
*background-color:blue; /* Retorna o valor para IE */ 

Se tiver dúvida dê uma olhada aqui: CSS Hacks – IE6, IE7, Firefox

Enfm, mais hacks… Eu gostaria de não precisar deles, gostaria de escrever meu CSS 100% válido e não ter que redeclarar margin, padding, float duas, três vezes no mesmo código por causa de um ou outro navegador. Mas infelizmente isso não é possível..

Então faça o favor de dar um pulo até lá e votar agora mesmo neste humilde blog, de preferência colocando 5 estrelas. :)

 <html>
<head>
<link rel="stylesheet" type="text/css" href="estilos.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="estilos-para-ie6.css" />
<![endif]-->
</head>
<body>
<div id="menu">conteúdo do site....</div>
</body>
</html>

Tudo o que estiver dentro das tags <!–[if IE 6]> e <![endif]–> será interpretado apenas pelo Internet Explorer 6. Dessa forma você pode escrever o seu CSS sem nenhum hack, com código 100% válido, e colocar todas as correções em um outro arquivo específico para o IE. A desvantagem é ter 2 arquivos CSS ao invés de um, o que pode ser prejudicial em termos de atualização e manutenção.

Ok, nenhuma grande novidade até aqui.

Mas e se, ao invés de usar os comentários condicionais para linkar um novo CSS, os usássemos para fazer o seguinte:

 <html>
<head>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<!--[if IE 6 ]>
<body class="ie">
<![endif]-->
<!--[if !IE 6]>-->
<body>
<!--<![endif]-->
<div id="menu">conteúdo do site....</div>
</body>
</html> 

Entendeu? Isso faz com que a classe “ie” [class="ie"] seja aplicada apenas quando o browser utilizado é o Internet Explorer 6 [if IE 6]. Caso contrário o <body> fica sem nenhuma classe [o sinal "!" significa "não igual"]. Assim, podemos escrever nosso CSS da seguinte maneira:

div#menu { color: inherit; } /* linha interpretada por todos os browsers */
.ie div#menu { color: #ff8000; } /* linha interpretada apenas pelo IE 6 */

Ou seja, podemos colocar todas as correções precedidas pelo seletor de classe “.ie”, dessa forma apenas o IE 6 irá interpretá-las. Eliminamos assim a necessidade de um segundo arquivo e ficamos livres também dos hacks, podendo então escrever CSS 100% válido.

Veja o exemplo