25 de fev de 2013

Sprite Cow - Crie coordenadas de Imagens em CSS Sprites

Você sabe o que é mapeamento de imagens?


Para que você tenha uma noção bem clara desse assunto, pense um pouco. É visivelmente perceptível a velocidade em que o site do Google ou Facebook carrega suas imagens. Isso se deve ao mapeamento de imagem. Isso se dá, pois o site normalmente ao invés de utilizar várias imagens para diferentes usos no site, eles utilizam apenas uma e indicam qual "pedaço" dela será usada para cada fim. 
Essa tarefa antigamente já foi no mínimo complicada, mas com a ferramenta que indicarei, se tornará muito mais simples.

Cow Sprite é uma nova ferramenta de CSS Sprites que ajuda você a obter os valores de posição de diferentes lugares em uma única imagem. Quando precisei, encontrei muitos utilitários que realizam a mesma função, mas nenhum é tão simples e eficiente quanto o Cow Sprite.





Este aplicativo para web, captura a posição de fundo, altura e largura dos estilos que podem facilmente copiados e colados em seu site/blog. Então, se você é do tipo de pessoa que está buscando fazer coordenadas exatas, ou apenas tentando melhorar a SEO de seu site/blog, com certeza deve conferir o Cow Sprite.

Cow Sprite é uma ferramenta de código aberto, sendo assim você pode encontrar o arquivo de download que está disponível no Github. Ou utilizar a ferramenta online mesmo, a partir do site oficial clicando no link abaixo. 



Obs. Caso tenha criado alguma coordenada com o aplicativo e queira aplicar ao seu blog do blogger, comece inserindo o código gerado à folha de estilos acima da tag ]]></b:skin>, e logo após aplique o estilo "sprite" ao local em que será inserido a imagem.


Espero que tenham gostado!
Compartilhe essa postagem!
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

Recomendamos para você »

0 comentários

Seja livre para expor seu pensamento!

Se preferir, antes, leia nossas regras para comentários...
(Atenção: Comentários "Anônimo" não serão publicados. Escolha "Nome/URL". Obrigado!)
Bom comentário!

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Pré-Designed by BlogThietKe Designed by @Mundo_Informal
© 2012-2014 .::Mundo Informal::. Todos os direitos Reservados
Licença Creative Commons
...See you!
Voltar ao topo