Olá! Quinta Feira, 24 de Abril de 2014.



Dicas CódigoFonte.net
Sexta Feira, 30 de Julho de 2010

Imagem Fixa no canto da tela

Hoje veremos como fixar uma imagem no canto da tela. Alguns sites estão usando esse efeito para colocar a imagem do twitter para direcionar seus usuários.

Para criar esse efeito a gente precisar criar uma camada:

[code]
<div class="canto"></div>
[/code]

A primeira etapa é fixar a camada em um ponto da tela, utilizando CSS:

[code]
.canto {

   position: fixed;

   left: 0pt;

}
[/code]

Pronto a camada está fixa no canto esquerdo da tela. Para colocar do lado direito basta colocar [i]right[/i] ao invés de [i]left[/i].

[b]Nota[/b]: 0pt é o espaçamento entre a tela e a camada.

Bem, agora só precisamos colocar a imagem, você pode fazer de duas maneiras: a primeira é colocando a imagem na camada e a outra é colocando a imagem como fundo da camada.

Primeiro vamos colocar a imagem na camada:

[code]
<div id="canto"><img src="imagem.jpg"></div>
[/code]

Agora só precisamos definir a posição onde a imagem vai ficar no site.

[code]
.canto {
   position: fixed;
   top: 248px;
   width: 35px;
   z-index: 100;
   left: 0pt;
}
[/code]

Acrescentamos mais 3 opções no CSS:

top: é a margem superior;
width: largura da camada;
z-index: faz com que a camada fique acima de os objetos do site.

No final devemos ter:

[code]
<style type="text/css">
.canto {

   position: fixed;

   top: 248px;

   width: 35px;

   z-index: 100;

   left: 0pt;

}

</style>

<div class="canto"><img src="imagemcanto.png"></div>

[/code]

Vamos agora para a segunda maneira, colocando a imagem como fundo da camada. Altere a camada para:

[code]
<div id="canto"></div>
[/code]

No CSS:

[code]
.canto {
   background: url(imagem.jpg) no-repeat scroll left top;
   position: fixed;
   top: 248px;
   height: 30px;
   width: 35px;
   z-index: 100;
   left: 0pt;
}
[/code]

Neste caso só acrescentamos a opção background que coloca a imagem como fundo da camada.

Código final:

[code]
<style type="text/css">
.canto {
   background: url(imagem.jpg) no-repeat scroll left top;
   position: fixed;
   top: 248px;
   height: 30px;
   width: 35px;
   z-index: 100;
   left: 0pt;
}
</style>
<div id="canto"></div>
[/code]

Até a próxima!


Enviado por: Andre

Comentários do artigo [Novo comentário]

Nenhum comentário, seja o primeiro a comentar.
Para adicionar um comentário você deve efetuar o login


Gostou do CódigoFonte.net? Quer indicar a um amigo?
Preencha os campos a seguir.
Seu Nome:
Seu E-mail:
E-mail de seu Amigo:


CodigoFonte.net » CodigoFonte.eti.br » Compre De Tudo » Meu Mural » Competiva - Criação de Sites » Todos os Direitos Reservados © 2002/2010