Arquivo

Posts Tagged ‘gradiente’

Gradiente em CSS3

fevereiro 18, 2011 Deixe um comentário

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ê!

Categorias:CSS, Tutoriais Tags:,
%d blogueiros gostam disto: