Big Tutorial: Efeito degradê com CSS3

Big Tutorial: Efeito degradê com CSS3

Oi oi gente, sabe aquele efeito gradiente (hiper mega lindo) que fazemos no photo filtre e no photoshop? Agora você pode traze-lo pra seu blog sem ter que criar e hospedar imagens, apenas com CSS, no caso, CSS3. Bora ver como?

Vou deixar o código primeiro e depois como aplicar ele em diversos lugares ok? (O que não quer dizer que você precisa aplicar em todos lugares que eu ensinar -até porque demais fica estranho- faça só onde quiser ok? u.u)

Gradiente horizontal (exemplo aqui):

background: #CCCCCC; /* browsers sem suporte a css3 */

background: -webkit-gradient(linear, left top, right top, from(#CCCCCC), to(#FF0080));/* webkit browsers */

background: -moz-linear-gradient(left, #CCCCCC, #FF0080);/* firefox3.6+ */

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CCCCCC', EndColorStr=' #FF0080');/* IE */

Gradiente vertical (exemplo aqui):

background: #CCCCCC; /* browsers sem suporte a css3 */

background: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC), to(#FF0080));/* webkit browsers */

background: -moz-linear-gradient(top, #CCCCCC, #FF0080);/* firefox3.6+ */

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#CCCCCC', EndColorStr=' #FF0080');/* IE */

Mude as cores (#CCCCCC e #FF0080) como preferir com essa tabela aqui: [www]

Aplicar no fundo do titulo da postagem

Vá em design > Editar HTML > Aperte F3 ou Ctrl+F e procure por:

/* Posts

E antes de fechar } cole um dos código que deixei lá no começo do post (degradê horizontal ou vertical) e faça as alterações na cor como quiser. 

Poderás adicionar uma borda arredondada, colando abaixo do código do degradê um desses aqui:

Bordas arredondadas em todos os cantos:

border-radius: 10px;

Bordas arredondadas no topo do lado esquerdo e na parte de baixo do lado direito.

border-top-left-radius: 10px;
border-bottom-right-radius: 10px; 

Aplicar no fundo do gadget (cada gadget em uma caixinha separada)

Vá em design > Editar HTML > Aperte F3 ou Ctrl+F e procure por:

/* Widgets

E antes de fechar } cole um dos código que deixei lá no começo do post (degradê horizontal ou vertical) e faça as alterações na cor como quiser. 

Para aplicar bordas arredondas é o mesmo procedimento que deixei no tutorial acima (escolha uma das bordas e cole abaixo do código do degradê)

Aplicar no fundo dos títulos da sidebar  (créditos: Spazio DM)

Vá em design > Editar HTML > Aperte F3 ou Ctrl+F e procure por ou algo parecido:

.footer-inner .widget h2, 
.sidebar .widget h2 {
padding-bottom: .5em;

Logo abaixo cole um dos código que deixei lá no começo do post (degradê horizontal ou vertical) e para aplicar bordas arredondas é o mesmo procedimento que você já conheceu ali em cima -hihi-

Dica da Anny: Você pode aplicar os códigos do efeito gradiente em qualquer lugar que quiser, é só saber onde fica o código do elemento que você quer adicionar o efeito e colar o código abaixo dele. 

OBS: Testado somente no template Travel!