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/

Se você trabalha em um lugar onde freqüentemente precisa editar código escrito por outras pessoas sabe como é ruim e contra-produtivo pegar um HTML, CSS ou PHP mal organizado, sem indentação e nenhum comentário. Isso pode trazer muitas dores de cabeça e fazer uma simples alteração virar um inferno.

Saiba que o Dreamweaver tem um comando muito interessante para resolver esse problema: Commands > Apply Source Formatting. Por mais bagunçado que esteja o código, basta um clique neste comando e o Dreamweaver vai deixá-lo perfeitamente estruturado, indentado e muito mais fácil de ler e entender. Vale a pena até adotar como padrão para a sua empresa, já que não dá trabalho nenhum e permite que todo mundo entregue código com a mesma formatação. Funciona com códigos HTML, CSS, PHP, JavaScript e muitos outros.

Criação de aplicativos AIR

Você já deve saber do incrível potencial que a plataforma AIR da Adobe representa para desenvolvedores e provavelmente já deve até usar algum aplicativo desenvolvido com ela, como por exemplo TweetDeck, Grooveshark e NYTimes Reader só para citar alguns. Se ainda não sabe, sugiro que vá pesquisar agora mesmo. Principalmente porque em breve boa parte dos celulares Android serão compatíveis com aplicativos AIR.

Pois bem, ao contrário do que muitos pensam, aplicativos AIR não precisam ser necessariamente desenvolvidos com Flash ou Flex: você também pode usar HTML, CSS e imagens para criar um App e fazer a comunicação com banco de dados via AJAX. Acredite, é extremamente fácil. Tudo o que você precisa fazer é baixar a extensão AIR para o seu Dreamweaver (fornecida gratuitamente pela Adobe). Com ela você vai poder empacotar todos os arquivos usados no seu app (HTML, imagens, CSS, JS) num único instalador AIR e distribuir para download. Eu já testei e é algo sensacional, recomendo este pequeno tutorial (em inglês): Create your first HTML-based AIR application with Dreamweaver.

Para finalizar: Ctrl+D

E como última dica separei um atalho que facilita muito a vida de quem usa o Dreamweaver para gerenciar um projeto com múltiplos arquivos linkados entre si, sejam várias páginas HTML ou arquivos relacionados (JS, CSS). Quando se tem um projeto assim é comum a necessidade de ir de um arquivo para outro, e ter que ficar navegando pela pasta para encontrar aquele arquivo para onde aponta o link é bem chato, ou mesmo ter que ficar copiando o nome, abrir arquivo, colar o nome, etc.., etc…

Então aqui vai um ótimo atalho: Ctrl+D. Toda vez que você estiver editando o código com o cursor de texto piscando sobre um link para um arquivo externo, basta pressionar as teclas Ctrl+D que o Dreamweaver abrirá automaticamente aquele arquivo, seja ele um HTML, PHP, JS ou CSS.

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.

Para fazer uma boa limpeza e otimizar seu código/conteúdo, o ideal é saber exatamente onde é possível melhorar o desempenho, ou seja, saber quais elementos demoram mais a ser carregados e assim definir quais podem ser otimizados ou até decartados.

Sabendo disso, imagine o quão útil esse relatório pode ser (usando como exemplo o site bluebus.com.br):

O relatório acima contém a lista completa de todos os elementos carregados pela página, seu peso e o tempo que levou o seu download. Também informa o peso total da página e o tempo total de download. Perfeito para iniciar um bom trabalho de otimização.

Gerando o relatório para o seu site

E é muito fácil obter um relatório assim para o seu site, são 3 passos (supondo que você já tenha o Firefox instalado):

1 – Instale o Firebug e reinicie o Firefox.
2 – Abra o Firebug pressionando F12 e Clique na aba “rede” (ou “net” se a sua versão for em inglês).
3 – Agora basta entrar no seu site normalmente, o relatório será gerado instantâneamente.

Pronto, fácil assim. Agora você pode estudar cada um dos componentes da página e otimizá-los para melhorar o desempenho do seu site. Uma dica: imagens e javascript são os vilões mais comuns.

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..