Cette section est close pour le moment.
Mais je n'arrête pas la veille, loin de là. Retrouvez mes projets sur Github et sur cette page qui sera à jour plus régulierement


Ressources

Définition de ressource : (nom féminin) Qui peut fournir ce dont on a besoin.
Vous l'aurez compris, sur cette page ce ne sont pas vraiment des tutoriels, c'est plutôt des penses-bêtes plus ou moins fournis mais qui vous permettront d'avoir des bases concernant la programmation.
Recherche par tag

Organiser les images dans un sprite

Organiser les images dans un sprite
Publication : Le 11/10/2012 à 18:35:59

Introduction

Une charte graphique avec beaucoup d'images peut mettre du temps à s'afficher. Pour remédier à ce problème vous pouvez créer une seule image qui les contiendra toutes.

Charger une image, c'est toujours plus rapide qu'en charger plusieurs, non ?

Le CSS

Une fois votre image créée, il faut passer au fichier CSS.

Vous allez devoir créer des classes qui vont utiliser la propriété "background".

Pour chaque classe vous allez devoir spécifier la position et la taille de chaque élément.
<style>
.exemple-de-sprite{
 background-image:url(sprite.jpg);
 background-repeat:no-repeat;
 background-position:20px 20px;
 width:50px;
 height:20px;
}
</style>

L'utilisation

Une fois la classe créée vous pouvez l'utiliser dans toutes les balises HTML.
<a href="mon-lien" class="exemple-de-sprite"></a>

Conclusion

Attention à bien choisir les images à intégrer dans votre sprite. Une fois le sprite créé, il faut éviter de le modifier, décaler une image d'un petit pixel et votre charte graphique ne ressemblera plus à rien.

Sur le même thème

Organiser les images dans un sprite
Publication : Le 11/10/2012 à 18:35:59

Tags

Tag : CSS

Suggestion :

Coder votre CSS avec des variables en utilisant Less

Coder votre CSS avec des variables en utilisant Less