Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Quoi de neuf
Nouveaux messages
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
RealityGaming
Annonces du site
Utilisation du sprite CSS sur le forum sous forme de BB-code !
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="Fabien 🚀" data-source="post: 2142866" data-attributes="member: 38138"><p>[ATTACH=full]7913[/ATTACH]</p><p></p><p>↑ Cette erreur te semble familière ? <img src="/images/smiley-pack/neo.gif" class="smilie" loading="lazy" alt=":neo:" title="Neo :neo:" data-shortname=":neo:" /> ↑</p><p></p><p>Compte tenu des <strong>situations régulières</strong> où vous avez besoin d'<strong>ajouter plus d'images que la limite imposée</strong>, nous vous permettons... par le biais d'un <strong>nouveau BB-code</strong>... de pouvoir "contourner" de façon intelligente cette restriction. <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /></p><p></p><p><em>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.</em></p><p></p><p>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. <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite351" alt=";)" title="Clin d'oeil ;)" loading="lazy" data-shortname=";)" /></p><p></p><p><strong><u>Le BB-code repose sur les principes du sprite CSS, qu'est-ce qu'un "sprite CSS" ?</u></strong></p><p></p><p><u>Requis :</u></p><p>- Un <strong>générateur de sprites CSS</strong></p><p>(dans le tutoriel j'utilise <a href="http://fr.spritegen.website-performance.org/" target="_blank">celui-ci</a> mais il en existe beaucoup d'autres ; exemple <a href="http://csssprites.com/" target="_blank">ici</a>)</p><p></p><p>Afin d'être <strong>le plus claire possible</strong>, on va prendre pour exemple la présentation d'un code sur un jeu, il nous faut donc des boutons de console.</p><p></p><p><u>Vos images sont sur votre ordinateur :</u></p><p>[ATTACH=full]7914[/ATTACH]</p><p></p><p>Sélectionnez-les toutes, et créez une <strong>archive .zip</strong></p><p><span style="color: #ff0000"><strong>/!\</strong> Une archive .zip est requise, pas une archive .rar</span></p><p>[ATTACH=full]7916[/ATTACH]</p><p></p><p><u>Allez sur le site générateur de sprites CSS :</u></p><p>[ATTACH=full]7915[/ATTACH]</p><p></p><p>→ Transférez votre archive.</p><p></p><p><u>Ensuite ne touchez pas les configurations présentes sur la page, sauf... à la rigueur... celles-ci :</u></p><p>[ATTACH=full]7917[/ATTACH]</p><p><u>Ces options vous permettent :</u></p><ol> <li data-xf-list-type="ol">De choisir la direction de génération du sprite : <strong>Vertical</strong> | <strong>Horizontal</strong></li> <li data-xf-list-type="ol">De choisir l'espacement entre les différentes images</li> </ol><p>Dans mon cas, je vais <strong>réduire l'espacement vertical de 50px à 10px</strong>, afin d'obtenir une image sprite réduite.</p><p></p><p>→ Générez le sprite et le CSS.</p><p></p><p><u>Vous obtiendrez quelque chose de semblable :</u></p><p>[ATTACH=full]7920[/ATTACH]</p><p></p><p>→ Téléchargez l'image sprite.</p><p></p><p><u>Le résultat de l'image sprite :</u></p><p><u></u></p><p>[ATTACH=full]7921[/ATTACH]</p><p></p><p>Comme vous pouvez le constater, toutes les images (icônes) que j'avais au début sur mon ordinateur ont été fusionnées en <strong>une seule et unique image</strong>.</p><p></p><p>Félicitations, <s>vous avez fait le plus facile.</s> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite375" alt=":trollface:" title="Trollface :trollface:" loading="lazy" data-shortname=":trollface:" /></p><p></p><p>Passons aux choses sérieuses, vous avez obtenu une portion de texte nommée "<strong>Règles de CSS</strong>" : <strong><span style="color: #ff0000">conservez-la, vous en avez besoin !</span></strong></p><p><strong><span style="color: #ff0000"></span></strong></p><p><u>Utilisation du BB-code :</u></p><ol> <li data-xf-list-type="ol"><strong>Uploadez l'image sprite en tant que pièce jointe</strong> sur votre sujet/message.</li> <li data-xf-list-type="ol">La pièce jointe apparaît en bas, ouvrez son lien dans un nouvel onglet et <strong>récupérez son identifiant</strong> dans l'URL. (exemple : j'ai <a href="http://reality-gaming.fr/attachments/csg-5255b71d5e3ea-png.7921/" target="_blank">http://reality-gaming.fr/attachments/csg-5255b71d5e3ea-png.7921/</a>. L'ID est donc <strong>7921</strong>.)</li> <li data-xf-list-type="ol"><u>Nous avons notre code CSS généré préalablement :</u></li> </ol><p>[code].sprite-PS3_L1{ background-position: 0 0; width: 27px; height: 27px; }</p><p>.sprite-PS3_L2{ background-position: 0 -37px; width: 27px; height: 27px; }</p><p>.sprite-PS3_R1{ background-position: 0 -74px; width: 27px; height: 27px; }</p><p>.sprite-PS3_R2{ background-position: 0 -111px; width: 27px; height: 27px; }</p><p>.sprite-carre{ background-position: 0 -148px; width: 27px; height: 27px; }</p><p>.sprite-croix{ background-position: 0 -185px; width: 27px; height: 27px; }</p><p>.sprite-rond{ background-position: 0 -222px; width: 27px; height: 27px; }</p><p>.sprite-triangle{ background-position: 0 -259px; width: 27px; height: 27px; } [/code]</p><p></p><p></p><p><u>Désignation des différentes valeurs :</u></p><ul> <li data-xf-list-type="ul"><strong>background-position: </strong>(position du sprite)</li> </ul> <ol> <li data-xf-list-type="ol">La position sur l'axe X du début de l'image.</li> <li data-xf-list-type="ol">La position sur l'axe Y du début de l'image.</li> </ol> <ul> <li data-xf-list-type="ul"><strong>width & height: </strong>(dimensions du sprite)</li> </ul> <ol> <li data-xf-list-type="ol">La hauteur de l'image qu'on souhaite afficher. (surnommé width)</li> <li data-xf-list-type="ol">La largeur de l'image que l'on souhaite afficher. (surnommé height)</li> </ol><p><u>Ecriture du BB-code :</u></p><p><u></u></p><p>Il vous suffit d'<strong>utiliser le BBCode</strong> sprite de la façon suivante, dans l'ordre des paramètres : background position, puis width, puis height :</p><p>[code][sprite="Première valeur background position, Seconde valeur background position, width, height"]ID de votre pièce jointe[/sprite][/code]</p><p></p><p></p><p><u>On obtiens donc pour chacune de nos images :</u></p><p>[code][sprite="0,0,27,27"]7921[/sprite][/code]</p><p>Bouton <strong>L1</strong>.</p><p>[code][sprite="0,-37,27,27"]7921[/sprite][/code]</p><p>Bouton <strong>L2</strong>.</p><p>[code][sprite="0,-74,27,27"]7921[/sprite][/code]</p><p>Bouton <strong>R1</strong>.</p><p>[code][sprite="0,-111,27,27"]7921[/sprite][/code]</p><p>Bouton <strong>R2</strong>.</p><p>[code][sprite="0,-148,27,27"]7921[/sprite][/code]</p><p>Bouton <strong>Carré</strong>.</p><p>[code][sprite="0,-185,27,27"]7921[/sprite][/code]</p><p>Bouton <strong>Croix</strong>.</p><p>[code][sprite="0,-222,27,27"]7921[/sprite][/code]</p><p>Bouton <strong>Rond</strong>.</p><p>[code][sprite="0,-259,27,27"]7921[/sprite][/code]</p><p>Bouton <strong>Triangle</strong>.</p><p></p><p><u>Ce qui donne en pratique ceci :</u></p><p><u></u></p><p>[sprite="0,0,27,27"]7921[/sprite]</p><p>Bouton <strong>L1</strong>.</p><p>[sprite="0,-37,27,27"]7921[/sprite]</p><p>Bouton <strong>L2</strong>.</p><p>[sprite="0,-74,27,27"]7921[/sprite]</p><p>Bouton <strong>R1</strong>.</p><p>[sprite="0,-111,27,27"]7921[/sprite]</p><p>Bouton <strong>R2</strong>.</p><p>[sprite="0,-148,27,27"]7921[/sprite]</p><p>Bouton <strong>Carré</strong>.</p><p>[sprite="0,-185,27,27"]7921[/sprite]</p><p>Bouton <strong>Croix</strong>.</p><p>[sprite="0,-222,27,27"]7921[/sprite]</p><p>Bouton <strong>Rond</strong>.</p><p>[sprite="0,-259,27,27"]7921[/sprite]</p><p>Bouton <strong>Triangle</strong>.</p><p></p><p><strong>Toutes les images sont affichées séparément</strong>, or nous n'<strong>avons qu'une seule et unique image d'utilisé</strong>, elle est simplement découpée selon <strong>la règle des sprites CSS</strong>... tout ceci <strong>adapté en BB-code XenForo</strong>.</p><p></p><p><u>Exemple d'une utilisation pratique :</u></p><p></p><p><strong>Code invincible :</strong></p><p>[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]</p><p></p><p>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. <img src="/images/smiley-pack/neo.gif" class="smilie" loading="lazy" alt=":neo:" title="Neo :neo:" data-shortname=":neo:" /></p><p></p><p>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.</p><p></p><p>Bonne lecture à tous <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite171" alt=":D" title="Awesome face :D" loading="lazy" data-shortname=":D" /></p></blockquote><p></p>
[QUOTE="Fabien 🚀, post: 2142866, member: 38138"] [ATTACH=full]7913[/ATTACH] ↑ Cette erreur te semble familière ? :neo: ↑ Compte tenu des [B]situations régulières[/B] où vous avez besoin d'[B]ajouter plus d'images que la limite imposée[/B], nous vous permettons... par le biais d'un [B]nouveau BB-code[/B]... de pouvoir "contourner" de façon intelligente cette restriction. :) [I]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.[/I] 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. ;) [B][U]Le BB-code repose sur les principes du sprite CSS, qu'est-ce qu'un "sprite CSS" ?[/U][/B] [U]Requis :[/U] - Un [B]générateur de sprites CSS[/B] (dans le tutoriel j'utilise [URL='http://fr.spritegen.website-performance.org/']celui-ci[/URL] mais il en existe beaucoup d'autres ; exemple [URL='http://csssprites.com/']ici[/URL]) Afin d'être [B]le plus claire possible[/B], on va prendre pour exemple la présentation d'un code sur un jeu, il nous faut donc des boutons de console. [U]Vos images sont sur votre ordinateur :[/U] [ATTACH=full]7914[/ATTACH] Sélectionnez-les toutes, et créez une [B]archive .zip[/B] [COLOR=#ff0000][B]/!\[/B] Une archive .zip est requise, pas une archive .rar[/COLOR] [ATTACH=full]7916[/ATTACH] [U]Allez sur le site générateur de sprites CSS :[/U] [ATTACH=full]7915[/ATTACH] → Transférez votre archive. [U]Ensuite ne touchez pas les configurations présentes sur la page, sauf... à la rigueur... celles-ci :[/U] [ATTACH=full]7917[/ATTACH] [U]Ces options vous permettent :[/U] [LIST=1] [*]De choisir la direction de génération du sprite : [B]Vertical[/B] | [B]Horizontal[/B] [*]De choisir l'espacement entre les différentes images [/LIST] Dans mon cas, je vais [B]réduire l'espacement vertical de 50px à 10px[/B], afin d'obtenir une image sprite réduite. → Générez le sprite et le CSS. [U]Vous obtiendrez quelque chose de semblable :[/U] [ATTACH=full]7920[/ATTACH] → Téléchargez l'image sprite. [U]Le résultat de l'image sprite : [/U] [ATTACH=full]7921[/ATTACH] Comme vous pouvez le constater, toutes les images (icônes) que j'avais au début sur mon ordinateur ont été fusionnées en [B]une seule et unique image[/B]. Félicitations, [S]vous avez fait le plus facile.[/S] :troll: Passons aux choses sérieuses, vous avez obtenu une portion de texte nommée "[B]Règles de CSS[/B]" : [B][COLOR=#ff0000]conservez-la, vous en avez besoin ! [/COLOR][/B] [U]Utilisation du BB-code :[/U] [LIST=1] [*][B]Uploadez l'image sprite en tant que pièce jointe[/B] sur votre sujet/message. [*]La pièce jointe apparaît en bas, ouvrez son lien dans un nouvel onglet et [B]récupérez son identifiant[/B] dans l'URL. (exemple : j'ai [URL]http://reality-gaming.fr/attachments/csg-5255b71d5e3ea-png.7921/[/URL]. L'ID est donc [B]7921[/B].) [*][U]Nous avons notre code CSS généré préalablement :[/U] [/LIST] [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; } [/code] [U]Désignation des différentes valeurs :[/U] [LIST] [*][B]background-position: [/B](position du sprite) [/LIST] [LIST=1] [*]La position sur l'axe X du début de l'image. [*]La position sur l'axe Y du début de l'image. [/LIST] [LIST] [*][B]width & height: [/B](dimensions du sprite) [/LIST] [LIST=1] [*]La hauteur de l'image qu'on souhaite afficher. (surnommé width) [*]La largeur de l'image que l'on souhaite afficher. (surnommé height) [/LIST] [U]Ecriture du BB-code : [/U] Il vous suffit d'[B]utiliser le BBCode[/B] 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][/code] [U]On obtiens donc pour chacune de nos images :[/U] [code][sprite="0,0,27,27"]7921[/sprite][/code] Bouton [B]L1[/B]. [code][sprite="0,-37,27,27"]7921[/sprite][/code] Bouton [B]L2[/B]. [code][sprite="0,-74,27,27"]7921[/sprite][/code] Bouton [B]R1[/B]. [code][sprite="0,-111,27,27"]7921[/sprite][/code] Bouton [B]R2[/B]. [code][sprite="0,-148,27,27"]7921[/sprite][/code] Bouton [B]Carré[/B]. [code][sprite="0,-185,27,27"]7921[/sprite][/code] Bouton [B]Croix[/B]. [code][sprite="0,-222,27,27"]7921[/sprite][/code] Bouton [B]Rond[/B]. [code][sprite="0,-259,27,27"]7921[/sprite][/code] Bouton [B]Triangle[/B]. [U]Ce qui donne en pratique ceci : [/U] [sprite="0,0,27,27"]7921[/sprite] Bouton [B]L1[/B]. [sprite="0,-37,27,27"]7921[/sprite] Bouton [B]L2[/B]. [sprite="0,-74,27,27"]7921[/sprite] Bouton [B]R1[/B]. [sprite="0,-111,27,27"]7921[/sprite] Bouton [B]R2[/B]. [sprite="0,-148,27,27"]7921[/sprite] Bouton [B]Carré[/B]. [sprite="0,-185,27,27"]7921[/sprite] Bouton [B]Croix[/B]. [sprite="0,-222,27,27"]7921[/sprite] Bouton [B]Rond[/B]. [sprite="0,-259,27,27"]7921[/sprite] Bouton [B]Triangle[/B]. [B]Toutes les images sont affichées séparément[/B], or nous n'[B]avons qu'une seule et unique image d'utilisé[/B], elle est simplement découpée selon [B]la règle des sprites CSS[/B]... tout ceci [B]adapté en BB-code XenForo[/B]. [U]Exemple d'une utilisation pratique :[/U] [B]Code invincible :[/B] [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 [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
RealityGaming
Annonces du site
Utilisation du sprite CSS sur le forum sous forme de BB-code !
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut