Veja como é fácil criar uma nuvem apenas com HTML e CSS, sem a necessidade de carregar uma imagem na sua página.
 |
| Veja como criar uma nuvem |
Eu sei que você é um blogueiro antenado nas coisas que rolam na web. Sei que você sabe que imagens bonitas têm pesos pesados e muitas vezes, demoram muito para serem carregadas em um post seu. Sei também que você usa recursos do Photoshop para diminui-la ao máximo sem perder a qualidade para postá-las aqui.
Se você já faz isso, está no caminho certo. Se ainda não faz, brevemente farei um tutorial explicando todos os passos de como deixar sua imagem preparada para o seu blog.
Mas você sabia que é possível pôr imagens em seu post sem necessariamente carregar uma imagem nele? Pode até parecer mágica, ou pior: bruxaria, mas não é nada disso. É apenas o poder do CSS.
Chega de papo, vamos ao código:
CSS (coloque o código abaixo entre <style></style>
#pai {position: relative; top: 0px; width: 500px; height: 500px; background:blue;}
#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;}
#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;}
HTML
<div id="pai">
<div id="gomo1" ></div>
<div id="gomo2"></div>
<div id="gomo3"></div>
<div id="gomo4"></div>
</div>
<div id="gomo1" ></div>
<div id="gomo2"></div>
<div id="gomo3"></div>
<div id="gomo4"></div>
</div>
Resultado
É isso. Com esse código você terá uma interessante nuvem onde você quiser. Você pode estudar mais sobre animação em CSS e o atributo hover. Estude e veja os belos efeitos que são possíveis de serem feitos sem precisar nem de imagem nem de flash. Ah, gostou da animação?? Siga nosso blog aqui pelo Blogger ou pelo face, pois, em breve, postaremos um tutorial detalhado de como fazer animação em CSS. Até a próxima!
