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
Inscrit
13 Janvier 2012
Messages
5 709
J'aime
19 115
Points
11 435
Reply from Fabien 🚀 Forums gĂ©nĂ©raux RealityGaming 🏠 Annonces du site : Utilisation du sprite CSS sur le forum sous forme de BB-code ! #1
Utilisation du sprite CSS sur le forum sous forme de BB-code ! Annonces du site  Annonces du site

↑ 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
Vous devez vous inscrire pour voir les liens !
mais il en existe beaucoup d'autres ; exemple
Vous devez vous inscrire pour voir les liens !
)

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 :
Utilisation du sprite CSS sur le forum sous forme de BB-code ! Annonces du site  Annonces du site

Sélectionnez-les toutes, et créez une archive .zip
/!\ Une archive .zip est requise, pas une archive .rar
Utilisation du sprite CSS sur le forum sous forme de BB-code ! Annonces du site  Annonces du site

Allez sur le site générateur de sprites CSS :
Utilisation du sprite CSS sur le forum sous forme de BB-code ! Annonces du site  Annonces du site

→ TransfĂ©rez votre archive.

Ensuite ne touchez pas les configurations présentes sur la page, sauf... à la rigueur... celles-ci :
Utilisation du sprite CSS sur le forum sous forme de BB-code ! Annonces du site  Annonces du site
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 :
Utilisation du sprite CSS sur le forum sous forme de BB-code ! Annonces du site  Annonces du site

→ TĂ©lĂ©chargez l'image sprite.

Le résultat de l'image sprite :

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

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
    Vous devez vous inscrire pour voir les liens !
    . 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 :

[sprite="0,0,27,27"]7921[/sprite]
Bouton L1.
[sprite="0,-37,27,27"]7921[/sprite]
Bouton L2.
[sprite="0,-74,27,27"]7921[/sprite]
Bouton R1.
[sprite="0,-111,27,27"]7921[/sprite]
Bouton R2.
[sprite="0,-148,27,27"]7921[/sprite]
Bouton Carré.
[sprite="0,-185,27,27"]7921[/sprite]
Bouton Croix.
[sprite="0,-222,27,27"]7921[/sprite]
Bouton Rond.
[sprite="0,-259,27,27"]7921[/sprite]
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 :
[sprite="0,-74,27,27"]7921[/sprite][sprite="0,-74,27,27"]7921[/sprite][sprite="0,-222,27,27"]7921[/sprite][sprite="0,-148,27,27"]7921[/sprite][sprite="0,-148,27,27"]7921[/sprite][sprite="0,-259,27,27"]7921[/sprite][sprite="0,-111,27,27"]7921[/sprite][sprite="0,-259,27,27"]7921[/sprite]

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
Inscrit
13 Janvier 2012
Messages
5 709
J'aime
19 115
Points
11 435
Reply from 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.
Vous devez vous inscrire pour voir les liens !


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

[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="-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
Inscrit
8 Mai 2012
Messages
2 263
J'aime
1 053
Points
5 548
Reply from 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

RĂ©dacteur
RĂ©dacteur
Inscrit
16 Juin 2012
Messages
5 948
J'aime
6 374
Points
8 730
Reply from 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 ! :)
 

Chris'

Modérateur
Modérateur
Inscrit
3 Juillet 2012
Messages
27 556
J'aime
8 355
Points
16 182
Reply from 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 :) GÂČ
 

Bonochapo.

Hustler
Ancien staff
Inscrit
22 Octobre 2011
Messages
2 457
J'aime
762
Points
5 038
Reply from 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
Inscrit
9 Juin 2011
Messages
1 674
J'aime
772
Points
5 091
Reply from 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

Ex-GlitchsHacksFR
Ancien staff
Inscrit
9 FĂ©vrier 2012
Messages
1 568
J'aime
1 790
Points
6 157
Reply from 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
Inscrit
15 Septembre 2012
Messages
256
J'aime
365
Points
4 585
Reply from 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
Inscrit
22 Janvier 2012
Messages
3 337
J'aime
1 905
Points
6 048
Reply from 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
Inscrit
29 Août 2012
Messages
10 777
J'aime
6 788
Points
11 328
Reply from 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
Inscrit
5 Mars 2013
Messages
1 804
J'aime
357
Points
4 819
Reply from 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
Inscrit
29 DĂ©cembre 2011
Messages
5 786
J'aime
2 588
Points
7 001
Reply from 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:
 

Elyo.DENiiM

Need Help ? Call me. Online 24/24 - 7/7
Ancien staff
Inscrit
22 Avril 2012
Messages
3 102
J'aime
3 474
Points
6 218
Reply from Elyo.DENiiM Forums gĂ©nĂ©raux RealityGaming 🏠 Annonces du site : Utilisation du sprite CSS sur le forum sous forme de BB-code ! #15
Magnifique tutoriel !

proxy.php?image=http%3A%2F%2Frealitygaming.fr%2Fattachments%2Fcsg-5255b71d5e3ea-png.7921%2F&hash=1cee9dda5cbea00ad32c401873f427fa


Sa marche du tonnerre :trollface:
Merci du partage !
 

xWarreη

GT : Sleyz Wzrren
Premium
Inscrit
4 Mai 2013
Messages
763
J'aime
237
Points
4 026
Reply from 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
Inscrit
23 Septembre 2011
Messages
3 803
J'aime
2 017
Points
5 718
Reply from 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
Inscrit
13 Janvier 2012
Messages
5 709
J'aime
19 115
Points
11 435
Reply from 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
Inscrit
5 Juin 2012
Messages
8 448
J'aime
6 375
Points
10 635
Reply from 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:
 
Inscrit
28 Mai 2012
Messages
1 007
J'aime
204
Points
4 216
Reply from 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
 


Haut