Présentation
Bonsoir cher(e)s Cowblogueurs, Cowblogueuses,
Après plusieurs demandes de votre part, nous, les administratrices, avons décidé de créer une nouvelle catégorie, s'intitulant Tutoriel, et qui a pour but, de vous aider, si nous le pouvons, à comprendre certaines choses techniques concernant, avant tout le CSS et le HTML, moyens d'esthétiser votre blog, et très utilisés sur la plateforme de Cowblog.
Ce soir, après la demande de la Cowblogueuse Cassyopee, nous allons vous apprendre, comment mettre une image de fond dans certains de vos articles, pour pouvoir ainsi, écrire ce qui vous chante dessus. Mais pas seulement !! Car avec cette procédure, vous pourriez insérer toutes sorte d'esthétique pour vos articles, les rendant plus attrayants, plus à votre goût.
Introduction
Tout d'abord, il faut entrer dans la fenêtre source de l'article.
Ensuite recopier le code :
<div style="vos souhaits">Votre texte</div>
Attention, il ne faut pas oublier de fermer les balises !
Ensuite, remplir les balises avec les codes du CSS que vous connaissez.
Pour avoir une image de fond dans vos articles, voici le code :
<div style="background-image: url(l'url de votre image); background-repeat: no-repeat;">Votre texte</div>
Mais attention tout est paramétrable :
♦ Si vous voulez que l'image se répète : repeat
♦ Si vous voulez que l'image ne se répète pas : no-repeat
♦ Si vous voulez que l'image se répète en hauteur : repeat-y
♦ Si vous voulez que l'image se répète en largeur : repeat-x
♦ Si vous voulez positionner l'image ajouter un : margin:Xpx;
♦ Si vous voulez positionner le texte ajouter un : padding:Xpx;
Pour encadrer un texte, comme celui-ci
<div style="border: Xpx solid #XXXXXX;">Votre texte</div>
Mais attention tout est paramétrable :
✿. Si vous voulez qu'il y ait une bordure : border: Xpx solid #XXXXXX;
✿. Si vous voulez qu'il y ait une bordure arrondie : -moz-border-radius: Xpx;
✿. Si vous voulez qu'il y ait une couleur de fond : background-color:#XXXXXX;
✿. Si vous voulez qu'il y ait une image de fond : voir paramètre du dessus.
✿. Rajouter les padding et les margin pour la position : voir paramètre du dessus.
Les paramètres de la bordure :
✿. Si vous vouliez une bordure pleine : solid
✿. Si vous voulez une bordure en pointillés : dotted
✿. Si vous voulez une bordure en tirets : dashed
✿. Si vous voulez une double bordure : double
✿. Si vous ne voulez pas de bordure : none
✿. Si vous voulez une bordure cachée : hidden
✿. Si vous voulez une bordure en relief : groove
✿. Si vous voulez une bordure en effet 3D : ridge
✿. Si vous voulez une bordure rentrante : inset
✿. Si vous voulez une bordure sortante : outset
Conclusion
En clair, la balise : <div style="vos souhaits">Votre texte</div> peu combler vos quelques souhaits, si vous vous connaissez un peu en CSS ! On espère que ce petit tutoriel vous sera utile, et qu'il est bien expliquer, sinon demandez-nous ! Si vous souhaiter connaître plus de sujet, demandez-le nous ici, on sera ravie de vous aider.
