Animando site com CSS

É sempre bom deixar o site interativo, animado, que sempre que o usuário passar o mouse sobre alguma coisa, alguma coisa acontecer né...
Ou até mesmo evitar fazer aqueles javascripts sem necessidade, já que o css faz muita coisa quando o assunto é interação e animação, esse é um exemplo que mostra apenas algumas possibilidades, você pode procurar pela internet e achar muitos outros...
Antes de apelar pro javascript ou flash, procure pelo o que você quer com css, html5, porque eles são mais rápidos, bem mais amigáveis, e não ficam devendo em nada visualmente, pelo contrário, muitas vezes renderizam imagens aumentando muito melhor do que o flash, no exemplo abaixo vocês poderão constatar isso... ^^

Menu Acordeon

Galeria de Imagens

• 
• 
• 
• 
• 

Gráfico

Day 1

3

Day 2

36

Day 3

23

Day 4

56

Day 5

55

Day 6

32

Day 7

79

Day 8

74

Day 9

77

Day 10

83

Day 11

34

Day 12

39

Explicação
Agora vamos explicar um pouco sobre o que eu acabei de mostrar à vocês...

Menu Acordeon

Por problemas com a tecnologia blogger nova, tive que modificar o código, agora o elemento se anima com a classe hover, ao passar o mouse sobre o div de classe section, você o expande, isso se dá pelo código a seguir:

.section:hover h3 + div{
height:180px;
}
Se você quiser saber como funcionava antes, pode procurar por menu acordeon + :target css, que você provavelmente encontrará o que tomei como inspiração pra esse que fiz agora.

Galeria de Fotos

A galeria trabalha com a classe :hover, você inicialmente coloca duas imagens dentro de um <li> e depois por css, instrui o navegador que ao usuário passar o mouse sobre o <li> o estilo da imagem maior deve mudar...
Antes do efeito hover a imagem maior tinha os seguintes estilos:



#gallery ul li .pic{
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
position:absolute; 
margin-top:40px;
margin-left:-40px;
width:0px;
height:0px;
-webkit-box-shadow:#272229 2px 2px 10px;
-moz-box-shadow:#272229 2px 2px 10px;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
box-shadow:#272229 2px 2px 10px;
}



Quando passa o mouse sobre o <li> a imagem maior tem alguns estilos mudados, lembrando que os que não estiverem aqui marcados permanecem como antes, a sombra, o efeito de transição, enfim...
Pra ver o que será alterado e como será segue o trecho do li:hover:

#gallery ul li:hover .pic {

margin-left:-120px;
margin-top:-40px; 
width:160px; 
height:160px;
border:1px solid black; 
float:right;

}

Margin-left é -120 porque é -80 da miniatura atual(faz a imagem ficar sobre a miniatura), mais -40(metade do que a imagem vai crescer), ficando -80 + -40 = -120, deu pra entender a conta? Parece maluca, mas não é não...rs Isso faz a imagem crescer de maneira igual por todos os lados, mas pode ser feito diferente, basta você calcular como quer que funcione!

O lado ruim dessa técnica é que pode não funcionar em todos navegadores, já que ao dar position: absolute, alguns navegadores mandam o elemento para as coordenadas 0x0 do body e não do seu elemento pai...
Para funcionar corretamente as imagens tem que estar em display inline.


#gallery img{
display:inline;
}

Gráfico

Gente, esse gráfico é simplesmente foda, o cara teve a ideia genial de usar sprites, como em jogos, para criar um gráfico, para você entender melhor, essas linhas que ligam os pontos foram desenhadas antes de fazer o css, elas não são feitas por programação não, é uma imagem com todas as linhas, suas probabilidades, assim o cara só configurou com o css, o estilo de cada linha...

Os pontos ele fez o position:absolute com margin-left negativa também...

Não vou explicar muito ele, pois não tive muito tempo de analisar, na verdade se você estiver precisando fazer algo do tipo pode dar uma olhada no site dele!^^

http://cssglobe.com/pure-css-line-graph/

Código Final

O código que usei pra exibir o exemplo que dei no começo é este, podem analisar à vontade, melhorar, modificar, enfim, espero te ajudado vocês a resolver seus problemas, ter dado alguma ideia à vocês, enfim, espero que isso tudo tenha sido útil...rs

<style>
.accordion h3{
margin:0px;padding:0px;width:100%;height:30px;line-height:30px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuDq6AaXWC8BFfD81vCyjkS9NMnCOV0gaIcOiXFtEmp1Ne_Ny_JJD1-ftmZdOwUTHqcvcStEmaYM8E_r5246au1qn8k_Ypgs_NU77EAHVqVPpUZO1yeoZCNKogNsGtDcUQFw6EzXwT0b8/s1600/faq_bg.gif);font-weight:bold;color:#08009B;cursor:pointer
}
.accordion h3 + div {
height:0;
overflow: hidden;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
}
.section:hover h3 + div{
height:180px;
}
.large:hover h3 + div{
height:385px;
}
</style>
<style>
/* 

Css Line Graph created by Alen Grakalic
Brought to you by Css Globe (cssglobe.com)

*/


dl.csslinegraph, dl.csslinegraph dt, dl.csslinegraph dd{
 margin:0;
 padding:0;
 }  
dl.csslinegraph{
 background:url(http://cssglobe.com/lab/csslinegraph/csslinegraph/bg_chart.gif) no-repeat 0 0;
 width:467px;
 height:385px;
 } 
dl.csslinegraph dt{
 display:none;
 }
dl.csslinegraph dd{
 position:relative;
 float:left;
 display:inline;
 width:33px;
 height:330px;
 margin-top:22px; 
 } 
dl.csslinegraph dd.first{
 margin-left:33px;  
 }  
dl.csslinegraph span{
 position:absolute;
 display:block;
 width:33px; 
 height:330px;
 left:0; 
 background-image:url(http://cssglobe.com/lab/csslinegraph/csslinegraph/line.png);
 background-repeat:no-repeat; 
 text-indent:-8000px;
 }  
dl.csslinegraph span em{
 position:absolute;
 display:block;
 width:6px; 
 height:6px;
 left:-3px; 
 bottom:-3px;
 background:url(http://cssglobe.com/lab/csslinegraph/csslinegraph/dot.png) no-repeat 0 0;
 }  
dl.csslinegraph span.d em{ 
 left:-3px; 
 bottom:auto; 
 top:-2px; 
 }   

/* position based on previous value (if we are going to increase) */

 .pi0{top:0px;}
 .pi1{top:-11px;}
 .pi2{top:-22px;}
 .pi3{top:-33px;}
 .pi4{top:-44px;}
 .pi5{top:-55px;}
 .pi6{top:-66px;}
 .pi7{top:-77px;}
 .pi8{top:-88px;}
 .pi9{top:-99px;}
 .pi10{top:-110px;}
 .pi11{top:-121px;}
 .pi12{top:-132px;}
 .pi13{top:-143px;}
 .pi14{top:-154px;}
 .pi15{top:-165px;}
 .pi16{top:-176px;}
 .pi17{top:-187px;}
 .pi18{top:-198px;}
 .pi19{top:-209px;}
 .pi20{top:-220px;}
 .pi21{top:-231px;}
 .pi22{top:-242px;}
 .pi23{top:-253px;}
 .pi24{top:-264px;}
 .pi25{top:-275px;}
 .pi26{top:-286px;}
 .pi27{top:-297px;}
 .pi28{top:-308px;}
 .pi29{top:-319px;}
 .pi30{top:-330px;}

/* position based on previous value (if we are going to decrease) */
  
 .pd0{top:330px;}
 .pd1{top:319px;}
 .pd2{top:308px;}
 .pd3{top:297px;}
 .pd4{top:286px;}
 .pd5{top:275px;}
 .pd6{top:264px;}
 .pd7{top:253px;}
 .pd8{top:242px;}
 .pd9{top:231px;}
 .pd10{top:220px;}
 .pd11{top:209px;}
 .pd12{top:198px;}
 .pd13{top:187px;}
 .pd14{top:176px;}
 .pd15{top:165px;}
 .pd16{top:154px;}
 .pd17{top:143px;}
 .pd18{top:132px;}
 .pd19{top:121px;}
 .pd20{top:110px;}
 .pd21{top:99px;}
 .pd22{top:88px;}
 .pd23{top:77px;}
 .pd24{top:66px;}
 .pd25{top:55px;}
 .pd26{top:44px;}
 .pd27{top:33px;}
 .pd28{top:22px;}
 .pd29{top:11px;}
 .pd30{top:0px;}

/* increased values */

 .i0{background-position:0 -1px;}
 .i1{background-position:-33px 0;}
 .i2{background-position:-66px 0;}
 .i3{background-position:-99px 0;}
 .i4{background-position:-132px 0;}
 .i5{background-position:-165px 0;}
 .i6{background-position:-198px 0;}
 .i7{background-position:-231px 0;}
 .i8{background-position:-264px 0;}
 .i9{background-position:-297px 0;}
 .i10{background-position:-330px 0;}
 .i11{background-position:-363px 0;}
 .i12{background-position:-396px 0;}
 .i13{background-position:-429px 0;}
 .i14{background-position:-462px 0;}
 .i15{background-position:-495px 0;}
 .i16{background-position:-528px 0;}
 .i17{background-position:-561px 0;}
 .i18{background-position:-594px 0;}
 .i19{background-position:-627px 0;}
 .i20{background-position:-660px 0;}
 .i21{background-position:-693px 0;}
 .i22{background-position:-726px 0;}
 .i23{background-position:-759px 0;}
 .i24{background-position:-792px 0;}
 .i25{background-position:-825px 0;}
 .i26{background-position:-858px 0;}
 .i27{background-position:-891px 0;}
 .i28{background-position:-924px 0;}
 .i29{background-position:-957px 0;}
 .i30{background-position:-990px 0;}

/* decreased values */

 .d0{background-position:0 -331px;}
 .d1{background-position:-33px -332px;}
 .d2{background-position:-66px -332px;}
 .d3{background-position:-99px -332px;}
 .d4{background-position:-132px -332px;}
 .d5{background-position:-165px -332px;}
 .d6{background-position:-198px -332px;}
 .d7{background-position:-231px -332px;}
 .d8{background-position:-264px -332px;}
 .d9{background-position:-297px -332px;}
 .d10{background-position:-330px -332px;}
 .d11{background-position:-363px -332px;}
 .d12{background-position:-396px -332px;}
 .d13{background-position:-429px -332px;}
 .d14{background-position:-462px -332px;}
 .d15{background-position:-495px -332px;}
 .d16{background-position:-528px -332px;}
 .d17{background-position:-561px -332px;}
 .d18{background-position:-594px -332px;}
 .d19{background-position:-627px -332px;}
 .d20{background-position:-660px -332px;}
 .d21{background-position:-693px -332px;}
 .d22{background-position:-726px -332px;}
 .d23{background-position:-759px -332px;}
 .d24{background-position:-792px -332px;}
 .d25{background-position:-825px -332px;}
 .d26{background-position:-858px -332px;}
 .d27{background-position:-891px -332px;}
 .d28{background-position:-924px -332px;}
 .d29{background-position:-957px -332px;}
 .d30{background-position:-990px -332px;}
</style>
<style>

#gallery img{
display:inline;
}


#gallery ul{
margin-top:40px;padding-left:0px;
}


#gallery ul li {
list-style:none; display:inline-block; padding:10px;
}

#gallery ul li .pic{
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
position:absolute; 
margin-top:40px;
margin-left:-40px;
width:0px;
height:0px;
-webkit-box-shadow:#272229 2px 2px 10px;
-moz-box-shadow:#272229 2px 2px 10px;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
box-shadow:#272229 2px 2px 10px;
}

#gallery ul li .mini:hover{
cursor:pointer;
}


#gallery ul li:hover .pic {
margin-left:-120px;
margin-top:-40px; 
width:160px; 
height:160px;
border:1px solid black; 
float:right;
}
</style>
<br />
<div class="accordion">
<h2>
Menu Acordeon</h2>
<div class="section" id="one">
<h3>Galeria de Imagens</h3>
<div>
<div id="gallery">
<ul>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDhVjLFLtvlzEE48q7s0qfqfBtbL9e8YZGu3CpTD-WI7nadLlW30c1_04HL8bcxRiiBCglfG01t4LSh2puFKq2VL52BWWdckMBfE2yHhRbo0BweBcx7OMkk9nJqI3mYtsi_7WuMWrUjAc/s1600/mini_1.jpg" class="mini" /><img class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw1Qc313yxfCWtDtKO-0fs4qK77HAs5ixJsmJmwN7EV55VJO6KYn7l_BdAXxE7epUt5Mq38L9PT5x-p8QI-h0s1v2mgViZDe7IZgDxakWx8iPFwmjXOrCof9czaCF0RetHs0t6ho_9mK4/s1600/big_1.jpg" />
</li>
<li>
<img class="mini" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbFaR-tOqAfsuGY9kHjfAijdIv-Ec5OqLT0z6jOYh_gLRiLcv9CNQcrT5sJ4zkwqNb1iKqhB82M6YZOfPOwJhSgsxwihpsQkRjHHaniF6xdWY559jr5DJA_cqwgooBDBcIH6aFP6KKS6g/s1600/mini_2.jpg" /><img class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-1BocRbL4tgg6ynpq-Yoce4hTS6MFX2AI-8H3H7h5KyMLdKaKfMBrsiqbCAhVp-yJXYHxXMNA1hwhu7X4XvncK_M4_sc6spq9HBd_Cn7StqnnoGlTrlzCuEcvx5SQ0vfzMGa4nN3HWpQ/s1600/big_2.jpg" />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZabEV9tlembXFMoefoZYit12mVCuyLQYondZS6S9BS0U8E5nx27NqIfkn0sX29nT-0Hd9sD-ZOh0ThU9ApiXztVvWbZhZMPyuyAfYHTCcBsJ2WJ9en6SKOOp4Aa1oRdTgenOJhFeJ8LE/s1600/mini_3.jpg" class="mini" /><img class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWGaN_iPOMI74jeFAG2TVUD9uKeF0p3d0m5oy415hcYSexs8m_0Vt3HD_nFTYUo2cbqh_eIGkuEsu-kXKdXEwnAIZ3u-P08PxqWLD8v-GEzqBC3NU1u6JlWxOAx9fOQrKrCHHCYDJPATM/s1600/big_3.jpg" />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh98iDi2P7MEgCaKnWYwDUA8KMBpl7zHoRf61vqKikaqsQ7f94w9I5mx2xutPmCsRn4q6CeZe_XpNg4SB7RAhEop0b2xVoBN92JlbgDDGkUE_8FuSvcCwAolwHVAODDpZhy6EiXkzrZGGY/s1600/mini_4.jpg" class="mini" /><img class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTLBdwwxqb-TSvJo2isKX3ryXsKYWsTQqBmJBQz2FF1qI20zRdW1HhYmt0EClY58hWr-_ShoTpTta4vltL4sWMFPlaozkQqOUiflqKy0E8QYghJX2uOOayx9X1ZEHCf_psL2lz6df1LyY/s1600/big_4.jpg" />
</li>
<li>
<img class="mini" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj76dA8pb8_XJEivRSZxT03SMtrgma1GZ700rBAH9CxTiJ-Sd2xeCo3BaQgmpJiUqHl21KSg4TmGeLdW_6ORtlxmPVwMqcW4uk_wnLoqX6MF_UVq6ynL25L1jlBm0pKHfvOXoDMnYyoV6k/s1600/mini_5.jpg" /><img class="pic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidJ-IRIyNiq_limK8iBCblGFopP-oWKn1-mNZX9NRzq_HrJL045-rd3f6cJTblk9HP73W-sdNHHlS4Rl9BUZyoVpkpaxmZ-h0WB6gtfyO2jprEzuHTh2BeF0Wv9MhAUH7giqFmhK3wAVg/s1600/big_5.jpg" />
</li>
</ul>
</div>
</div>
</div>
<div id="two" class="section large">
<h3>Gráfico</h3>
<div>

