YOUPASS - convertir le crédit téléphonique en monnaie ! : Partenaire RealityGaming.fr

Utilisation du sprite CSS sur le forum sous forme de BB-code !

Fabien 🚀

Administrateur
Administrateur
Inscription
13 Janvier 2012
Messages
5 734
Réactions
19 171
Points
15 705
    Réponse de Fabien 🚀 Forums généraux RealityGaming 🏠 Annonces du site : Utilisation du sprite CSS sur le forum sous forme de BB-code !
  • #1
Vous devez être inscrit pour voir les fichiers joints


↑ Cette erreur te semble familière ? :neo:

Compte tenu des situations régulières où vous avez besoin d'ajouter plus d'images que la limite imposée, nous vous permettons... par le biais d'un nouveau BB-code... de pouvoir "contourner" de façon intelligente cette restriction. :)

La restriction mise en vigueur sur le site à propos des images n'est pas pour vous embêter, c'est une question de fluidité du service.

Je vous préviens, pour certains ça peut paraître incompréhensible ce que je vais décrire, mais rassurez-vous... une fois que vous l'avez réussi une fois, ça vous paraîtra tout de suite plus facile. ;)

Le BB-code repose sur les principes du sprite CSS, qu'est-ce qu'un "sprite CSS" ?
openweb.eu.org a dit:
La technique dites des sprites CSS consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Celles-ci seront ensuite appelées dans la feuille de style, et la fenêtre d’affichage sur l’une ou l’autre image sera définie en CSS grâce à la propriété background-position.

Les avantages des sprites CSS sont multiples, voici le plus intéressant :
- dans les cas de recherche de performances ou d’optimisations pointues, cette technique permet d’obtenir des résultats très intéressants en réduisant le nombre de requêtes au serveur pour afficher plusieurs images
Requis :
- Un générateur de sprites CSS
(dans le tutoriel j'utilise mais il en existe beaucoup d'autres ; exemple )

Afin d'être le plus claire possible, on va prendre pour exemple la présentation d'un code sur un jeu, il nous faut donc des boutons de console.

Vos images sont sur votre ordinateur :
Vous devez être inscrit pour voir les fichiers joints


Sélectionnez-les toutes, et créez une archive .zip
/!\ Une archive .zip est requise, pas une archive .rar
Vous devez être inscrit pour voir les fichiers joints


Allez sur le site générateur de sprites CSS :
Vous devez être inscrit pour voir les fichiers joints


→ Transférez votre archive.

Ensuite ne touchez pas les configurations présentes sur la page, sauf... à la rigueur... celles-ci :
Vous devez être inscrit pour voir les fichiers joints

Ces options vous permettent :
  1. De choisir la direction de génération du sprite : Vertical | Horizontal
  2. De choisir l'espacement entre les différentes images
Dans mon cas, je vais réduire l'espacement vertical de 50px à 10px, afin d'obtenir une image sprite réduite.

→ Générez le sprite et le CSS.

Vous obtiendrez quelque chose de semblable :
Vous devez être inscrit pour voir les fichiers joints


→ Téléchargez l'image sprite.

Le résultat de l'image sprite :

Vous devez être inscrit pour voir les fichiers joints


Comme vous pouvez le constater, toutes les images (icônes) que j'avais au début sur mon ordinateur ont été fusionnées en une seule et unique image.

Félicitations, vous avez fait le plus facile. :trollface:

Passons aux choses sérieuses, vous avez obtenu une portion de texte nommée "Règles de CSS" : conservez-la, vous en avez besoin !

Utilisation du BB-code :
  1. Uploadez l'image sprite en tant que pièce jointe sur votre sujet/message.
  2. La pièce jointe apparaît en bas, ouvrez son lien dans un nouvel onglet et récupérez son identifiant dans l'URL. (exemple : j'ai http://realitygaming.fr/attachments/csg-5255b71d5e3ea-png.7921/. L'ID est donc 7921.)
  3. Nous avons notre code CSS généré préalablement :
Code:
.sprite-PS3_L1{ background-position: 0 0; width: 27px; height: 27px; }
.sprite-PS3_L2{ background-position: 0 -37px; width: 27px; height: 27px; }
.sprite-PS3_R1{ background-position: 0 -74px; width: 27px; height: 27px; }
.sprite-PS3_R2{ background-position: 0 -111px; width: 27px; height: 27px; }
.sprite-carre{ background-position: 0 -148px; width: 27px; height: 27px; }
.sprite-croix{ background-position: 0 -185px; width: 27px; height: 27px; }
.sprite-rond{ background-position: 0 -222px; width: 27px; height: 27px; }
.sprite-triangle{ background-position: 0 -259px; width: 27px; height: 27px; }

