Aqui você verá artigos sobre CSS
Moderador: web
por web Offline » Qua Jan 23, 2008 5:29 pm
|
|
Nesse artigo vou explicar como é possível usar 2 backgrounds ( gerado por uma única figura ), trabalhando somente com seus posicionamentos.
A figura que vai ser usada vai ser essa:
Você pode criar qualquer outra imagem conforme deseje.
Vejamos o CSS usado:
- Código: Selecionar todos
<style type="text/css">
.div_1{
width:50px;
height:50px;
background:url(trans.gif);
background-repeat:no-repeat;
}
.div_2{
width:50px;
height:50px;
background:url(trans.gif);
background-repeat:no-repeat;
background-position:-51px 0px;
}
</style>
Note no div_2 o background-position, que é a largura de um dos quadrados menos 1 px.
o HTML
- Código: Selecionar todos
<div class="div_1"></div>
<br>
<div class="div_2"></div>
Basta agora, salvar a imagem no seu PC e rodar o script acima no mesmo diretório.
Agora um exemplo usando troca das imagem quando passar o cursor.
- Código: Selecionar todos
<div class="div_1" onmouseover="this.className='div_2'" onmouseout="this.className='div_1'"></div>
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb [@] hotmail [.] com
web
ADMIN
Mensagens: 11904
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
Voltar para Artigos sobre CSS
Quem está online
Usuários navegando neste fórum: Nenhum usuário registrado e 1 visitante