<dl class="csslinegraph">
<dt>Day 1</dt>
<dd class="first"><span class="pi12 i5"><em>3</em></span></dd>
<dt>Day 2</dt>
<dd><span class="pi17 i10"><em>36</em></span></dd>
<dt>Day 3</dt>
<dd><span class="pd27 d d18"><em>23</em></span></dd>
<dt>Day 4</dt>
<dd><span class="pi9 i15"><em>56</em></span></dd>
<dt>Day 5</dt>
<dd><span class="pi24 i1"><em>55</em></span></dd>
<dt>Day 6</dt>
<dd><span class="pd25 d d13"><em>32</em></span></dd>
<dt>Day 7</dt>
<dd><span class="pi12 i9"><em>79</em></span></dd>
<dt>Day 8</dt>
<dd><span class="pi21 i8"><em>74</em></span></dd>
<dt>Day 9</dt>
<dd><span class="pd29 d d22"><em>77</em></span></dd>
<dt>Day 10</dt>
<dd><span class="pi7 i2"><em>83</em></span></dd>
<dt>Day 11</dt>
<dd><span class="pd9 d d4"><em>34</em></span></dd>
<dt>Day 12</dt>
<dd><span class="pi5 i14"><em>39</em></span></dd>           

</dl>
</div>
</div>
</div>