Désignation des différentes valeurs :
  • background-position: (position du sprite)
  1. La position sur l'axe X du début de l'image.
  2. La position sur l'axe Y du début de l'image.
  • width & height: (dimensions du sprite)
  1. La hauteur de l'image qu'on souhaite afficher. (surnommé width)
  2. La largeur de l'image que l'on souhaite afficher. (surnommé height)
Ecriture du BB-code :

Il vous suffit d'utiliser le BBCode sprite de la façon suivante, dans l'ordre des paramètres : background position, puis width, puis height :
Code:
[sprite="Première valeur background position, Seconde valeur background position, width, height"]ID de votre pièce jointe[/sprite]

On obtiens donc pour chacune de nos images :
Code:
[sprite="0,0,27,27"]7921[/sprite]
Bouton L1.
Code:
[sprite="0,-37,27,27"]7921[/sprite]
Bouton L2.
Code:
[sprite="0,-74,27,27"]7921[/sprite]
Bouton R1.
Code:
[sprite="0,-111,27,27"]7921[/sprite]
Bouton R2.
Code:
[sprite="0,-148,27,27"]7921[/sprite]
Bouton Carré.
Code:
[sprite="0,-185,27,27"]7921[/sprite]
Bouton Croix.
Code:
[sprite="0,-222,27,27"]7921[/sprite]
Bouton Rond.
Code:
[sprite="0,-259,27,27"]7921[/sprite]
Bouton Triangle.

Ce qui donne en pratique ceci :


Bouton L1.

Bouton L2.

Bouton R1.

Bouton R2.

Bouton Carré.

Bouton Croix.

Bouton Rond.

Bouton Triangle.

Toutes les images sont affichées séparément, or nous n'avons qu'une seule et unique image d'utilisé, elle est simplement découpée selon la règle des sprites CSS... tout ceci adapté en BB-code XenForo.

Exemple d'une utilisation pratique :

Code invincible :


Vous pouvez donc utiliser autant de fois que vous voulez les images présentes dans votre sprite, et donc vous pouvez utiliser cette méthode pour créer des tutoriaux plus long et riches en ressource. :neo:

Même si ce BB-code ne sera, à mon avis, pas énormément utilisé, le simple fait qu'il puisse servir à une personne est suffisant pour le rendre utile. De plus, l'intégration de ce BB-code sur le site pourrait nous offrir des possibilités futures en terme d'intégration d'image dans des tutoriaux/pages créé(e)s par le staff.

Bonne lecture à tous :D
 

Fabien 🚀

Administrateur
Administrateur
Inscription
13 Janvier 2012
Messages
5 734
Réactions
19 171
Points
15 705
    Réponse de Fabien 🚀 Forums généraux RealityGaming 🏠 Annonces du site : Utilisation du sprite CSS sur le forum sous forme de BB-code !
  • #2
Autre exemple d'utilisation :

Les images utilisées sur cette page pour décrire les kits présents dans le mode "Hunger games" du serveur Minecraft officiel de RealityGaming sont issues de ce BB-code.
http://realitygaming.fr/minecraft/jeux/hunger-games.2/

IP du serveur : mc.realitygaming.fr :modo:



