Big Tutorial: Efeito degradê com CSS3

23 de jan de 2012


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!

45 comentários:

  1. Oi Anny, gostei bastante, é um efeito muito lindo.
    Beijos

    ResponderExcluir
  2. Desculpa os dois coments, você aceita afiliação?
    Bjs
    TDiaryofteens.blogspot.com

    ResponderExcluir
  3. Adorei o tutorial,o efeito fica mega lindo!!
    Aceita afiliação?

    Bjs

    http://magicmih.blogspot.com/

    ResponderExcluir
  4. Olá amore adorei a postage e vou usar no meu blog!k olha tava pensando eu pressiso de um pouco de divulgação pq tenho 111 seguidores,e queria ter mais!Se eu colocasse seu link de divulgação na minha coluna vc botaria meu baner de parceiria?Bom me responde por recado no blog....
    http://editionromeuejulieta.blogspot.com
    Obrigada

    ResponderExcluir
  5. OMG que lindo esse efeito!


    beijos
    http://www.manahatori-teengirls.blogspot.com/

    ResponderExcluir
  6. Gostei, parabéns!!!

    Um abraço e um beijo, Becky

    ~http://queloucura-blog.blogspot.com~

    ResponderExcluir
  7. Oii!
    Muitoo lindo seu blog, hein?
    Você aceita parceria?
    mundorosaachock.blogspot.com
    Bjoos

    ResponderExcluir
  8. O efeito é lindo! Vou usa-lo no meu próximo layout! Any, vota no hc no concurso do doces sapatos de veludo/secrets of cherry? os links: http://gabiislol.blogspot.com/
    http://sapatosdeveludo.blogspot.com/
    as enquetes estão nas barras lateris. desde já, obrigada!

    ResponderExcluir
  9. Desculpe, acabei de comentar, mas queria saber se você gostaria de ser afiliada do Happy Charllote! www.happy-charllote.blogspot.com
    beijos, hayala.

    ResponderExcluir
  10. Muito bom esse tutorial :D
    http://docevenenoblog.blogspot.com/

    ResponderExcluir
  11. Ameei esse tutorial :)
    bjoookas
    http://sooulteen.blogspot.com/

    ResponderExcluir
  12. Adorei!!!
    Nem me lembrava dessa propriedade...lembro de ter usado ela logo que saiu o css3 mas ainda não funcionava direito hehehe

    Ótimo tuto, como sempre flor ♥

    ResponderExcluir
  13. Nossa que efeito lindo, adorei! Com certeza vou usar no próximo lay...

    Queria te pedir um favorzinho... Vota no Garota Inocente na 2º etapa do concurso "Cute Blog 2012"? A enquete está na barra lateral do blog Garota Ambulante - http://www.garotambulante.com/
    Conto com o seu voto.

    Kisses ♥
    http://bloggarotainocente.blogspot.com/

    ResponderExcluir
  14. Oii amr, seu blog é mt lindo! aceita afiliação? beijinhos
    http://innocenceteen.blogspot.com/

    ResponderExcluir
  15. Fica um efeito fantástico, bem diferente!
    Prefiro no título de Gadgets.. ><'

    Beijos,
    http://blogtruegirl.blogspot.com/

    ResponderExcluir
  16. Que efeito lindo *o* AMEI
    Seguindo aqui, flor.
    Layout e post novinho lá no Refúgio Teen, já viu?
    Beijos ;*

    refugio-teen.blogspot.com
    rascunhos-dos-sentimentos.tumblr.com

    ResponderExcluir
  17. Nossa ADOREI, sseu blog também é MUUUUITo lindo (:


    http://meninoironia.blogspot.com/

    ResponderExcluir
  18. Anny, você pode fazer um tutorial explicando como colocar esse balão de comentário e a data ao lado do título do post?? Beijinhos
    http://cherrysweetofficial.blogspot.com/

    ResponderExcluir
  19. Esse efeito é muito lindo anny, adorei. Talvez eu use no blog, bjs

    http://dreamsofagirl-blog.blogspot.com

    ResponderExcluir
  20. Seguidora nº 550 *-* Parabéns seu blog é liindo ! Adorei!
    http://deliriosdeestilo.blogspot.com/

    ResponderExcluir
  21. Que legal, adorei o efeito, é muito lindo.

    http://iasmincruz.blogspot.com/

    ResponderExcluir
  22. O efeito é muito lindo mais cá entre nós... tem que saber usa-lo a seu favor! Porque dependendo do modo em que utilizado fica feio... não quero arriscar!
    Beijinhos linda!

    ResponderExcluir
  23. Oi,já coloquei o GI lá nos meus afiliados!

    Bjs

    http://magicmih.blogspot.com/

    ResponderExcluir
  24. Noossa,que lindo o efeito!
    Ameei...é bem difícil de fazer mais dá um resultado ótemoo! \Õ/

    Beeijo amore!
    http://blogmymemories.tk

    ResponderExcluir
  25. Oi flor ....
    Eu adoreeei o seu blog, muito fofinho, já estou te seguindo ok??? Da uma passadinha lá no meu blog pra você conferir, e deixa a sua opinião lá ;)
    beijinhos
    http://jujuzinhareis.blogspot.com/

    ResponderExcluir
  26. Oi!!
    Adorei seu blog, achei lindo!
    Gosataria de fazer parceria, aceita?
    O nome do meu blog é: Little Snacks
    Bjs!

    http://claritchah.blogspot.com/

    ResponderExcluir
  27. Olá querida,
    Ameei seu blog e estou seguindo rs'
    Se poder passar no meu comentar e seguir ;D
    Beijos com sabor de Caramelo <3
    http://chuvaadenovembro.blogspot.com/p/sobre-mim.html

    ResponderExcluir
  28. Nossa qee legal flor
    o efeito fica lindo
    Amei o seu blog ja estou seguindo !!

    http://souzadiinha.blogspot.com
    Beijoos :)

    ResponderExcluir
  29. Adorei o blog! como você aprendeu css e html?

    ResponderExcluir
  30. Oii Anny, é a 1ª vez que venho aqui e adorei seu blog, ele é lindo, organizado e tm ótimas postagens..enfim, amei tudo!! Já estou te seguindo e te convido para visitar o meu..é simples mas de bom coração..suashuahs..ah vc aceita afiliação??Beijos...

    http://espacofemininoaqui.blogspot.com

    ResponderExcluir
  31. Amei tanto esse blog que já salvei nos favoritos pra voltar sempre.
    Eu to na segunda fase do concurso Trechy teen, e preciso de ajuda! Se puder, entra nesse link: http://s2meh.blogspot.com/p/parcerias.html
    e vota em exagerada e inconstante.
    Desde já eu agradeço, sempre que precisar de algo pode passar lá no blog.
    Beijos

    ResponderExcluir
  32. Há, que lindo esse efeito, talvez quando trocar o lay, eu use, beijos

    ResponderExcluir
  33. Gostei desse efeito
    o result é lindo
    ah participa do concurso q está rolando no gp e no annalaurasla
    confira : http://gpurple.blogspot.com/2012/01/concurso-smile-ag.html

    bjs

    ResponderExcluir
  34. Muito lindo o efeito, ótimo tutorial. Uma pena que eu não saiba mexer com CSS!
    Post Novo Comentaa? ---> Rosa Chiclete
    Beiijos!!!

    ResponderExcluir
  35. Oi flor!Amei o seu blog!Parceria ou afiliação?
    amoo2.blogspot.com

    ResponderExcluir
  36. Ameeeeeeeeeeei! *-*

    http://pequenairritante.blogspot.com

    ResponderExcluir
  37. Oiee meu nome é vanessa e eu amei seu blog ele é a coisa mais lindaa que eu já vi estou seguindo vc pode seguir de volta

    www.livina-teendream.blogspot.com

    bjoss vá

    ResponderExcluir
  38. ah desculpa sou eu de novo se tem uma vaga de affilado posso virar o nome é just teen valeu

    ResponderExcluir
  39. Heyy somos parceiras! (laura5mais), meu blog mudou de nome, então pesso que arrume! Agora é FC Sel Gomez BR! Kissus
    swettystar.blogspot.com

    ResponderExcluir
  40. O efeito fica lindo. Mandou bem no CSS!

    Gostei bastante do seu blog, é lindo *-* Vou seguir.

    Bjonas e fique com Deus <3

    Camilla Martins - sugar-dance.org

    ResponderExcluir
  41. Caramba que efeito legal! Vou usar no meu próximo layout *--* Vou visitar aqui sempre já que voltei de viajem hehe! Flor, vc aceita afiliação com o meu blog? :) Um beijão!
    http://sweettime-blog.blogspot.com/

    ResponderExcluir
  42. fica uma gracinha *-* flo,meu primeiro post,eu fiz hj,dá uma olhadinha?

    ResponderExcluir
  43. A Anny, ese efeito fica muito lindo *w*

    E Parabéns pela a meta atingida!
    rainhafashionista.blogspot.com

    ResponderExcluir
  44. O efeito fica muito lindo! Eu vou colocar lá no meu blog!
    Nos títulos da sidebar!
    Vou colocar os créditos ;D
    Beijoos


    http://imagegirlpfs.blogspot.com/

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.