RSS Feed

Posts Tagged ‘CSS’

  1. SmartSprites – Css sprites gerados automaticamente

    March 16, 2009 by admin

    Este tutorial está bem detalhado, faça um teste seguindo passo-a-passo, e logo estará apto à aplicar em qualquer site!

    1) Faça o download (http://smartsprites.osinski.name/download.html) da ferramenta SmartSprites, descompacte em um diretório qualquer (aqui estou usando o meu diretório padrão de projetos, que é c:\gonow\developer).

    2) Vamos fazer a marcação do css, necessária para a ferramenta se identificar. Fazemos isso usando comentários.

    O sprite é composto por várias imagens, unidas em uma só e exibidas pelo posicionamento do bg de cada elemento;

    Para criar um sprite automaticamente devemos criar instruções para o SmartSprites entender que imagem pertence ao sprite x;

    Criamos referência ao primeiro Sprite, usando o seguinte código dentro do css:

    /**
sprite: mysprite;
sprite-image: url('../img/mysprite.png');
sprite-layout: vertical
*/

    ou ainda: 

    /**sprite: mysprite; sprite-image: url('../img/mysprite.png'); sprite-layout: vertical */

    -Explicando esse código temos:

    sprite // nome do sprite, será usado futuramente para referenciar cada imagem que compõe o sprite;

sprite-image // nome e caminho da imagem que será gerada pelo programa;
sprite-layout // orientação da imagem (vertical | horizontal);

    Obs: deve vir antes de qualquer referência a este sprite, mas não precisa estar no topo do css.

    Existem ainda outras opções, recomendo o acesso ao site, e pesquisas na internet para conhece-las mais a fundo, já existe bastante coisa a respeito na internet, e no fim deste post vou mencionar alguns links.

    Após criar a regra do primeiro sprite, já podemos começar a definir que fará parte dele, para isso vamos atribuir na frente da propriedade background-image um outro comentário, como este: 

    background-image:url(../img/xpto.png); /** sprite-ref: mysprite; repeat; sprite-margin-top: 5px */

    Explicando esse código temos: 

    background-image:url(../img/xpto.png); // propriedade obrigatória, indica qual imagem será incluida no sprite;

    e nos comentários: 

    sprite-ref: mysprite; //Nome usado anteriormente na instancia, diz que essa imagem deve estar no sprite mysprite;
repeat; //Avisa que permite repetição, então deve-se estender a imagem na direção da repetição (x = horizontal | y = vertical)
sprite-margin-top: 5px // distância em relação a outras imagens;

    Esse comentário deve estar presente em todas as regras de css que contenham imagens de bg para o sprite, mas, em nenhum dos casos, a propriedade background poderá ser usada de forma abreviada para funcionar, em um exemplo prático, o código abaixo: 

    background: transparent url("../img/center_bg.png") no-repeat center top;

    irá virar: 

    background-color: transparent;
background-image: url("../img/center_bg.png") ;
background-repeat:no-repeat;
background-position:center top;

    sendo que o background-repeat se tornou descartável e o background-position será gerado pela ferramenta, então podemos reduzir ainda para: 

    background-color: transparent;
background-image: url("../img/center_bg.png") ;

    e aplicando as intruções para o smartSprite: 

    background-color: transparent;

background-image: url("../img/center_bg.png") ;/** sprite-ref: mysprite; */

    Finalizada esta explicação, segue um exemplo de código real, antes da formatação: 

    #logo{
    background:url("../img/logo.png") no-repeat top left;
    width:180px;
    height:57px;
    left: 28px;
    position: absolute;
    top: 40px;

}
 
#center {
    background: transparent url("../img/center_bg.png") no-repeat center top;
    padding-top: 10px;
    position: relative;

}
 
#left #leftContent {
    position: relative;
    overflow: auto;
    background: transparent url("../img/homeContentBg.png") repeat-x center bottom;
    width: 284px;

}

    E agora, após configurado para o smartSprites: 

    #logo{
    background-image:url("../img/logo.png");/** sprite-ref: mysprite; */
    width:180px;
    height:57px;
    left: 28px;
    position: absolute;
    top: 40px;

}
 
#center {
    background-image: transparent url("../img/center_bg.png");/** sprite-ref: mysprite; */
    padding-top: 10px;
    position: relative;

}
 
#left #leftContent {
    position: relative;
    overflow: auto;
    background-image: url("../img/homeContentBg.png");/** sprite-ref: mysprite; */

    width: 284px;
}

    Usei a forma mais simples para mostrar como pode se relacionar uma imagem atual à uma imagem de sprite, você pode aplicar diversas outras configurações, como alinhamento, margem, etc;

    3) Após concluir a aplicação dos comentários no css temos que fazer com que a ferramenta processe o que foi pedido, para isso, acessamos via prompt de comando o diretório onde descompactamos o smartSprites (C:\gonow\developer\smartsprites) e digitamos a seguinte linha: 

    smartsprites --root-dir-path c:/example

    Onde c:/example é o diretório raiz do projeto, onde o css esteja visível;

    4) Se chegou até aqui, o prompt terá exibido uma tela com várias [INFOS], então você ja gerou seus sprites.
    Vá até a pasta definida para os sprites no primeiro comentário, veja sua nova imagem, vá até a pasta de css e veja seu novo css ja configurado com as positions do sprite, e altere o html do seu site para chamar o novo css. Faça um preview e tire suas conclusões.

    Observações

    - O programa já vem com um diretório contendo vários exemplos, é interessante executá-los para ver o resultado final.
- Acesse o faq: http://smartsprites.osinski.name/#faq

    Links Externos

    - http://smartsprites.osinski.name/
- http://framebox.blogspot.com/2009/01/implementando-css-sprites-com.html

    Category CSS | Tags: ,,, | No Comments