Compartilhando informação

Bom dia pessoal um ótimo fim de domingo a todos e que Deus os abençoe com muita paz e saúde.

vou mostrar neste tutorial como utilizar SPRITES para facilitar a vida ao se criar um site e usar muitos ícones e imagens para se montar seu layout
Sprite nada mais é do que um conjunto de imagens agrupadas formando uma única imagem e assim diminuindo o numero de requisições no seu servidor.

Nível: Médio/Avançado

O pessoal fica bravo comigo porque não coloco  os códigos aqui.

minha opinião se você ficar copiando e colando os códigos nunca vai aprender a programar de verdade vai sempre depender de códigos prontos para realizar seu trabalho abra um editor e crie os códigos verás que é muito bom ao se compilar um trabalho ele será fruto seu e não de algum código pronto da internet que talvez nem saiba o trabalho que dá para se criar.

Abaixo uma imagem com ícones utilizadas neste tutorial:

icons

vamos a parte do CSS

1 – crie ou edite um arquivo CSS e digite os códigos abaixo.

Arquivo: sprite.css

/* configurações gerais do menu ou botão */
ul{ margin: 0px; padding: 5px; }
a{text-decoration: none;}

/** Criando uma classe para o botao ou menu **/
.sprite{
display: inline-block;
vertical-align: text-top;
background-image: url(“images/icons/icons.png”);
background-repeat: no-repeat;
}

2 – Acima informamos as propriedades para a tag UL, A e criamos uma classe chamada SPRITE.

3 – Dando continuidade ao código agora vamos criar os menus ou botões

/** 1 **/
.inicio{background-position: -30px -10px; width: 50px; height: 50px; margin-bottom: 10px;}

/** 2 **/
.adicionar{background-position: -30px -330px; width: 50px; height: 50px; margin-bottom: 5px;}

/** 3 **/
.listar{background-position: -225px -390px;    width: 50px; height: 50px; margin-bottom: 10px;}

/** 4 **/
.configurar{background-position: -30px -515px; width: 50px; height: 50px; margin-bottom: 5px;}

4- acima foi criado as classes para cada menu ou botão eu utilizei um nome para o ” + ” Adicionar e assim por diante.

a propriedade background-position é que será alterada nos valores X e Y nesta ordem, assim utilizando qualquer imagem dentro do sprite.

OBS: Utilize a régua do  Fireworks ou Photoshop para encontrar o X e o Y das imagens ou você pode usar um programa especifico para realizar esta tarefa SpriteCowSpritePad e tambem Sprite Generator

Até aqui deixamos o CSS prontos agora vamos a parte do HTML aplicação no site ou sistema

Arquivo index.html

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>

<link href=”sprite.css” rel=”stylesheet”> <- AQUI  VOCÊ INFORMA ONDE ESTÁ O CSS CRIADO ACIMA

</head>

<body>
<ul>
<a href=”#”  title=”Inicio”>
<li class=”sprite inicio“></li>
</a>

<a href=”#” title=”Adicionar”>
<li class=”sprite adicionar“></li>
</a>

<a href=”#” title=”Listar”>
<li class=”sprite listar“></li>
</a>
</ul>
<a href=”#” title=”Configurar”>
<li class=”sprite configurar“></li>
</a>
</ul>
</body>
</html>

Acima o arquivo HTML com a chamada externa da folha de estilos chamada de sprite.css

espero que gostem e até o próximo

Grt
DavidGois

Comentários em: "CSS – Utilizando sprites no meu site" (1)

  1. Thank you for sharing excellent informations. Your website is so cool. I am impressed by the details that you¡¦ve on this web site. It reveals how nicely you perceive this subject. Bookmarked this website page, will come back for more articles. You, my friend, ROCK! I found simply the info I already searched all over the place and simply couldn’t come across. What a perfect website.

    Curtir

Gostou Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Informática gratuita para você.

Compartilhando informação

Cartões com Arte

Um novo conceito em cartões. facebook.com/cartoescomarte.

Nouvelle vie au Canada

Casal em busca do seu sonho de morar no Canadá

Informática Gratuita

Compartilhando informação

Red Dreams

Quem disse que meus sonhos não podem ser vermelhos?

%d blogueiros gostam disto: