CSS – Utilizando sprites no meu site

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”>
<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

Spread the word. Share this post!

4 Comments

  1. Responder

    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.

  2. Responder

    I simply want to mention I’m newbie to blogging and absolutely liked this web-site. Very likely I’m planning to bookmark your site . You absolutely come with fantastic articles. Many thanks for sharing with us your web page.

  3. Responder

    MetroClick specializes in building completely interactive products like Photo Booth for rental or sale, Touch Screen Kiosks, Large Touch Screen Displays , Monitors, Digital Signages and experiences. With our own hardware production facility and in-house software development teams, we are able to achieve the highest level of customization and versatility for Photo Booths, Touch Screen Kiosks, Touch Screen Monitors and Digital Signage. Visit MetroClick at http://www.metroclick.com/ or , 121 Varick St, New York, NY 10013, +1 646-843-0888

  4. Responder

    Faytech North America is a touch screen Manufacturer of both monitors and pcs. They specialize in the design, development, manufacturing and marketing of Capacitive touch screen, Resistive touch screen, Industrial touch screen, IP65 touch screen, touchscreen monitors and integrated touchscreen PCs. Contact them at http://www.faytech.us, 121 Varick Street, New York, NY 10013, +1 646 205 3214

Leave Comment

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *