Gradiente em CSS3

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ê pode utilizá-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 realmente fará 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 prefixos.

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 cordeve terminar para começar a outra. Perceba o 20% ao lado da cor vermelha. O browser calcula quanto é 20% da altura (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%, red 20%);

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

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s