Tags ‘CSS’
| « Conhecendo o Joomla | Dicas para tornar seu site mais rápido » |
Otimizando seu site com a técnica CSS Sprite
20 de novembro de 2009
Há diversas técnicas muito úteis em CSS que devem ser levadas em consideração no desenvolvimento de um website. Uma dessas técnicas é a famosa CSS Sprite, mas que alguns ainda não conhecem.
O que é?
Consiste em agrupar várias imagens do seu site em uma única imagem, e depois manipulá-la através do seu CSS. Isso faz com que a quantidade de requisições ao servidor seja pequena, tornando o site mais rápido.
Algumas vantagens
Sem dúvida a grande vantagem na sua utilização é a rapidez no qual as imagens do site serão carregadas.
Em sites pequenos talvez seu ganho em performance não seja tão evidente, já em sites mais extensos, esta simples técnica faz uma grande diferença.
Além disso, outra vantagem é na manutenção das imagens, onde estarão todas em apenas um arquivo, facilitando a edição do layout. Um site que pode servir como exemplo disso é o Youtube, que utiliza CSS Sprite.
Veja o exemplo abaixo:
IMAGEM
Vamos supor que temos um menu:
HTML
<li><a href=”#” id=”link1″>Link 1</a></li>
<li><a href=”#” id=”link2″>Link 2</a></li>
<li><a href=”#” id=”link3″>Link 3</a></li>
</ul>
Agora vamos estilizá-lo!
CSS
ul#menu li a { background-image: url(‘sprite.png’); background-repeat: no-repeat; color: #fff; display: block; font-weight: bold; height: 40px; text-decoration: none; width: 126px; }
ul#menu li a:hover#link1 { background-position: -378px 0; }
ul#menu li a:hover#link2 { background-position:-252px 0; }
ul#menu li a:hover#link3 { background-position:-126px 0; }
A propriedade CSS que faz a magia acontecer é a background-position, onde o primeiro valor é a posição X (horizontal) e o segundo valor a posição Y (vertical) da imagem que queira exibir.
Neste exemplo, foi necessário apenas uma requisição ao servidor, pois tinha apenas uma imagem utilizada para compor o menu.
Lembre-se que a rapidez de um site é um ponto muito importante atualmente na web, pois se o site demorar para carregar suas imagens o usuário irá desistir e procurar outro que atenda as suas expectativas.
Tags: como criar um site, CSS, Dicas, otimização, Tutoriais
Categoria: Tutoriais
1 Comentário »
| « Conhecendo o Joomla | Dicas para tornar seu site mais rápido » |
RedeHost em uma frase:
Uma das maiores empresa de hospedagem de sites e registro de domínio do Brasil, a única 100% em cloud computing, reconhecida pelo melhor atendimento e infraestrutura.