Upload
flavia-siqueira
View
4.054
Download
3
Embed Size (px)
DESCRIPTION
Nessa apresentação Flávia Siqueira fala à equipe Bluesoft como realizar simples animações em imagens com CSS3 sem sobrecarregar as solicitações ao servidor.
Citation preview
Flávia Siqueira#flawebwriting
Imagem interativa com CSS
Um mapa como exemplo:
- Destacar os continentes quando se passa o mouse em cima;- Utilizaremos sprintes para a troca das imagens;- As legendas serão inseridas com as pseudo-classe: target
O resultado será:
Mãos à obra.....
Organizar as imagens....
O CSS Sprite é uma técnica para trabalhar com as imagens que vamos utilizar na animação
Base....
<ul class="continentes">
<li id="america"><a href="#america" >América</a>
</li><li id="europa">
<a href="#europa" >Europa</a></li><li id="asia">
<a href="#asia" >Ásia</a></li><li id="africa">
<a href="#africa" >África</a></li><li id="oceania">
<a href="#oceania" >Oceania</a></li>
</ul>
Marcação e regras do Css
.continentes {position:relative; float:left; height:260px; width:535px; margin-left:100px; background:url(mapa.gif) no-repeat left top;}
Posicionamento das imagens no css
.continentes li{list-style:none; position:absolute; }
#africa{width:120px; height:140px; left:208px; bottom:40px;}
#america{width:226px; height:258px;}
#asia{width:214px; height:164px; right:40px;}
#europa{width:121px; height:75px; left:211px; top:6px;}
#oceania{width:103px; height:89px; right:0; bottom:17px;}
.continentes li a{display:block; height:100%; text-indent:-999px;}
A Troca Das Imagens
.continentes li a:hover{background:url(mapa.gif) no-repeat;}
li#america a:hover{background-position:0px -275px;}
li#africa a:hover {background-position:-227px -381px;}
li#europa a:hover {background-position:-227px -284px;}
li#asia a:hover {background-position:-347px -287px;}
li#oceania a:hover{background-position:-359px -457px;}
Legenda
:target
A chave para o funcionamento da legenda é a pseudo-classe :target, uma das novidades do CSS 3.
Uma página pode ser dividida em seções com âncoras. Um texto longo, por exemplo, tem o índice no topo com os links para os títulos. Ao clicar em um destes links você é levado para a parte da página correspondente a ele.
A pseudo-classe :target permite estilizar o destino deste link. Resalva para o não funcionamento desta pseudo-classe no Internet Explorer.
A Legenda
<ul class="legenda"><h2>Legenda</h2><li><a href="#africa" >África</a></li><li><a href="#america" >América</a></li><li><a href="#asia">Asia</a></li><li><a href="#europa" >Europa</a></li><li><a href="#oceania" >Oceania</a></li><li><a href="#" >Nenhum</a></li>
</ul>
legenda li {margin:0 10px; line-height:18px;}
.legenda a:hover{color:#999;}
.legenda{position:relative; float:left; margin:50px; list-style-type:circle; list-style-position:inside; background:#eaeaea; border:3px solid #c0c0c0; padding-bottom:10px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
Adicionando Dica No Mapa<ul class="continentes">
<li id="america"><a href="#america" title="area da america“>América</a><span>Área: 42 189 120 km²</span>
</li><li id="europa">
<a href="#europa" >Europa</a><span>Área: 10 498 000 km²</span>
</li><li id="asia">
<a href="#asia" >Ásia</a><span>Área: 43 810 582 km²</span>
</li><li id="africa">
<a href="#africa" >África</a><span>Área: 30.221.532 km²</span>
</li><li id="oceania">
<a href="#oceania" >Oceania</a><span>Área: 9.008.458 km²</span>
</li>
</ul>
E por fim duas regras CSS. Uma para esconder e outra para mostrar a informação.
.continentes li span{display:none; position:absolute; top:50px; left:50px; padding:7px; background:#333; color:#fff; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; z-index:500; width:120px; text-align:center;}
.continentes li a:hover + span{display:block;}