• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

3 de dezembro de 2012

Efeito Degradê No blog

Tumblr_m310fcrdxr1qcri28o1_500_large
fiz origami hoje na escola, era uma árvore de natal
 Olá gente!
Tenho uma noticia não muito boa, o blog "O meu brilhante mundo" foi removido pelo Google, parece que ele quer que ela comprove que tem mais de 13 anos, e parece que ela tem que ir até o governo para resolver isso, tomara que ela consiga resolver isso, seu blog era lindo demais e ela é uma ótima pessoa!
Bem, o tutorial que eu estou trazendo hoje é do Part Of Me.
Vocês puderam ver que o efeito degradê não fica apenas na barra de rolagem como também fica no título de gadget, realmente é um toque sofisticado ao seu blog que combinadas com boas cores fica genial, vamos aprender?
 Bom antes de tudo, deve-se ter atenção redobrada nesse tutorial, para aplicar o efeito é usado um código só, a diferença é que esse código é usado pra fazer coisas diferentes. Por exemplo, o código do efeito degradê é o mesmo nos dois tutoriais acima, a única diferença é que eu usei dois tutoriais diferentes, um de barra de rolagem personalizada e o outro de Título dos gadgets personalizados. Bom, o código do efeito é esse:

background:-webkit-gradient (linear, left top, left bottom, color-stop(0.05, #COR1), color-stop(1, #COR2) );
background:-moz-linear-gradient( center top, #COR1 5%, #COR2100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#COR1', endColorstr='#COR2');
background-color:#COR1; 

Pronto, sabendo esse código você poderá aplicar o efeito em qualquer tutorial. Basta substituir a parte de qualquer tutorial que tiver:
background: #COR
Pelo código do efeito acima. Por exemplo, um código de blockquote:

.post blockquote{
margin:10px auto;
padding:5px;
margin-left: 10px;
margin-right: 10px;
text-align:justify; /*Alinhamento do texto*/
background: #COR;}

Agora, como disse anteriormente, você deve substituir a parte destacada, pelo código do efeito degradê. ficará assim:

.post blockquote{
margin:10px auto;padding:5px;margin-left: 10px;margin-right: 10px;text-align:justify; /*Alinhamento do texto*/background:-webkit-gradient (linear, left top, left bottom, color-stop(0.05, #COR1), color-stop(1, #COR2) );background:-moz-linear-gradient( center top, #COR1 5%, #COR2100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#COR1', endColorstr='#COR2');background-color:#COR1;}

Não é fácil? eu achei super fácil, mais uma vez créditos ao (x)

Bem, pelo jeito os créditos vão para o Adolescentes Do Oposto, muito obrigada por me avisar flor, na verdade eu não sabia mesmo disso (não estou mentindo) e sobre os o degradê ficar como a explicação, bom isso eu vi no blog ok?! desculpa pelo transtorno u.u

Esta tendo um debate aqui no blog. Participa?

4 comentários:

  1. Adorei o efeito, super legal! Seguindo seu cantinho aqui tá? Se puder retribuir ficarei muito grata! Beijos

    http://japassoudotempo.blogspot.com

    ResponderExcluir
  2. Amor pelo menos coloca os creditos no texto de aviso que você pegou do ADO, ou retira ele né, ficar tudo igual isso não dá certo... por favor peço que retire.

    Adolescentes do oposto (blog no perfil)

    ResponderExcluir
    Respostas
    1. querida, desculpa se não sou vidente mais é que eu vi esse tutorial no part of me, como diz ali :)

      Excluir