18 abril 2012

Mega tutorial:Efeito Degradê com CSS3

 
Hello babys! Hoje vou mostrar para você como colocar aquele mega lindo efeito que o degradê -ou o efeito gradiente- nos traz! Eu sinceramente acho esse efeito lindo, ele tem um estilo meio profisa no blog sabe?! Porém,antes de irmos ao tutorial, gostaria de dizer que podemos usar muito esse efeito, porém tendo conciencia, e não sair botando em tudo quando é lugar no blog! Por favor gente!

Bora conferir como se usa e efeito?! Clique em ''leia mais'' a aprenda junto comigo!



   Primeiro vamos ver os códigos, e pois como se usa eles.

Gradiente horizontal: 
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:
 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 do efeito ( #FF0080 e #CCCCC) usando essa tabela.


   


                                        Aplicando o efeito no blog...


Design> Editar HTML> Dê Ctrl + F -ou então F3- e procure por:




/* Posts

E antes de fechar } cole um dos códigos que estão no inicio o post.

Se você quiser usar bordas arredondadas colocando os códigos abaixo , abaixo do código do degradê:

Bordas redondas em todos os cantos:
border-radius: 10px;
Bordas arredondadas no topo do lado esquerdo e na parte de baixo do lado direito (para gadgets separado em caixinhas):

border-top-left-radius: 10px;border-bottom-right-radius: 10px; 
 

Design> Editar HTML> Dê Ctrl + F -ou então F3- e procure por:


/* Widgets

Antes de fechar  } cole um dos códigos que estão no começo do post. Para aplicar as bordas arredondadas é o mesmo procedimento!

  Plicando no fundo dos gadgets da sidebar...

Design> Editar HTML> Dê Ctrl + F -ou então F3- e procure por (ou então por algo parecido a esse código):


.footer-inner .widget h2, 
.sidebar .widget h2 {
padding-bottom: .5em;

 E logo abaixo desse código aplique um dos códigos que estão acima do tutorial. Para aplicar as bordas arredondadas é mesmo procedimento.

#FicaDica: Você pode aplicar esse efeito onde você quiser, contanto que saiba onde fica o código do elemento onde irá o efeito, depois aplique o código do afeito.

 Então é isso aí babys! Espero que tenham gostado do tutorial! Há, quero dar os créditos ao blog Go Imagine, foi lá que aprendi a fazer esse efeito! Bjs ♥

8 comentários:

Plum disse...

ADOREEEEI <3

Lara Kuerten disse...

Nossa gostei!!!
Muito originale tudo realmente fica mais profissional!!!
Bjs
Tutosforyou.blogspot.com

Priscilalirow disse...

adoreeeeeeii ><
ficulindo demais
beijinhos *-*

http://priscilalirow.blogspot.com.br/

cacá disse...

Oi ! Adoro quando blogs postam mega( ou super, tanto faz ! )-tutoriais para ajudar aqueles que não sabem muito. Sou super-mega inexperiente e designers e eu peço sempre que me ajudem. Amei seu blog e queria fazer parceria ! Aceita, please ! Ele tem 25 seguidores e está sem posts desde o dia 15 por quê eu tô sem internet ( só estou usando meu IPad ) e vai ser até amnhã, mais ou menos. O caso é : Aceita ? Meu endereço é sominhamusica.blogspot.com. Bjs ! Amei o seu blog, flor !

Lola Mantovani disse...

nossa amei essa tutorial muito boa :)
arrasou no post paty
beijos
http://lolamantovani.blogspot.com.br/

Maria Lua disse...

Gostei do tutorial *-*
http://perfeitateen.blogspot.com.br/

elly disse...

kkkkkkkkk amei a foto do gatinho lendo junto, palhaço,kkk
ótimo post!
amiga, tenho mais um sorteio de regra simples,
quem me segue é só preencher o formulario ta
o ganhador vai escolher 2 peças como premio!
espero que participe vou ficar honrada!
bjão, ótimo dia!ઇઉ
www.coisasdeladdy.com

♥sarah♥ disse...

lindo o seu blog!!!
ele é perfeito!!!
e obrigada pela a dica do post de visualizações em navegadores diferentes e tambem obrigado por essa dica!!
para avisar, estou seguindo e tbm tenho um blog, que quiser visitar:
girlfashion-sah.blogspot.com