Forum RPG Fairy Tail - 20 Lignes ( soit 360 mots ) Minimum demandées - Bon Roleplayers exigés
 

Partagez | 
 

 Une signature défilante? C'est possible!

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage

avatar
☁--Koji Akio--☁



Masculin
Messages : 84
Jewels : 56572
Date d'inscription : 14/10/2011
Age : 26


Click ♥
MessageSujet: Une signature défilante? C'est possible!   Jeu 3 Nov - 20:25


Faire une signature défilante


Bonjour Bonsoir! Aujourd'hui, je vais décortiquer avec vous le code permettant de réaliser ce genre de signature:



Alors tout d'abord, le code de la page en elle même:

Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Sign Tamashii</title>
    <style type="text/css">

<!--

-->
</style></head>

<body>

<center><div style="border-top: 1px dotted ;border-bottom: 1px dotted;border-left: 3px double ;border-right: 3px double ; border-color: black; padding: 7px;-moz-border-radius:10px; -webkit-border-radius:10px; -border-radius:10px;"><marquee><img src="http://img37.imagefra.me/img/img37/7/9/23/khrackers/f_uunk1luwoy1m_778dd2c.png"/> <img src="http://i29.servimg.com/u/f29/13/19/76/69/tamash11.png"/> <img src="http://i65.servimg.com/u/f65/15/15/25/88/kdo_ta11.png"> <img src="http://img137.imageshack.us/img137/7786/tamashii.png"> <img src="http://img4.hostingpics.net/pics/385546Tamashii.png"> <img src="http://img13.imageshack.us/img13/6827/tamac.png"></marquee></div></center>
</body>
</html>

Dans la page, on voit bien le center et le div, qui servent à centrer la boite. Les options de celles-ci ayant été développées dans ce tuto (Merci Waya), je n'y reviendrais que sommairement:

  • border(-left,-right,-top,-bottom): Servent à définir le style de chacune des bordures (ainsi que la taille dans le cas présent). Dans l'ordre: à gauche, à droite, en haut, en bas.
  • border-color: Sert à définir la couleur des bordures.

    /!\REMARQUE: Il est possible de regrouper toutes les informations concernant les border en une seule : border(-left,-right,-top,-bottom): taille style color.

    Les différents styles de border que je connais: traits = solid, pointillées: dotted, tirets: dashed, doublée: double;

  • padding: Sert à faire que l'intérieur ne colle pas sur les bords (très utile lorsque l'on met des arrondis.

    /!\REMARQUE: Il est possible de ne pas mettre le même padding partout en se servant des suffixe -left, -right, -top, -bottom.

  • (-moz,-webkit)-border-radius: Sert comme expliqué dans le tutoriel de notre cher Waya à ajouter des arrondis aux angles. Respectivement, compatibilité sur mozilla firefox (-moz), sur chrome (-webkit) et sur... sur... Je sais plus quel navigateur le dernier :s
    Ce dernier s'utilise de la façon suivante: -moz-border-radius: (angle supérieur gauche) (angle supérieur droit) (angle inférieur droit) (angle inférieur gauche).

    Les parenthèses sont là pour bien montrer les espaces entre les différentes valeurs.

    /!\REMARQUE: Si les valeurs des angles sont identiques, on peut ne mettre qu'une seule valeur.


Pour ceux qui le désirerait, il est possible d'ajouter une image de fond (voir le tutoriel de Waya) ou une couleur avec background-color: #VALEURHEXADECIMALE;

Il reste la balise < marquee> que je n'ai pas expliquée. Elle sert à faire défiler les différentes images. Étant une balise double, elle marche de pair avec < /marquee>

Exemple:

Le texte à faire défiler

/!\REMARQUE: Il est possible de changer le sens de défilement avec l'option direction dans la balise marquee

Exemple:

Ce texte va défiler vers le haut

Code:
<marquee direction="up" height="60">Ce texte va défiler vers le haut</marquee>

Celui ci vers le bas

Code:
<marquee direction="down" height="60">Celui ci vers le bas</marquee>

Celi-ci vers la droite

Code:
<marquee direction="right">Celi-ci vers la droite</marquee>

/!\REMARQUE: Il est bien entendu possible de changer la vitesse de défilement mais là n'est pas le but propre du tutoriel.

Enfin, notre page html est créée. Il ne reste plus qu'à la mettre en place sur le forum où dans notre signature. Pour celà, on utilise la balise iframe

Voici le code de l'exemple du début:

Code:
<center><iframe src="http://testblake.forumactif.com/h3-sign-tama" noresize frameborder="0" width="500px" scrolling="0" height="200"></iframe></center>

Analysons à nouveau les composantes de la balise ensemble:

  • src: L'adresse où a été hébergée la page. Forumactif fournit celà donc si votre adminette préférée est gentille, demandez lui :p
  • noresize: Pour ne pas déformer votre page lorsqu'elle sera intégrée.
  • frameborder: Pour intégré votre page sans lui ajouter un cadre hideux :s en ="0" en ="1" elle sera là
  • widht: Largeur dans laquelle on intégrera la page.
  • height: Cette fois-ci c'est la hauteur
  • scrolling="0": En théorie, c'est pour que l'on ne puisse pas scroll à l'intérieur mais j'ai jamais vu si ça fonctionnait ou pas xD


Voilà, vous savez comment faire cette jolie petite signature codée. J'espère vous avoir aider!
A bientôt pour un nouveau tutoriel!

Pour toutes question ou remarque, postez juste après Very Happy Je tenterais de répondre à votre demande.


Ce tutoriel étant ma propriété, il est interdit de le copier ou le poster autre part sans mon accord.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur

avatar
☁--Ryuu Kurohiryuu--☁


Féminin
Messages : 916
Jewels : 102248
Date d'inscription : 01/08/2011
Age : 24


Look Me ♥️
Clique ici
Clique ici aussi
Je suis belle ♥️
Clique ici (:
Clique ici
Click ♥
MessageSujet: Re: Une signature défilante? C'est possible!   Jeu 3 Nov - 20:54

Super Smile 40 points chaton





Thème Song Of Loo





Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://hell-heaven.forumgratuit.org/
 

Une signature défilante? C'est possible!

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: Tutoriels De Codages-
Sauter vers:  

Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit