Início > CSS, Tutoriais > Gradiente em CSS3

Gradiente em CSS3

Há alguns meses atrás, para colocar um gradiente no fundo de um cabeçalho ou como background teríamos que abrir o querido Fireworks ( ou pra quem prefere, Photoshop ( Puxa! Você ainda usa o Photoshop na web? ) ), fazer o gradiente da altura que pretendíamos, colocar 1px de largura, exportar como JPG, GIF ou PNG e inserir no nosso código HTML ou no CSS a URL da imagem como background.

Mas com o CSS3, isso é coisa do passado. Infelizmente, alguns browsers, no alto da incompetência dos desenvolvedores, fecham os olhos para o mundo e demoram meses ( as vezes anos né, Sr. IE ) para interpretar as maravilhas e as novidades na internet.

Prova disso é que até o momento apenas o Safari e, em partes, o Google Chrome interpretam bem o HTML5 e o CSS3. Teste agora mesmo o seu browser: http://acid3.acidtests.org/

De qualquer maneira, voltando ao assunto deste post, com o CSS3 é possível fazer um gradiente utilizando apenas código. e nada muito complicado não.

Exemplo de Gradiente com CSS3 utilizando webkit e moz:

 

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.47, rgb(106,37,245)),
color-stop(1, rgb(255,255,255))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(106,37,245) 47%,
rgb(255,255,255) 100%
);

 

Simples e rápido.
Agora pra facilitar ainda mais a sua vida, existe o site http://gradients.glrzad.com/.

É só arrastar, clicar, e pronto. O código já está do lado.

Não deixe de usar CSS3 só porque alguns browsers não interpretam. Por enquanto, faça de 2 maneiras. Identifique o browser e faça o gradiente da maneira que ele interpreta ( é, ainda terá que usar as imagens de vez em quando ).

Mas lembre-se – os errados são eles, e não você!

Anúncios
Categorias:CSS, Tutoriais Tags:,
  1. Nenhum comentário ainda.
  1. No trackbacks yet.

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

%d blogueiros gostam disto: