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

Partagez | 
 

 Boîtes ? Kézako ? Oo

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

avatar
☁--Invité--☁

Invité
Click ♥
MessageSujet: Boîtes ? Kézako ? Oo   Jeu 3 Nov - 18:42

FAIRE DES BOÎTES
~ Ou Comment Faire la Même Chose qu'ici ~
    Hello The World !

    Bon, j'imagine vos têtes : qu'est-ce que c'est que cette histoire de Boîte encore ? Il a fumé la moquette Ton ton Waya ? Et bien, non...Cependant, j'ignore le terme exacte pour nommer l'effet utilisé ici.
    Cet effet, et bien, c'est cet espèce d'encadrement "bizarre" qui entoure actuellement mon texte. Bon, j'avoue que si cela vous paraît vraiment trop zarby, je le changerai et le rendrais un poil plus mignon ^^

    Dans tout les cas, cette boî-boîte s'obtient grâce à du HTML...avec un brin de CSS ? Mouis, mais très peu.
    En fait, c'est un CSS que l'on va directement insérer dans un code HTMl via une balise au pouvoir divin : [div style=""] !
    Si si, cette balise, elle peut devenir Dieu le Père si on a les idées allant de pair. Et puis, vous verrez, dés lors où on veut mettre du CSS directement dans le code HTML sans passer par la case "Feuille de CSS du forum"...le caractère style="" revient ^^

    Enfin, j'avoue qu'il ne me reste plus grand chose à vous dire...Car rien qu'en dévoilant ceci, je vous ai grandement éclairé sur la nature de mes boîtes.
    Car voilà, ce que je nomme Boîte n'est, ni plus ni moins, que du texte encadré par cette balise. Voici, d'ailleurs, un exemple de code, et son rendu :

    Code:
    <center><div style="background-image: url(http://i22.servimg.com/u/f22/11/82/19/32/essai210.jpg); border-color: #275ba6;text-align: justify; -moz-border-radius-topleft: 2px; -moz-border-radius-topright: 2px;-moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px;border-style: dashed; border-width: 1px; width: 400px;">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </div></center>
    Ce qui va vous donner :

    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

    Et si on analysait un peu le code ensemble ? ^^

    Tout déjà, Background-image: url();
    Bon, pas besoin de vous faire un dessin. Tout ce qui sera dans ce
    aura un fond différent. Ici, une image. ^^

    border-color permet de modifier la couleur de la bordure de votre boîte. Là, il suffit de savoir ce qu'on veut pour la faire ^^

    Les -moz-border-radius- sont là pour les coins.
    Selon que vous avez mit derrière, topright/topleft/bottomright/bottomleft vous manipulerez en pixel, l'arrondis de l'angle correspondant. A 0px, l'angle est droit.

    border-style détermine si vous avez un trait plein (solid), des pointillés (datted), des tirets (dashed)...ou encore d'autres effets.

    border-width concerne la taille, ou plutôt, l'épaisseur de votre bordure. ^^

    Mais il existe des alternatives !
    Par exemple, si vous ne voulez pas les mêmes couleurs sur toutes vos bordures, ou si vous ne voulez pas qu'elles ai le même style, ou la même épaisseur...Vous pouvez passer par :

    border-left/right/top/bottom : Xpx #XXXXXX solid/datted/dashed;

    Bon, à la place des X vous mettez les valeurs voulues...
    Et puis, voilà pour vous donner des idées pour personnalisez vos boîtes.

    Dernières informations utiles !
    On peut mettre des boîtes dans des boîtes ! Les damoiselles sont encastrables. Par exemple, le code employé ici est composé de Trois Boîtes.

    La première est la principale, celle où j'écris actuellement.
    La deuxième est celle où le titre est écrit. La grande bande de couleur unie plus sombre.
    La troisième boîte modifie uniquement la typo de mon titre. ^^

    Comme vous vous en doutez, on peut faire plein de choses avec les boîtes...Pour ça, il suffit...et bien...d'avoir les idées, et de trifouiller dans les balises de CSS pour obtenir The solution, et l'effet rendu désiré ^^

    Sur ce, bonne journée !
    N'hésitez pas à poster à ma suite pour questionner, critiquer, ou dire quoique se soit d'autre. ^^
    Oh et, ce Tuto a été fait pour différents forums, dont Libertia et FTAS.
Revenir en haut Aller en bas

avatar
☁--Ryuu Kurohiryuu--☁


Féminin
Messages : 916
Jewels : 104088
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: Boîtes ? Kézako ? Oo   Jeu 3 Nov - 19:22

Et 40 points pour ce petit tuto bien expliquer et clair.





Thème Song Of Loo





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

Boîtes ? Kézako ? Oo

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