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
Discussions générales
Création et utilisation des sprite BBCODE sur RealityGaming
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="1899" data-source="post: 6637970" data-attributes="member: 146051"><p style="text-align: center">[ATTACH=full]91990[/ATTACH]</p> <p style="text-align: center">Bonjour à tous, bienvenue dans ce tutoriel où je vais vous <strong><span style="color: #0059b3">apprendre [FA]fa-graduation-cap[/FA]</span></strong> l'utilisation des balises <strong><span style="color: #0059b3">sprite BBCODE [FA]fa-terminal[/FA]</span></strong> .</p> <p style="text-align: center"></p> <p style="text-align: center">[ATTACH=full]91989[/ATTACH]</p> <p style="text-align: center"><strong><span style="color: rgb(0, 89, 179)"><span style="font-size: 22px">[FA]fa-check-square[/FA] Qu'est ce que le sprite BBCODE ?</span></span></strong></p> <p style="text-align: center"></p> <p style="text-align: center">Le <strong><span style="color: #0059b3">sprite BBCODE [FA]fa-terminal[/FA]</span></strong> est une balise permettant de choisir la zone à afficher sur une <strong><span style="color: #0059b3">image [FA]fa-image[/FA]</span></strong> et vous servira également à outrepasser la <strong><span style="color: #0059b3">limite [FA]fa-warning[/FA]</span></strong> de 25 images dans un topic. De ce fait, vos topics peuvent être uniquement constitué d'images sans vous soucier pour autant de cette limite, de plus vos images ne pourront pas être récupéré par les gens, sauf si <strong><span style="color: #0059b3">l'utilisateur [FA]fa-user[/FA]</span></strong> fouille dans les ressources de la page.</p> <p style="text-align: center"></p> <p style="text-align: center"><strong><span style="font-size: 22px"><span style="color: #0059b3">[FA]fa-angle-right[/FA] Une petite démonstration ?</span></span></strong></p> <p style="text-align: center"></p> <p style="text-align: center">Voici mon image que je souhaite afficher avec du sprite :</p> <p style="text-align: center">[ATTACH=full]91991[/ATTACH]</p> <p style="text-align: center">Voici le rendu maintenant avec l'utilisation des<strong><span style="color: #0059b3"> balises [FA]fa-terminal[/FA]</span></strong> sprite :</p> <p style="text-align: center">Bonjour [sprite=0, 0, 27, 27]91939[/sprite], ceci est un [sprite=-27, 0, 27, 27]91939[/sprite] texte d'exemple [sprite=0, 27, 27, 27]91939[/sprite] pour vous montrer [sprite=-27, -27, 27, 27]91939[/sprite] l'utilisation d'un sprite [sprite=-54, 0, 27, 27]91939[/sprite] BBCODE sur RealityGaming [sprite=-54, -27, 27, 27]91939[/sprite]. Ceci est vraiment [sprite=0, -54, 27, 27]91939[/sprite] très utile pour réaliser [sprite=-27, -54, 27, 27]91939[/sprite] de beau topic.</p> <p style="text-align: center"></p> <p style="text-align: center">Vous commencez à comprendre l'utilité d'un sprite BBCODE ?</p> <p style="text-align: center"></p> <p style="text-align: center"><strong><span style="font-size: 22px"><span style="color: #0059b3">[FA]fa-cogs[/FA] Comment faire les sprite BBCODE</span></span></strong></p> <p style="text-align: center"></p> <p style="text-align: center">Commencez par créer un <strong><span style="color: #0059b3">dossier [FA]fa-folder-open-o[/FA]</span></strong> où vous y mettrez toutes vos <strong><span style="color: #0059b3">images [FA]fa-image[/FA]</span></strong> que vous souhaitez afficher sous forme de sprite :</p> <p style="text-align: center"><img src="http://image.prntscr.com/image/1cbf4533785642f49c16790b36d0299b.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"></p> <p style="text-align: center">Une fois fait, rendez vous sur <strong><span style="color: #0059b3"><a href="http://spritegen.website-performance.org/" target="_blank">ce site</a> [FA]fa-globe[/FA]</span></strong> et cliquez sur le bouton Open à gauche. Une fois fait, sélectionnez votre <strong><span style="color: #0059b3">fichier [FA]fa-folder-open-o[/FA]</span> </strong>et sélectionnez toutes vos <strong><span style="color: #0059b3">images [FA]fa-image[/FA]</span> </strong>contenu dans ce même fichier.</p> <p style="text-align: center">Vos images s'afficherons juste en dessous, maintenant passons à la<strong><span style="color: #0059b3"> configuration [FA]fa-cogs[/FA]</span></strong> du sprite !</p> <p style="text-align: center"><img src="http://image.prntscr.com/image/bb3f8e1e1a54481fb90a8cf900785db3.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"></p> <p style="text-align: center">Layout : sélectionnez l'affichage qu'il vous convient, verticale, horizontale ou compacte (ce que j'utilise).</p> <p style="text-align: center">CSS/LESS : cela n'a pas vraiment d'importance, on retrouve ce qui nous intéresse dans les deux choix.</p> <p style="text-align: center">Style prefix : c'est pas utile dans notre tutoriel, c'est pour définir le nom de la class en CSS.</p> <p style="text-align: center">Padding : c'est l'espacement entre les images, j'ai choisi 0 afin d'être plus précis (dans ce cas, aucun espacement n'est ajouté).</p> <p style="text-align: center">Data URL : inutile, c'est un créer une URL data.</p> <p style="text-align: center"></p> <p style="text-align: center">Une fois vos paramètres effectués, cliquez sur <strong><span style="color: #0059b3">Save [FA]fa-cogs[/FA] </span></strong>et sur <strong><span style="color: #0059b3">Download [FA]fa-download[/FA]</span></strong> en haut et ne fermez pas le site, vous en aurez encore besoin.</p> <p style="text-align: center">Votre image créée se <strong><span style="color: #0059b3">téléchargera [FA]fa-download[/FA]</span></strong>, il ne vous reste plus qu'à la <strong><span style="color: #0059b3">mettre en ligne [FA]fa-arrow-circle-o-up[/FA]</span></strong> en utilisant "Transférer un fichier" lors de la création d'un topic. C'est très important de ne pas rater cette étape sinon vous risquerez de rencontrer quelques problèmes.</p> <p style="text-align: center"></p> <p style="text-align: center">Une fois votre image mise en ligne, trouvez l'ID de votre image, pour ma part l'ID de mon sprite est 91939.</p> <p style="text-align: center"><span style="font-size: 12px"><a href="https://reality-gaming.fr/attachments/spritesheet-3-png.91939/" target="_blank">https://reality-gaming.fr/attachments/spritesheet-3-png.<strong>91939/</strong></a></span></p> <p style="text-align: center"></p> <p style="text-align: center">Maintenant, passons à l'intégration de votre sprite :</p> <p style="text-align: center">Retournez sur le site, et allez dans la <strong><span style="color: #0059b3">catégorie CSS [FA]fa-terminal[/FA]</span></strong> où vous retrouverez les lignes de <strong><span style="color: #0059b3">code CSS [FA]fa-terminal[/FA]</span></strong>.</p><p>[CODE]</p><p>.sprite-carr_ {</p><p> width: 27px;</p><p> height: 27px;</p><p> background-position: 0 0;</p><p>}[/CODE]</p><p></p><p style="text-align: center">Ces lignes de code sont les plus<strong><span style="color: #0059b3"> importantes [FA]fa-thumbs-o-up[/FA]</span></strong>.</p> <p style="text-align: center">Maintenant, passons à la balise :</p> <p style="text-align: center">[plain][sprite=background-position, background-position, width, height]ID[/sprite]</p> <p style="text-align: center">Ce qui me donne :</p> <p style="text-align: center">[sprite=0, 0, 27, 27]91939[/sprite][/plain]</p> <p style="text-align: center">Pour au final afficher ceci :</p> <p style="text-align: center">[sprite=0, 0, 27, 27]91939[/sprite]</p> <p style="text-align: center"></p> <p style="text-align: center">[ATTACH=full]91989[/ATTACH]</p> <p style="text-align: center">Le tutoriel est déjà terminé, si vous avez des questions à propos de ces balises, je suis disponible <img src="/data/assets/smilies/joueur.gif" class="smilie" loading="lazy" alt=":p" title="Joueur :p" data-shortname=":p" /></p> <p style="text-align: center"></p> <p style="text-align: center">Bonne journée <img src="/data/assets/smilies/bye.gif" class="smilie" loading="lazy" alt=":bye:" title="Bye :bye:" data-shortname=":bye:" /></p></blockquote><p></p>
[QUOTE="1899, post: 6637970, member: 146051"] [CENTER][ATTACH=full]91990[/ATTACH] Bonjour à tous, bienvenue dans ce tutoriel où je vais vous [B][COLOR=#0059b3]apprendre [FA]fa-graduation-cap[/FA][/COLOR][/B] l'utilisation des balises [B][COLOR=#0059b3]sprite BBCODE [FA]fa-terminal[/FA][/COLOR][/B] . [ATTACH=full]91989[/ATTACH] [B][COLOR=rgb(0, 89, 179)][SIZE=6][FA]fa-check-square[/FA] Qu'est ce que le sprite BBCODE ?[/SIZE][/COLOR][/B] Le [B][COLOR=#0059b3]sprite BBCODE [FA]fa-terminal[/FA][/COLOR][/B] est une balise permettant de choisir la zone à afficher sur une [B][COLOR=#0059b3]image [FA]fa-image[/FA][/COLOR][/B] et vous servira également à outrepasser la [B][COLOR=#0059b3]limite [FA]fa-warning[/FA][/COLOR][/B] de 25 images dans un topic. De ce fait, vos topics peuvent être uniquement constitué d'images sans vous soucier pour autant de cette limite, de plus vos images ne pourront pas être récupéré par les gens, sauf si [B][COLOR=#0059b3]l'utilisateur [FA]fa-user[/FA][/COLOR][/B] fouille dans les ressources de la page. [B][SIZE=6][COLOR=#0059b3][FA]fa-angle-right[/FA] Une petite démonstration ?[/COLOR][/SIZE][/B] Voici mon image que je souhaite afficher avec du sprite : [ATTACH=full]91991[/ATTACH] Voici le rendu maintenant avec l'utilisation des[B][COLOR=#0059b3] balises [FA]fa-terminal[/FA][/COLOR][/B] sprite : Bonjour [sprite=0, 0, 27, 27]91939[/sprite], ceci est un [sprite=-27, 0, 27, 27]91939[/sprite] texte d'exemple [sprite=0, 27, 27, 27]91939[/sprite] pour vous montrer [sprite=-27, -27, 27, 27]91939[/sprite] l'utilisation d'un sprite [sprite=-54, 0, 27, 27]91939[/sprite] BBCODE sur RealityGaming [sprite=-54, -27, 27, 27]91939[/sprite]. Ceci est vraiment [sprite=0, -54, 27, 27]91939[/sprite] très utile pour réaliser [sprite=-27, -54, 27, 27]91939[/sprite] de beau topic. Vous commencez à comprendre l'utilité d'un sprite BBCODE ? [B][SIZE=6][COLOR=#0059b3][FA]fa-cogs[/FA] Comment faire les sprite BBCODE[/COLOR][/SIZE][/B] Commencez par créer un [B][COLOR=#0059b3]dossier [FA]fa-folder-open-o[/FA][/COLOR][/B] où vous y mettrez toutes vos [B][COLOR=#0059b3]images [FA]fa-image[/FA][/COLOR][/B] que vous souhaitez afficher sous forme de sprite : [IMG]http://image.prntscr.com/image/1cbf4533785642f49c16790b36d0299b.png[/IMG] Une fois fait, rendez vous sur [B][COLOR=#0059b3][URL='http://spritegen.website-performance.org/']ce site[/URL] [FA]fa-globe[/FA][/COLOR][/B] et cliquez sur le bouton Open à gauche. Une fois fait, sélectionnez votre [B][COLOR=#0059b3]fichier [FA]fa-folder-open-o[/FA][/COLOR] [/B]et sélectionnez toutes vos [B][COLOR=#0059b3]images [FA]fa-image[/FA][/COLOR] [/B]contenu dans ce même fichier. Vos images s'afficherons juste en dessous, maintenant passons à la[B][COLOR=#0059b3] configuration [FA]fa-cogs[/FA][/COLOR][/B] du sprite ! [IMG]http://image.prntscr.com/image/bb3f8e1e1a54481fb90a8cf900785db3.png[/IMG] Layout : sélectionnez l'affichage qu'il vous convient, verticale, horizontale ou compacte (ce que j'utilise). CSS/LESS : cela n'a pas vraiment d'importance, on retrouve ce qui nous intéresse dans les deux choix. Style prefix : c'est pas utile dans notre tutoriel, c'est pour définir le nom de la class en CSS. Padding : c'est l'espacement entre les images, j'ai choisi 0 afin d'être plus précis (dans ce cas, aucun espacement n'est ajouté). Data URL : inutile, c'est un créer une URL data. Une fois vos paramètres effectués, cliquez sur [B][COLOR=#0059b3]Save [FA]fa-cogs[/FA] [/COLOR][/B]et sur [B][COLOR=#0059b3]Download [FA]fa-download[/FA][/COLOR][/B] en haut et ne fermez pas le site, vous en aurez encore besoin. Votre image créée se [B][COLOR=#0059b3]téléchargera [FA]fa-download[/FA][/COLOR][/B], il ne vous reste plus qu'à la [B][COLOR=#0059b3]mettre en ligne [FA]fa-arrow-circle-o-up[/FA][/COLOR][/B] en utilisant "Transférer un fichier" lors de la création d'un topic. C'est très important de ne pas rater cette étape sinon vous risquerez de rencontrer quelques problèmes. Une fois votre image mise en ligne, trouvez l'ID de votre image, pour ma part l'ID de mon sprite est 91939. [SIZE=3][URL='https://reality-gaming.fr/attachments/spritesheet-3-png.91939/']https://reality-gaming.fr/attachments/spritesheet-3-png.[B]91939/[/B][/URL][/SIZE] Maintenant, passons à l'intégration de votre sprite : Retournez sur le site, et allez dans la [B][COLOR=#0059b3]catégorie CSS [FA]fa-terminal[/FA][/COLOR][/B] où vous retrouverez les lignes de [B][COLOR=#0059b3]code CSS [FA]fa-terminal[/FA][/COLOR][/B].[/CENTER] [CODE] .sprite-carr_ { width: 27px; height: 27px; background-position: 0 0; }[/CODE] [CENTER]Ces lignes de code sont les plus[B][COLOR=#0059b3] importantes [FA]fa-thumbs-o-up[/FA][/COLOR][/B]. Maintenant, passons à la balise : [plain][sprite=background-position, background-position, width, height]ID[/sprite] Ce qui me donne : [sprite=0, 0, 27, 27]91939[/sprite][/plain] Pour au final afficher ceci : [sprite=0, 0, 27, 27]91939[/sprite] [ATTACH=full]91989[/ATTACH] Le tutoriel est déjà terminé, si vous avez des questions à propos de ces balises, je suis disponible :p Bonne journée :bye:[/CENTER] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Discussions générales
Création et utilisation des sprite BBCODE sur RealityGaming
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut