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 2º é a parte direita de cima, o 3º é a esquerda de baixo e o 4º é 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!
17 comentários:
Liindo o blog ! AMEI AMEI AMEEI ... Estou seguuindo aqui ta? Segue o meu tbm?
sentierodellerose1.blogspot.com
Beijos
Aah claro flor! Sempre! Muito obrigadaa! *----*
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 :)(:
Fica lindo esse efeito, nunca tinha visto o tutorial dele antes. Beijos, Adolescentes do oposto (blog no perfil)
Fica muito bonito, legal, gostei, obrigada por seguir meu blog já te sigo também. bjs
no-planetaroom
Brigada gente *-* Pode ter certeza, eu tô seguindo, comentando e participando de tudo hein! Beijos;*
Amei o tuto, já seguindo tb :)
Beijos,
http://meusdvaneios.blogspot.com.br/
oown' brigada floor! Já vou seguir também ;)
Adorei o tuto.
Parabéns pelo blog, é lindo! <3
seguindo, segue lá? www.oh-star.org
CLARO FLOR ^^
Esse tutorial é ótimo, né? Amooo! Ah, já seguindo esse blog perfeito...
Beijos ♥ Jeito Único
oown' brigada flor ♥
Bem, meu blog tem um layout muito simples pra isso, mas eu amei o tutorial.
hmmmm mas mesmo assim, brigada pela visita :D
Brigada linda *-* tmb adoreei seu blog *o*
Puts, fica lindo! Nossa, amei meeeesmo. Parabéns por esse blog lindo, já te sigo ^^
garota-queen.blogspot.com ♥
Brigadão hein flor ^^
Beijos ;*
Postar um comentário