CSS Sprites
Postado por: Pedro Rogério em
Já falei aqui no blog uma vez sobre CSS Sprites, através de um vídeo tutorial, mas faltava algo mais prático para mostrar aos usuários. Com isso, vou postar aqui agora um exemplo simples de CSS Sprite baseado no Plugin para WordPress Sexy Bookmarks.
A marcação HTML é muito simples, e para isso vamos utilizar listas desordenadas:
<ul class="sharing-cl" id="text"> <li><a class="sh-mail" href="">email</a></li> <li><a class="sh-feed" href="">feed</a></li> <li><a class="sh-tweet" href="">twitter</a></li> <li><a class="sh-face" href="">facebook</a></li> <li><a class="sh-su" href="">stumbleupon</a></li> <li><a class="sh-digg" href="">digg</a></li> </ul>
Não vou entrar em detalhes em relação ao CSS, o único segredo é que definimos que todos os links terão a mesma imagem, após, em suas classes, basta trocar a posição da imagem com background-position:
.sharing-cl{
overflow:hidden;
margin:0;
padding:0;
list-style:none;
}
.sharing-cl a{
overflow:hidden;
width:75px;
height:30px;
float:left;
margin-right:5px;
text-indent:-200px;
background:url("http://www.cssnolanche.com.br/lab/css-sprites/share-sprite.png") no-repeat;
}
a.sh-su{background-position:-210px -40px;}
a.sh-feed{background-position:-70px -40px;}
a.sh-tweet{background-position:-140px -40px;}
a.sh-mail{background-position:0 -40px;}
a.sh-digg{background-position:-280px -40px;}
a.sh-face{
margin-right:0;
background-position:-350px -40px;
}
a.sh-mail:hover{background-position:0 1px;}
a.sh-feed:hover{background-position:-70px 1px;}
a.sh-tweet:hover{background-position:-140px 1px;}
a.sh-su:hover{background-position:-210px 1px;}
a.sh-digg:hover{background-position:-280px 1px;}
a.sh-face:hover{
background-position:-350px 1px;
}
#text{
margin-top:3em;
font-weight:bold;
font-family:helvetica,arial,sans-serif;
}
#text a{
text-indent:0;
height:auto;
text-align:center;
font-size:11px;
padding-top:35px;
color:#999;
text-decoration:none;
}
Vejam agora o exemplo. Esse post foi originalmente publicado no blog Web Developer Juice.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
Muito bom!
Só tenho uma dúvida que creio ser simples.
Como é feito o calculo do deslocamento do background para criar o CSS Sprite? Existe algum método que ajuda, uma regua virtual, algum programa, …?
Ou é no manual e na base da tentativa mesmo, até acertar o lugar correto?
Abraços!
@André Eu pego as medidas pelo Photoshop, acredito que a maioria faz assim.
Legal o tutorial, sempre uso essa técnica pra fazer menus de navegação.
Obs.: listas desordenadas ficou engraçado, não ficaria melhor o termo “não ordenadas”? Porque na verdade elas não estão desordenadas, só não tem um sistema de numeração… Abraço!
André,
Utilize um programa de edição de imagens para pegar as posições da imagem, por exemplo, o Photoshop, como citou o Edmundo.
A propriedade ‘background-position’ pode ser calculada igual a um plano cartesiano… X e Y.
No Exemplo: background-position:-70px 1px; a imagem se desloca 70px para esquerda e 1 para baixo.
Resumindo…
valores x – Positivo: direita, Negativo: esquerda
valores y – Positivo: para baixo, Negativo: para cima.
Abraço
Ai Pedrão show de bola, como sempre mandando super bem, agora em todos meus projetos estou utilizando modulos dessa maneira, muito mais facil de se trabalhar e a coisa boa eh que carregamos uma unica imagem!
[...] This post was mentioned on Twitter by Pinceladas da Web, gust4vo ZimmermanN. gust4vo ZimmermanN said: Exemplo simples de #CSS Sprite baseado no Plugin Sexy Bookmarks do #WP | CSS Sprites: http://ow.ly/11cY2 [...]
ja uso esse método a um bom tempo, é uma maravilha =p
Oi, eu gostaria de saber se esse código serve pra myspace, eu já tentei usar mas não deu certo.
E se não servir será que você podia me enviar código próprio para o myspace?
Muito obrigada.
Gostei muito do seu site, parabéns. *-*
Oi, não consegui colocar esse menu no meu myspace. Estarei mandando em e-mail anexado arquivo de imagem para vocês cortarem e fazerem o código certinho pra eu colocar no meu myspace.
Muito obrigada.
KKKKKKKKKKKKKKKKKKKKKK…q absurdo. Além do cara fazer o ENORME favor de criar um tutorial, quer ele monte uma página? Aqui é um site de informações, não um Help Desk…..aff. Vai pagar pelo serviço????
Opa, se eu criar uma conta no myspace vou kerer que vc recorte a tela pra mim tb! o/
kkkkkkkkkk tinha que ser mulher ..
! …. deve se loira so pode .. ahuahauhauha !
muito bom ( ótimo ) o tuto ,
curto e direto,
continue assim =D
[...] http://www.cssnolanche.com.br/css-sprites/ [...]