RSS
RSS



 

Faire des extras avec le CSS du forum

Voir le sujet précédent Voir le sujet suivant Aller en bas
MessageSujet: Faire des extras avec le CSS du forum Mar 14 Avr - 14:00

Bonjour BLEW !


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://illiweb.com/fa/pbucket.gif";><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 ? z

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 Wink

Les polices

MOUAHAHA ! Nous avons installé sur le forum de nouvelles polices, et je tiens à vous les faire partager :

Amatic SC

La 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.

Pacifico
Berkshire Swash
Special Elite
Crushed
Poiret one
Shadows into light
Indie flower
Permanent Marker
Crafty girls
Great Vibes
Sacramento
Reenie Beanie
Nothing you could do
Walter turncoat
Over the rainbow

Sympathique, non ?


avatar

Feuille de personnage
Célibataire: Yep
Pouvoir: Taper les gens avec des cailloux
Âge du personnage: i'm 20
Une légende parmi les divinités
Une légende parmi les divinités
Voir le profil de l'utilisateur
Messages : 168
Date d'inscription : 15/03/2015
Age : 77
Localisation : je tue tes amis par des coups de ...
Revenir en haut Aller en bas
Faire des extras avec le CSS du forum
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [How To...] Faire votre propre affiche Wanted avec Photoshop.
» La perfection ce n'est pas de faire quelque chose de grand et beau, mais de faire ce que l'on fait avec grandeur et beauté
» Qui osera faire un pacte avec le diable ? -Lana-
» Nouvelle nuit avec Sylvie [PV Sylvie]
» Conseils pour créer une skin avec pixia[tutorial]

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: Purgatoire :: Codage-
Sauter vers: