Download - Movimentação de imagens com CSS3
![Page 1: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/1.jpg)
Flávia Siqueira#flawebwriting
![Page 2: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/2.jpg)
Imagem interativa com CSS
![Page 3: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/3.jpg)
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
![Page 4: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/4.jpg)
O resultado será:
![Page 5: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/5.jpg)
Mãos à obra.....
![Page 6: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/6.jpg)
Organizar as imagens....
![Page 7: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/7.jpg)
O CSS Sprite é uma técnica para trabalhar com as imagens que vamos utilizar na animação
![Page 8: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/8.jpg)
![Page 9: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/9.jpg)
Base....
![Page 10: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/10.jpg)
<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>
![Page 11: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/11.jpg)
Marcação e regras do Css
![Page 12: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/12.jpg)
.continentes {position:relative; float:left; height:260px; width:535px; margin-left:100px; background:url(mapa.gif) no-repeat left top;}
![Page 13: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/13.jpg)
Posicionamento das imagens no css
![Page 14: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/14.jpg)
.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;}
![Page 15: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/15.jpg)
![Page 16: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/16.jpg)
![Page 17: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/17.jpg)
.continentes li a{display:block; height:100%; text-indent:-999px;}
![Page 18: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/18.jpg)
A Troca Das Imagens
![Page 19: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/19.jpg)
.continentes li a:hover{background:url(mapa.gif) no-repeat;}
![Page 20: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/20.jpg)
![Page 21: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/21.jpg)
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;}
![Page 22: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/22.jpg)
Legenda
![Page 23: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/23.jpg)
: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.
![Page 24: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/24.jpg)
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>
![Page 25: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/25.jpg)
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;}
![Page 26: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/26.jpg)
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>
![Page 27: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/27.jpg)
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;}
![Page 28: Movimentação de imagens com CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061204/547ea8adb4af9fd3158b574c/html5/thumbnails/28.jpg)