Code:
[sprite="-53,0,48,48"]7361[/sprite]
[sprite="-106,0,48,48"]7361[/sprite]
[sprite="-159,0,48,48"]7361[/sprite]
[sprite="-212,0,48,48"]7361[/sprite]
[sprite="-265,0,48,48"]7361[/sprite]
[sprite="-318,0,48,48"]7361[/sprite]
[sprite="-371,0,48,48"]7361[/sprite]
[sprite="0,0,48,48"]7361[/sprite]
[sprite="-424,0,48,48"]7361[/sprite]
[sprite="-477,0,48,48"]7361[/sprite]
[sprite="-530,0,48,48"]7361[/sprite]
[sprite="-583,0,48,48"]7361[/sprite]
[sprite="-636,0,48,48"]7361[/sprite]
[sprite="-689,0,48,48"]7361[/sprite]
[sprite="-742,0,48,48"]7361[/sprite]
[sprite="-795,0,48,48"]7361[/sprite]
[sprite="-848,0,48,48"]7361[/sprite]
[sprite="-901,0,48,48"]7361[/sprite]
Code:
.sprite-Ability{ background-position: 0 0; width: 48px; height: 48px; }
.sprite-Bombtastic{ background-position: -53px 0; width: 48px; height: 48px; }
.sprite-Bourne{ background-position: -106px 0; width: 48px; height: 48px; }
.sprite-Butcher{ background-position: -159px 0; width: 48px; height: 48px; }
.sprite-Creeper{ background-position: -212px 0; width: 48px; height: 48px; }
.sprite-Flower{ background-position: -265px 0; width: 48px; height: 48px; }
.sprite-Ghost{ background-position: -318px 0; width: 48px; height: 48px; }
.sprite-Herobrine{ background-position: -371px 0; width: 48px; height: 48px; }
.sprite-Libraryaddict{ background-position: -424px 0; width: 48px; height: 48px; }
.sprite-Linkage{ background-position: -477px 0; width: 48px; height: 48px; }
.sprite-Miser{ background-position: -530px 0; width: 48px; height: 48px; }
.sprite-Ninja{ background-position: -583px 0; width: 48px; height: 48px; }
.sprite-Pussy{ background-position: -636px 0; width: 48px; height: 48px; }
.sprite-Rapper{ background-position: -689px 0; width: 48px; height: 48px; }
.sprite-Salamander{ background-position: -742px 0; width: 48px; height: 48px; }
.sprite-Skinner{ background-position: -795px 0; width: 48px; height: 48px; }
.sprite-Surprise{ background-position: -848px 0; width: 48px; height: 48px; }
.sprite-Zombifier{ background-position: -901px 0; width: 48px; height: 48px; }
Comme vous le constatez, les possibilités d'utilisation sont très vastes. ;)
 

Lasagne

Membre Premium
Premium
Inscription
8 Mai 2012
Messages
2 260
Réactions
1 053
Points
9 798
    Réponse de Lasagne Forums généraux RealityGaming 🏠 Annonces du site : Utilisation du sprite CSS sur le forum sous forme de BB-code !
  • #3
J'ai jamais eu cette erreur :trollface:
 

Sni'

Staff RealityGamingTV
Rédacteur
Inscription
16 Juin 2012
Messages
6 049
Réactions
6 789
Points
13 000
    Réponse de Sni' Forums généraux RealityGaming 🏠 Annonces du site : Utilisation du sprite CSS sur le forum sous forme de BB-code !
  • #4
merci ♥ c'est cool ! :)
 

Whyouuu

Ancien staff
Ancien staff
Inscription
27 Septembre 2012
Messages
16 328
Réactions
6 902
Points
13 745
    Réponse de Whyouuu Forums généraux RealityGaming 🏠 Annonces du site : Utilisation du sprite CSS sur le forum sous forme de BB-code !
  • #5
Et sur xbox ?:d:
 

Chris'

Modérateur
Modérateur
Inscription
3 Juillet 2012
Messages
28 910
Réactions
8 486
Points
20 852
    Réponse de Chris' Forums généraux RealityGaming 🏠 Annonces du site : Utilisation du sprite CSS sur le forum sous forme de BB-code !
  • #6
Tres bonne initiative sa reviendras en Force les belles signature :)
 

Bonochapo.

Hustler
Ancien staff
Inscription
22 Octobre 2011
Messages
2 454
Réactions
760
Points
8 288
    Réponse de Bonochapo. Forums généraux RealityGaming 🏠 Annonces du site : Utilisation du sprite CSS sur le forum sous forme de BB-code !
  • #7
Flemme de lire :( mais GG :D
 

Quentin'

Assistant
Ancien staff
Inscription
9 Juin 2011
Messages
1 682
Réactions
774
Points
8 341
    Réponse de Quentin' Forums généraux RealityGaming 🏠 Annonces du site : Utilisation du sprite CSS sur le forum sous forme de BB-code !
  • #8
Il est immense ton tuto gros :o

Merci a toi :love:

bref je continue de lire xD
 

TMG

Ancien staff
Ancien staff
Inscription
9 Février 2012
Messages
1 607
Réactions
1 790
Points
10 427
    Réponse de TMG Forums généraux RealityGaming 🏠 Annonces du site : Utilisation du sprite CSS sur le forum sous forme de BB-code !
  • #9
Très bon tutoriel est très pratique merci Fabien :rêve:
 

SinaxoHD

GlitchsHacksFR
Ancien staff
Inscription
15 Septembre 2012
Messages
257
Réactions
365
Points
7 856
    Réponse de SinaxoHD Forums généraux RealityGaming 🏠 Annonces du site : Utilisation du sprite CSS sur le forum sous forme de BB-code !
  • #10
Excellent :o
 

Leden

ArmyGlitching
Ancien staff
Inscription
22 Janvier 2012
Messages
3 329
Réactions
1 904
Points
10 298
    Réponse de Leden Forums généraux RealityGaming 🏠 Annonces du site : Utilisation du sprite CSS sur le forum sous forme de BB-code !
  • #11
J'ai lu vite fait mais c'est bien rédigé et expliqué (je lirais mieux demain) GG :) je t'autorise àt'auto-récompenser, bravo. :trollface:
 

Magz'

Vétéran
Ancien staff
Inscription
29 Août 2012
Messages
10 772
Réactions
6 784
Points
15 578
    Réponse de Magz' Forums généraux RealityGaming 🏠 Annonces du site : Utilisation du sprite CSS sur le forum sous forme de BB-code !
  • #12
Tuto très complet et clair, y'a rien a redire :)
 

AdKhey

Purple Kush
Premium
Inscription
5 Mars 2013
Messages
1 801
Réactions
357
Points
6 319
    Réponse de AdKhey Forums généraux RealityGaming 🏠 Annonces du site : Utilisation du sprite CSS sur le forum sous forme de BB-code !
  • #13
Le BB-code est parfait, thank's.
 

NeyKiiZ

RealityMember
VIP
Inscription
29 Décembre 2011
Messages
5 810
Réactions
2 588
Points
11 251
    Réponse de NeyKiiZ Forums généraux RealityGaming 🏠 Annonces du site : Utilisation du sprite CSS sur le forum sous forme de BB-code !
  • #14
C'est THE tuto ! :ok:
 

MADERR

Need Help ? Call me. Online 24/24 - 7/7
Ancien staff
Inscription
22 Avril 2012
Messages
3 098
Réactions
3 507
Points
10 468
    Réponse de MADERR Forums généraux RealityGaming 🏠 Annonces du site : Utilisation du sprite CSS sur le forum sous forme de BB-code !
  • #15
Magnifique tutoriel !

Vous devez être inscrit pour voir les images


Sa marche du tonnerre :trollface:
Merci du partage !
 

xWarreη

GT : Sleyz Wzrren
Premium
Inscription
4 Mai 2013
Messages
763
Réactions
237
Points
4 026
    Réponse de xWarreη Forums généraux RealityGaming 🏠 Annonces du site : Utilisation du sprite CSS sur le forum sous forme de BB-code !
  • #16
Tiens je savais pas que ça existait ça ! Cette technique est utilisable dans les signature pour mettre plus d'images ou bien elle n'est disponible que pour la rédaction de messages ?
Merci beaucoup du tuto :)
 

Reality King

Vendeur certifié
Premium
Inscription
23 Septembre 2011
Messages
3 811
Réactions
2 027
Points
10 388
    Réponse de Reality King Forums généraux RealityGaming 🏠 Annonces du site : Utilisation du sprite CSS sur le forum sous forme de BB-code !
  • #17
Tutoriel écrit comme un champion, félicitations :bave:
 

Fabien 🚀

Administrateur
Administrateur
Inscription
13 Janvier 2012
Messages
5 734
Réactions
19 171
Points
15 705
    Réponse de Fabien 🚀 Forums généraux RealityGaming 🏠 Annonces du site : Utilisation du sprite CSS sur le forum sous forme de BB-code !
  • #18
Tiens je savais pas que ça existait ça ! Cette technique est utilisable dans les signature pour mettre plus d'images ou bien elle n'est disponible que pour la rédaction de messages ?
Merci beaucoup du tuto :)
Tu peux l'utiliser où tu veux. ;)
 

Snake's 🐍

Administrateur
Administrateur
Inscription
5 Juin 2012
Messages
8 459
Réactions
6 436
Points
14 905
    Réponse de Snake's 🐍 Forums généraux RealityGaming 🏠 Annonces du site : Utilisation du sprite CSS sur le forum sous forme de BB-code !
  • #19
GG :D
C'est parfait, mais ca prend du temps quand même D:
 

Galet BWT

Membre
Inscription
28 Mai 2012
Messages
1 007
Réactions
204
Points
7 466
    Réponse de Galet BWT Forums généraux RealityGaming 🏠 Annonces du site : Utilisation du sprite CSS sur le forum sous forme de BB-code !
  • #20
First page +gg
 
Mobile app for XenForo 2 by Appify
Haut