Sujet: Faire des extras avec le CSS du forum Mar 14 Avr - 14:00 | |
| Bonjour ! Aujourd'hui, je vais (essayer) de vous apprendre à faire quelques petits extras grâce au css du forum ? Par petits extras, j'entends infobulle, ect... Ainsi, vous n'aurez pas à créer un fichier html rien que pour faire une réponse de rp ou autre ! Allez, commençons.Les infobulles Ahlala, ces fameuses infobulles ! Elles nous font suer, n'est-ce pas ? Avouez-le, vous vous êtes déjà demandé "mais comment c'est possible de faire des infobulles comme ça ?!". Aujourd'hui, je vous réponds, MOUAHAHAHA !
J'ai moi-même appris à faire des infobulles par le biais d'un tutoriel, mais j'ai jugé bon d'en faire un ici car il est possible que vous ne puissiez pas sur d'autres forums. Pourquoi ? Parce qu'ils n'ont pas mis le CSS correspondant, pardi ! Eh oui, il faut qu'un forum possède les précieux attributs dans sa feuille de style. C'est pourquoi ce tutoriel ne fonctionne pas partout, car il se peut que les autres forums donnent d'autres noms à leurs classes, ect... Commençons sans plus tarder !
Ouah ! C'est vraiment trop, trop, trop classe ! Je veux faire ce genre d'effet ! Hé, au lieu de faire comme si tu voulais éditer mon message pour voir le code, laisse moi plutôt t'expliquer, cher enfant ~ Tu as sans doute pu remarquer qu'en passant ta souris, une bulle (une bulle rectangulaire wsh) apparaissait. Eh bien pour arriver à un tel effet, il faut un très long travail, mais je vais te mâcher le travail. Voici le code : - Code:
-
<div class="ohmoivoulaire infobulle !!!!!!!!!!!!!!!!!!!!!!!!!" abracadabara, voilà ton infobulle ! Merci Ryuka-sensei !!!!"><span wsh wsh wsh alors content de ton infobulle ! Grâce à cette balise span, tu vas pouvoir invoquer un spaghetti !!! Comme tu as de la chance !!!!>Ecrire ici, écrire ici, écrire ici...</span> </div> Tu as essayé ? [...] Ah, quelle déception, personne n'est tombé dans le panneau. Plus sérieusement, voici le vrai code : - Code:
-
<div class="conteneur"><img width="150" height="150" src="http://i757.photobucket.com/albums/xx212/AndreinaUchiha/Durarara/9694173.jpg";><div class="infobulle">Le contenu de ton infobulle est ici ~~</div></div> Et voilà, ta magnifique infobulle est là. Pour que tu ne sois pas trop perdu, on va décortiquer un peu : "width="150" height="150"" -> width signifie la largeur et height la hauteur. Tu peux donc changer à ta guise. J'ai placé ces caractéristiques car autrement, l'image était trop grande à mon goût. Ainsi, tu peux redimensionner ton image rien qu'avec le html. N'est-ce pas magnifique ? src="https://2img.net/h/i757.photobucket.com/albums/xx212/AndreinaUchiha/Durarara/9694173.jpg"; -> Vous pouvez remplacer l'url par l'url de votre image. Et c'est tout, au final. POUR CEUX QUI N'ONT RIEN ECOUTE : Il suffit d'utiliser ce code : - Code:
-
<div class="conteneur"><img width="LARGEUR DE TON IMAGE (réglable)" height="HAUTEUR DE TON IMAGE (réglable)" src="URL DE TON IMAGE";><div class="infobulle"> Contenu de ton infobulle</div></div> Et voilà ! Voici un tutoriel mieux expliqué qui traite aussi du css. Je vous invite à le lire si tout n'est pas bien clair Les polices MOUAHAHA ! Nous avons installé sur le forum de nouvelles polices, et je tiens à vous les faire partager : Amatic SCLa police Amatic SC n'est-elle pas jolie ? Je la trouve superbe pour les titres ! Pour l'utiliser, il faut utiliser le html. Il faut donc écrire - Code:
-
<FONT face="le nom de votre police">votre texte avec la police</FONT> Je dis plutôt ça de manière générale, car ça va être utile tout le long de cette partie du tutoriel. La taille des écrits de notre forum étant plutôt petite, on peut aussi ajouter la caractéristique size, qui doit être suivie d'un nombre de pixel qui donnera la taille des lettres, ce qui donne : - Code:
-
<FONT face="Amatic SC" size="20">Amatic SC</FONT> Et voilà le travail ^^ Maintenant, inutile de nous répéter. Je vais juste vous donner le nom et l'aperçu des autres polices, car il suffit de remplacer "Amatic SC" par le nom de la police. PacificoBerkshire SwashSpecial EliteCrushedPoiret oneShadows into lightIndie flowerPermanent MarkerCrafty girlsGreat VibesSacramentoReenie Beanie Nothing you could do Walter turncoat Over the rainbow
Sympathique, non ?
|
| Ryuku Maeda Une légende parmi les divinités Messages : 168 Date d'inscription : 15/03/2015 Age : 82 Localisation : je tue tes amis par des coups de ...
|