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!
