|
Share this
Twitter
Mister Wong
Digg
Yahoo
Technorati
Newsvine
Googlize this
Blinklist
Facebook
Hear this text
Export PDF
Print
E-mail
Tags
CSS Sprite um técnica simples porem poderosa para sites em Joomla!! Como sabemos os sites gerados por CMSs são um pouco mais lentos que outros! E o CMS joomla não está atrás! Mas a culpa de um site Joomla não carregar muito rápido as vezes está no template! Quando você compra um belo template de alguma empresa especializada em templates, ele é lindo, cheio de Java Script muito CSS e imagens, e tudo isso deixa seu site muito lindo :). Você baba ao ver o template antes de comprar!! Eu pessoalmente não sou muito fã de templates prontos, pois ele tem muita coisa que não iremos utilizar, mas compro quando preciso a final quando é preciso é preciso!!
Para CSS e Java Script temos algumas soluções, alguns bons plugins que fazem um bom serviço em compacta-los!! Mas as imagens!! também existem plugins para elas!!
Mas o motivo desta matéria não é usar plugins para as imagens, e sim um técnica muito boa chamada "CSS Sprites"
Para você que faz seus templates essa técnica é perfeita!!
O que é CSS Sprites? você me pergunta!! Alguns já sabem o que é :) !!
Mas para aqueles que não sabem irei explicar: No lugar de você utilizar um monte de imagens separadas para montar seu template você utiliza apenas uma imagem!!
Quando utilizamos várias imagens no template temos mais requisições ou seja seu site demora mais para abrir as imagens, pois o navegador precisa chamar uma a uma baixa-las do servidor para então carregar e depois disso seu site se mostra lindo como o desejado! Mas isso leva tempo!! Quanto mais imagens mais tempo!!
Então surgiu o CSS Sprites que consistem em uma única imagem, um único carregamento!! seu template carrega mais rápido, pois o navegador fez apenas uma requisição!!
A técnica é simples, porém pouco utilizada! Ela é perfeita para ícones de menus o que não impede que seja usada no template todo! Olhem a imagem abaixo:
Temos vários ícones, numa única imagem, que será carregada apenas uma unica vez!! uma unica requisição! Se elas estivem separadas seriam carregadas 49 imagens e seriam 49 requisições ou seja iria ficar lento, mas não lento demais!! Para quem tem internet rápida isso não é problema!! Mas para o servidor é pois em um site com alto trafego isso seria estafante para ele! O e que resulta numa conta mais alto no fim do mês!!
Vamos a técnica: Basta colocar as coordenadas do ícone! X e Y, lembra das aulas na escola! Hoje você vai utilizar!!
Vamos supor que você quer utilizar o ícone de e-mail o primeiro ícone da direita para a esquerda!!
no CSS ficará assim:
.nome_do_icone {
background:url('images/nomedaimagem.png');
}
Depois você coloca a altura e largura do ícone!
.nome_do_icone {
background:url('images/nomedaimagem.png');
height: 50 px;
widht: 50 px;
}
e por último mas não menos importante você coloca a posição do ícone!
ou seja X e Y.
.nome_do_icone {
background:url('images/nomedaimagem.png') - 341px - 22 px;
height: 50 px;
widht: 50 px;
}
Vai aparecer exatamente a imagem desejada!! Para ver as posições você pode usar quase qualquer editor de imagens.
Para os outros ícones basta fazer a mesma coisa!!
A achar a posição e pronto!!
Seu site ira carregar mais rápido e seu servidor vai agradecer!! E principalmente os usuários.