Olá WASD, este tutorial é pra quem gosta de deixar o site bem levinho sem muitas imagens, claro que com imagem o site fica bem mais bonito, e já no caso desse desenho de nuvem em CSS o resultado não fica lá essas coisas, porém depende da criatividade de vocês pra alterar ele e deixar do seu estilo.

Bem, vamos lá, primeiramente no seu CSS, coloque os seguintes códigos:

Código:

body { background-color:#3091C1;}
#pai {position: relative; top: 0px; ;}
#gomo1, #gomo2, #gomo3, #gomo4 {position:absolute; width: 200px; height: 140px; background: #fff; border-radius: 50% 50%; }
#gomo1{ top: 100px; left: 100px;}
#gomo2{ top: 150px; left: 200px;}
#gomo3{ top: 50px; left: 300px;}
#gomo4{ top: 20px; left: 170px;}

Após colocar tudo isso, coloque o código HTML agora na sua página:

Código:

<div id="pai">
 <div id="gomo1" ></div>
 <div id="gomo2"></div>
 <div id="gomo3"></div>
 <div id="gomo4"></div>
</div>

Resultado final:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Se bugar: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]


Fonte: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

bem maneiro, porem se a pessoa for usar isso para criar um layout, 10 nuvens usaria muitas linhas de codigo.

Muito bom, porém usa muitas linhas de código. Recomendo usar o [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] para colocar essas icons no layout.

Isso não é problema, se for em questão de linhas de códigos é só colocar todas do lado da outra, por exemplo:

Código:

<div id="pai"><div id="gomo1" ></div> <div id="gomo2"></div><div id="gomo3"></div><div id="gomo4"></div></div>

Eu só botei um embaixo da outra pra ficar organizado '--'

iLucas escreveu:

Código:

body { background-color:#3091C1;}
#pai {position: relative; top: 0px; ;}
#gomo1, #gomo2, #gomo3, #gomo4 {position:absolute; width: 200px; height: 140px; background: #fff; border-radius: 50% 50%; }
#gomo1{ top: 100px; left: 100px;}
#gomo2{ top: 150px; left: 200px;}
#gomo3{ top: 50px; left: 300px;}
#gomo4{ top: 20px; left: 170px;}

Enquanto o fontAwesome precisa de uma class para exibir a nuvem, esse precisou de 6.

Puts, que mimimi da merd#, cara, se eu tivesse visto esse site eu tinha postado, pois além de utilizar uma class a cloud é bonita, mas como eu não vi esse site eu peguei o do site Mas qué sé yo? que foi o único que eu achei que ficou melhor, pois os outros não ficaram legal ;-;

BumbumGuloso escreveu:Muito bom, porém usa muitas linhas de código. Recomendo usar o [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] para colocar essas icons no layout.

Só dei uma dica, para quem estiver tentando melhorar a velocidade do site.