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

332 thoughts to “CSS – Utilizando sprites no meu site”

  1. I have been browsing online more than 3 hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. Personally, if all website owners and bloggers made good content as you did, the web will be a lot more useful than ever before.

  2. I am not sure where you are getting your information, but great topic. I needs to spend some time learning more or understanding more. Thanks for magnificent information I was looking for this information for my mission.

  3. I¡¦ve learn a few excellent stuff here. Definitely value bookmarking for revisiting. I wonder how so much attempt you place to make any such excellent informative web site.

  4. Woah! I’m really loving the template/theme of this website.
    It’s simple, yet effective. A lot of times it’s difficult to get that
    “perfect balance” between user friendliness and visual appeal.
    I must say you’ve done a very good job with this.
    In addition, the blog loads extremely quick for me on Opera.
    Outstanding Blog!

  5. hey there and thank you for your info – I have definitely picked up anything new from right here.
    I did however expertise a few technical points using this website,
    since I experienced to reload the site lots of times previous to
    I could get it to load correctly. I had been wondering
    if your hosting is OK? Not that I am complaining,
    but sluggish loading instances times will sometimes
    affect your placement in google and can damage
    your quality score if advertising and marketing with Adwords.
    Well I’m adding this RSS to my email and can look out
    for a lot more of your respective interesting content. Make sure you update this again very soon.

  6. Hello, Neat post. There’s a problem together with your website in web explorer, may test this¡K IE nonetheless is the market chief and a large component of other people will miss your wonderful writing because of this problem.

  7. As I site possessor I believe the content material here is rattling magnificent , appreciate it for your hard work. You should keep it up forever! Best of luck.

  8. Generally I do not learn article on blogs, however I wish to say that this write-up very forced me to take a look at and do it! Your writing taste has been surprised me. Thank you, quite nice article.

  9. This particular blog is obviously educating additionally factual. I have found many helpful stuff out of this amazing blog. I ad love to go back again and again. Thanks a bunch!

Comentários fechados.