Início > CSS, Ferramentas > Layer Styles – Gradientes em CSS3

Layer Styles – Gradientes em CSS3

Você conhece esta tela do Photoshop?

Ela é responsável por aplicar gradientes e alguns efeitos adicionais, como sombras e efeitos nas bordas.

Há alguns meses atrás, antes do CSS3, o que faríamos pra aplicar um fundo gradiente em uma DIV? Exportaríamos uma imagem com a altura da DIV e com largura de 1 px e aplicaríamos ao fundo usando repetição.

Mas com o CSS3 é possível gerar o gradiente usando apenas o código. E é facilmente interpretado pelos IPads e afins de maneira mais rápida.

O problema é ficar gerando na mão, pensando no que fazer, como fazer, o que usar, sombras, bordas, erros, enfim, é meio xarope. Tem que ter paciência.

Mas isso não é mais necessário! Utilizando um web system chamado Layer Styles isso tudo é feito automatizado. E acrediteo o print da tela acima é do Layer Styles e não do Photoshop!

Depois de deixar da maneira que deseja, clique no botão CSS Code no rodapé a esquerda. Lá você terá gerado o seu código em CSS3. É só copiar e colar. Simplesmente brilhante!


border: 1px solid black;
background-image: -moz-linear-gradient(top, #fcfcfc, #f7f7f7 3%, #f2f2f2 12%, #d9d9d9 90%, #bfbfbf);
background-image: -webkit-gradient(linear, center top, center bottom, from(#fcfcfc), to(#bfbfbf), color-stop(3%, #f7f7f7), color-stop(12%, #f2f2f2), color-stop(90%, #d9d9d9));
box-shadow: 0 1px 5px rgba(0,0,0,0.75);

Acesse o Layer Styles e gere seu gradiente rapidinho, sem perder tempo.

http://layerstyles.org/builder.html

Divirta-se e inspire-se.

Anúncios
Categorias:CSS, Ferramentas
  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: