Efeito Degradê

Efeito degrade

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-