Css

Gradiente

Uma das features mais interessantes é a criação de gradientes apenas utilizando CSS. Todos os browsers mais novos como Safari, Opera, Firefox e Chrome já aceitam essa feature e você podeutilizá-la hoje. Os Internet Explorer atuais (8 e 9) não reconhecem ainda, contudo você poderá utilizar imagens para estes browsers que não aceitam essa feature. Você pode perguntar: "Mas jáque terei o trabalho de produzir a imagem do gradiente, porque não utilizar imagens para todos os browsers?" Lembre-se que se utilizar uma imagem, o browser fará uma requisição no servidor buscando essa imagem, sem imagem, teremos uma requisição a menos, logo o site fica um pouquinho mais rápido. Multiplique isso para todas as imagens de gradiente que você fizer e tudo realmentefará mais sentido.

Deixe para que os browsers não adeptos baixem imagens e façam mais requisições.

Veja abaixo um exemplo de código, juntamente com o fallback de imagem:

div {

width:200px;

height:200px;

background-color: #FFF;

/* imagem caso o browser não aceite a feature */

background-image: url(images/gradiente.png);

/* Firefox 3.6+ */

background-image: -moz-linear-gradient(green, red);

/* Safari 5.1+, Chrome 10+ */

background-image: -webkit-linear-gradient(green, red);

/* Opera 11.10+ */

background-image: -o-linear-gradient(green, red);

}

Atenção: Até que os browsers implementem de vez essa feature, iremos utilizar seus prefixo.

Como ficou:

"Stops" ou definindo o tamanho do seu gradiente

O padrão é que o gradiente ocupe 100% do elemento como vimos no exemplo anterior, mas muitas vezes queremos fazer apenas um detalhe.

Nesse caso nós temos que definir um STOP, para que o browser saiba onde uma cor deve terminarpara começar a outra. Perceba o 20% ao lado da cor vermelha. O browser calcula quanto é 20% daaltura (ou largura dependendo do caso) do elemento, e começa o gradiente da cor exatamente ali.O código de exemplo segue abaixo:

/* Firefox 3.6+ */

background-image: -moz-linear-gradient(green, red 20%);

/* Safari 5.1+, Chrome 10+ */

background-image: -webkit-linear-gradient(green, red 20%);

/* Opera 11.10+ */

background-image: -o-linear-gradient(green, red 20%);

Veja o resultado:

Se colocarmos um valor para o verde, nós iremos conseguir efeitos que antes só conseguiríamos no Illustrator ou no Photoshop. Segue o código e o resultado logo após:

/* Firefox 3.6+ */

background-image: -moz-linear-gradient(green 10%, red 20%);

/* Safari 5.1+, Chrome 10+ */

background-image: -webkit-linear-gradient(green 10%, red20%);

/* Opera 11.10+ */

background-image: -o-linear-gradient(green 10%, red 20%);

Perceba que o tamanho da transição vai ficando menor à medida que vamos aumentando as porcentagens.Muito, mas muito útil.