Tutorial: Background do titulo dos Gadgets gradiente

Tumblr_mcmptcafgk1r29x9mo1_500_large
Hello my Dears!
Gente, eu tô very very Happy hoje! super afim de postar e tals! kkk' mas enfim. Bom, o tuto de hoje é baseado no blog Cherry Bomb (www), eu percebi que os gadjets, titulo do post e tudo mais, não eram backgrounds de imagens, mas era um código HTML. Eu gamei naquilo! Comecei a vasculhar e tals, e consegui chegar ao grand finale! olha aí o resultado:

O bom disso, é que tipo, não tá parecendo realmente gradiente, tá parecendo mais um botão, com reflexo, aai é tudo! Bom, vamos compartilhar?
Continuar!



Bom, eu adorei esse código, salvou muito a minha vida. rs',  Vamos lá, então?
Primeiro, você vai escolher duas cores, a de cima e a de baixo. Agora, procure por h2 { e cole o seguinte código no lugar de background:


background: #CIMA;
background: -moz-linear-gradient(top, #CIMA 1%, #BAIXO 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#CIMA), color-stop(100%,#BAIXO));
background: -webkit-linear-gradient(top,  #CIMA 1%,#BAIXO 100%);
background: -o-linear-gradient(top,  #CIMA 1%,#BAIXO 100%);
background: -ms-linear-gradient(top,  #CIMA 1%,#BAIXO 100%);
background: linear-gradient(to bottom, #CIMA 1%,#BAIXO 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CIMA', endColorstr='#BAIXO',GradientType=0 );

Onde está de lilás é a cor que você quer em cima, lembrando que todas as cores #CIMA devem ser iguais.
Onde está de rosa é a cor que você quer em baixo, que também todas as cores #BAIXO devem ser iguais.
Use esta tabela de cores (www) para procurar a sua favorita!

Bom, é isso aí! se você quiser arredondar, use o seguinte código:

border-radius: 15px 15px 15px 15px;

O 1º 15px é a parte esquerda de cima, o é a parte direita de cima, o é a esquerda de baixo e o é a parte direita de baixo. Divirtam-se com os códigos! Lembrando que quanto maior o número, mas arredondado fica!

Espero que tenham gostado gente!

Beijos!

18 comentários:

Júlia Paulucci disse...

Liindo o blog ! AMEI AMEI AMEEI ... Estou seguuindo aqui ta? Segue o meu tbm?
sentierodellerose1.blogspot.com

Beijos

Nati Farias disse...

Aah claro flor! Sempre! Muito obrigadaa! *----*

Matheus Philippe disse...

Oi adorei seu blog, é muuito bonito. To seguindo ele, poderia visita o meu? http://mundodosutilitarios.blogspot.com.br/. Também ta rolando um concurso lá ficaria muito feliz caso se inscreva. Sucesso com o blog é muito LINDO :)(:

Ana Silva disse...

Fica lindo esse efeito, nunca tinha visto o tutorial dele antes. Beijos, Adolescentes do oposto (blog no perfil)

Rosane10 disse...

Fica muito bonito, legal, gostei, obrigada por seguir meu blog já te sigo também. bjs
no-planetaroom

Nati Farias disse...

Brigada gente *-* Pode ter certeza, eu tô seguindo, comentando e participando de tudo hein! Beijos;*

Mallu Lima disse...

Amei o tuto, já seguindo tb :)

Beijos,
http://meusdvaneios.blogspot.com.br/

Nati Farias disse...

oown' brigada floor! Já vou seguir também ;)

Abbey disse...

Adorei o tuto.
Parabéns pelo blog, é lindo! <3

seguindo, segue lá? www.oh-star.org

Nati Farias disse...

CLARO FLOR ^^

Lari. disse...

Esse tutorial é ótimo, né? Amooo! Ah, já seguindo esse blog perfeito...

Beijos ♥ Jeito Único

Nati Farias disse...

oown' brigada flor ♥

Mari Mari disse...

Bem, meu blog tem um layout muito simples pra isso, mas eu amei o tutorial.

Nati Farias disse...

hmmmm mas mesmo assim, brigada pela visita :D

Chris Ferreira disse...

Amei!!!
Beijos
Chris
http://inventandocomamamae.blogspot.com.br/

Nati Farias disse...

Brigada linda *-* tmb adoreei seu blog *o*

Anna {GQ} disse...

Puts, fica lindo! Nossa, amei meeeesmo. Parabéns por esse blog lindo, já te sigo ^^

garota-queen.blogspot.com ♥

Nati Farias disse...

Brigadão hein flor ^^
Beijos ;*