SHOW:
|
|
- or go back to the newest paste.
1 | >>>>>>> 1º Passo: | |
2 | ||
3 | Colem esse código entre <style type="text/css"> e </style> | |
4 | ||
5 | - | #gscl{ |
5 | + | #poxa { |
6 | margin-top:50px; | |
7 | - | margin-top:0px; /* quanto ela vai pra baixo */ |
7 | + | margin-left:0px; |
8 | - | margin-left:0px; /* quanto ela vai pra direita */ |
8 | + | text-align:center; |
9 | - | border-radius:100px; /* imagen circular igual a 100, imagem quadrada só é deixar em 0 */ |
9 | + | margin-bottom:15px; |
10 | - | height:auto; /* altura da foto */ |
10 | + | |
11 | - | width:200px; /* largura da foto */ |
11 | + | |
12 | - | -webkit-filter: grayscale(1); /* de 0 a 1 mais cinza ou menos */ |
12 | + | #poxa a { |
13 | - | -webkit-transition: opacity 0.8s linear; |
13 | + | padding:5px; |
14 | - | -webkit-transition: all 0.5s ease; |
14 | + | font-size:10px; |
15 | - | -moz-transition: all 0.5s ease; |
15 | + | text-align:center; |
16 | - | -o-transition: all 0.5s ease; |
16 | + | margin-left:3px; |
17 | - | -ms-transition: all 0.5s ease; |
17 | + | width:300px; |
18 | - | transition: all 0.5s ease; |
18 | + | margin-bottom:7px; |
19 | font-family:calibri; | |
20 | - | |
20 | + | text-transform:uppercase; |
21 | - | #gscl:hover { |
21 | + | color:#fff; |
22 | - | |
22 | + | display:inline-block; |
23 | - | -webkit-filter: grayscale(0); /* de 0 a 1 mais cinza ou menos, pra ela voltar ao normal tem que ser 0 */ |
23 | + | -webkit-transition:all 0.3s ease-out; |
24 | - | -webkit-transition: opacity 0.8s linear; |
24 | + | -moz-transition:all 0.3s ease-out; |
25 | - | -webkit-transition: all 0.5s ease; |
25 | + | transition:all 0.3s ease-out; |
26 | - | -moz-transition: all 0.5s ease; |
26 | + | border-bottom:1px solid #f5f5f5; |
27 | - | -o-transition: all 0.5s ease; |
27 | + | text-decoration:none; |
28 | - | -ms-transition: all 0.5s ease; |
28 | + | |
29 | - | transition: all 0.5s ease; |
29 | + | |
30 | #poxa a:hover { | |
31 | letter-spacing:5px; | |
32 | color:#fff; | |
33 | background:#000; | |
34 | -webkit-transition:all 0.3s ease-out; | |
35 | -moz-transition:all 0.3s ease-out; | |
36 | - | <img id="gscl" src="URL da IMAGEM que vc quer"> |
36 | + | transition:all 0.3s ease-out;} |
37 | ||
38 | /* as cores de fundo */ | |
39 | #poxa :nth-child(5n+1){background:#df6c7a;} | |
40 | #poxa :nth-child(5n+2){background:#df9a6c;} | |
41 | #poxa :nth-child(5n+3){background:#e5de71;} | |
42 | #poxa :nth-child(5n+4){background:#8bea71;} | |
43 | #poxa :nth-child(5n+5){background:#97c5e0;} | |
44 | ||
45 | >>>>>>> 2º Passo: | |
46 | ||
47 | Colem esse código depois de </style> e antes de </body> | |
48 | ||
49 | <div id="poxa"> | |
50 | ||
51 | <a href="http://amplamente.tumblr.com/">Amplamente</a> | |
52 | <a href="http://amplamente.tumblr.com/">Amplamente</a> | |
53 | <a href="http://amplamente.tumblr.com/">Amplamente</a> | |
54 | <a href="http://amplamente.tumblr.com/">Amplamente</a> | |
55 | <a href="http://amplamente.tumblr.com/">Amplamente</a> | |
56 | <a href="http://amplamente.tumblr.com/">Amplamente</a> | |
57 | <a href="http://amplamente.tumblr.com/">Amplamente</a> | |
58 | <a href="http://amplamente.tumblr.com/">Amplamente</a> | |
59 | <a href="http://amplamente.tumblr.com/">Amplamente</a> | |
60 | <a href="http://amplamente.tumblr.com/">Amplamente</a> | |
61 | ||
62 | ||
63 | </div> | |
64 | ||
65 | TUTORIAL FEITO POR AMPLAMENTE. |