Movimentação de imagens com CSS3
Upcoming SlideShare
Loading in...5
×
 

Movimentação de imagens com CSS3

on

  • 3,819 views

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.

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.

Statistics

Views

Total Views
3,819
Views on SlideShare
2,964
Embed Views
855

Actions

Likes
4
Downloads
24
Comments
0

5 Embeds 855

http://blog.bluesoft.com.br 812
http://www.siqueiradesigner.com 29
http://www.infoblogs.com.br 10
http://www.plugmasters.com.br 3
http://www.bluesoft.com.br 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Movimentação de imagens com CSS3 Movimentação de imagens com CSS3 Presentation Transcript

  • 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
    View slide
  • O resultado será:
    View slide
  • 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
  • #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{list-style:none; position:absolute; }#africa{width:120px; height:140px; left:208px; bottom:40px;}#america{width:226px; height:258px;}
  • .continentesli a{display:block; height:100%; text-indent:-999px;}
  • A Troca Das Imagens
  • .continentes li a:hover{background:url(mapa.gif) no-repeat;}
  • li#americaa: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
    <ulclass="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;}